如何使用正则表达式验证用户名？正则表达式在线正常但JavaScript代码失效的问题解决

Let's break down the issues in your current code and fix them to meet your requirements:

Key Issues in Original Code #

1. Incorrect Regex: Your current regex /^[A-Za-z]+$/g only allows pure letters, not numbers or spaces as you need.
2. Reversed Validation Logic: You're showing an error message when the input matches the allowed pattern (letters only), which is the opposite of what you want. The error should appear when the input contains disallowed characters.
3. Unnecessary Global Flag: Using the g flag with match() can cause unexpected behavior in repeated checks. The test() method is more reliable for boolean validation.

Correct Regex & Validation Logic #

Your requirement is to allow alphanumeric characters (letters + numbers) and spaces only between characters (no leading/trailing spaces, no consecutive spaces). Here's the regex to enforce that:

const allowedUsernamePattern = /^[A-Za-z0-9]+(?: [A-Za-z0-9]+)*$/;

Regex Explanation: #

• ^ = Start of the string
• [A-Za-z0-9]+ = One or more alphanumeric characters
• (?: [A-Za-z0-9]+)* = Non-capturing group: a single space followed by one or more alphanumeric characters, repeated zero or more times (allows multiple words separated by single spaces)
• $ = End of the string

If you want to allow leading/trailing spaces (but trim them before validation), you can modify the code to use inputValue.trim() and adjust the regex to /^[A-Za-z0-9\s]+$/ (note this allows consecutive spaces too).

Corrected Code #

<input id="fname">
<input type="button" onclick="validate()" value="Check">
<br>
<span id="name" style="color: red;"></span>

<script>
const allowedUsernamePattern = /^[A-Za-z0-9]+(?: [A-Za-z0-9]+)*$/;

function validate() {
  const input = document.getElementById("fname").value;
  const errorElement = document.getElementById("name");

  // Check if input matches the allowed pattern
  if (!allowedUsernamePattern.test(input)) {
    errorElement.textContent = "Username can only contain alphanumeric characters and spaces between them.";
    return false;
  } else {
    // Clear error message if input is valid
    errorElement.textContent = "";
    return true;
  }
}
</script>

What Changed: #

• Updated Regex: Now allows alphanumeric characters and valid spaces between them.
• Fixed Logic: We use !allowedUsernamePattern.test(input) to trigger the error when the input doesn't match the allowed pattern.
• Better Error Message: Updated to reflect your actual validation rules.
• Removed Global Flag: Using test() without the g flag ensures consistent results.

If you want to allow leading/trailing spaces (and automatically trim them), modify the input line to:

const input = document.getElementById("fname").value.trim();

内容的提问来源于stack exchange，提问作者Bisma Amjad