如何用JavaScript/JQuery结合正则表达式屏蔽admin变体用户名？

Hey there! Let's tackle this problem of blocking admin/administrator variants in username inputs. I've got a solid solution using regex and JavaScript/JQuery that covers all the cases you mentioned—mixed case, number substitutions (4 for A, 1 for I), and both the short "admin" and full "administrator" forms.

Step 1: Build the Regex Pattern #

First, we need a regex that matches all forbidden variants. Here's how to break it down:

• Match A/a or 4 with [a4] (we'll use the i flag to handle case insensitivity, so this covers uppercase too)
• Match I/i or 1 with [i1]
• Combine these into patterns for both "admin" and "administrator"

The final regex looks like this:

const forbiddenPattern = /(?:[a4]dm[i1]n|[a4]dm[i1]n[i1]str[a4]tor)/i;

What this does: #

• (?:...): A non-capturing group to wrap our two forbidden patterns (admin and administrator variants)
• [a4]: Matches a, A, or 4
• dm: Matches d/D and m/M (thanks to the i flag, we don't need separate character groups)
• [i1]: Matches i, I, or 1
• The second part [a4]dm[i1]n[i1]str[a4]tor covers all administrator variants, including number/case swaps

Step 2: Implement Input Validation #

Now we'll add this regex to check user input in real-time, and also validate on form submission.

Native JavaScript Implementation #

// Grab the username input and form elements
const usernameInput = document.getElementById('username');
const userForm = document.getElementById('userForm');
const errorMsg = document.getElementById('usernameError');

// Real-time input check
usernameInput.addEventListener('input', function() {
  const inputValue = this.value;
  
  if (forbiddenPattern.test(inputValue)) {
    this.classList.add('error');
    errorMsg.textContent = 'Username cannot contain "admin" or its variants. Please choose another.';
    errorMsg.style.display = 'inline';
  } else {
    this.classList.remove('error');
    errorMsg.textContent = '';
    errorMsg.style.display = 'none';
  }
});

// Form submission validation
userForm.addEventListener('submit', function(e) {
  if (forbiddenPattern.test(usernameInput.value)) {
    e.preventDefault();
    alert('Invalid username: Contains forbidden content. Please try again.');
  }
});

And the corresponding HTML (add an error message element for better UX):

<form id="userForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <span id="usernameError" style="color: red; display: none;"></span>
  <button type="submit">Create Account</button>
</form>

JQuery Implementation #

If you're using JQuery, here's a more concise version:

// Real-time check
$('#username').on('input', function() {
  const inputValue = $(this).val();
  const errorMsg = $('#usernameError');
  
  if (forbiddenPattern.test(inputValue)) {
    $(this).addClass('error');
    errorMsg.text('Username cannot contain "admin" or its variants. Please choose another.').show();
  } else {
    $(this).removeClass('error');
    errorMsg.text('').hide();
  }
});

// Form submission check
$('#userForm').submit(function(e) {
  if (forbiddenPattern.test($('#username').val())) {
    e.preventDefault();
    alert('Invalid username: Contains forbidden content. Please try again.');
  }
});

Step 3: Optional Enhancements #

• Strict Matching: If you want to block usernames that are exactly the variant (not just contain it), add ^ and $ to the regex:

  const strictForbiddenPattern = /^(?:[a4]dm[i1]n|[a4]dm[i1]n[i1]str[a4]tor)$/i;
  

• Expand Variants: If you need to cover more substitutions (like 0 for O), update the character groups—e.g., use [o0] instead of o in the administrator pattern.
• Styling: Add CSS for the error class to make the input stand out:

  .error {
    border: 2px solid red;
    background-color: #ffebee;
  }
  

内容的提问来源于stack exchange，提问作者Falian Aridua