javascript - 检查输入是否包含无效字符

Question

我想检查用户在选择名字时是否输入了无效字符。我的代码几乎可以工作。唯一的问题是当我输入有效的用户名时“John”并添加无效字符“John!!”它没有检测到它。当我输入无效字符时，只有“!!!”它被检测到。

HTML:

<input class="user-input" pattern="[a-zA-Z0-9._-ßÄÖÜäöü]{1,30}" type="text" id="idUsername" oninput='checkValidUsername();'"  required disabled>

JavaScript:

function checkValidUsername()
    {
      var input = document.getElementById("idUsername").value;

      if(input.search(/^[a-zA-Z0-9ßÄÖÜäöü_.-]/) == -1)
      {
        document.getElementById("idValidChars").style.visibility = "visible";
      }
      else
      {
        document.getElementById("idValidChars").style.visibility = "hidden";
      }
    }

Answer 1

您必须将正则表达式更改为

/^[a-zA-Z0-9ßÄÖÜäöü_.-]+$/

这是因为您需要检查整个字符串的有效性，而不是像您那样检查第一个字符。
+ 允许前一个序列出现多次，$ 限制它为字符串的末尾。这意味着，字符串必须仅以您指定的字符开头和结尾。