用户名正则表达式验证问题

Question

我在发布之前搜索了SO，但找不到适合我的答案。

以下是测试用户名的简单JS脚本。

用户名长度验证可以正常工作，但字符验证不能：

所有不允许的字符（例如$％; [+））都可以通过，但它们应该返回错误。

<script type="text/javascript">
 $(document).ready(function() {
    $("#username").change(function() {
        var username = $("#username").val();
        var msgbox = $("#status");
        var usernameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\._-]$i/

         if ((username.length >= 4 && username.length <= 20) &&  
 (usernameRegex.test(username.value) == false)) {

            $.ajax({
                type: "POST",
                url: "username.php",
                data: "username=" + username,
                success: function(msg) {

                    if (msg == 'OK') {

                        msgbox.html('<img src="ok.png">');

                    } else {
                        msgbox.html(msg);
                    }
                }
             });
        } else {

            $("#status").html('<img src="no.png">Try again');
        }
     });
});
</script>

我想念什么？

Answer 1

您正在向后检查测试结果。 如果模式匹配，则test()方法返回true 。 并且您正在检查错误的值。

更改为：

if ((username.length >= 4 && username.length <= 20) 
    &&  usernameRegex.test(username.value)) {

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test?redirectlocale=zh-CN&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FRegExp%2Ftest

Answer 2

/^[a-zA-Z0-9][a-zA-Z0-9\._-]{4,20}$i/
                                  ^^
                        Here is the problem

您可能想指定不区分大小写的标志，但是偶然地将i放在正则表达式模式本身中，您需要将表达式修改为：

/^[a-zA-Z0-9][a-zA-Z0-9\._-]{4,20}$/i

正如他们指出的那样，您应该测试一个true条件，换句话说，您需要检查字符串是否确实与模式匹配，从而仅包含允许的字符。

Answer 3

您的正则表达式有问题，不仅是$i/ 。 你有：

var usernameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\._-]$i/;

第二个令牌[a-zA-Z0-9\\._-]仅被评估一次。 它检查第一个字符的第一个令牌，然后检查第二个字符的第二个令牌，然后由于$原因， 期望字符串的结尾 。 即使在将测试条件更改为true并修复了其余逻辑之后，您的原始正则表达式也会使所有用户名超过两个字符而失败。

尝试以下方法：

var usernameRegex = /^[a-zA-Z0-9][a-zA-Z0-9\._-]+$/i;

+确保正则表达式将在令牌中查找至少一个字符，并将其匹配直到字符串结束。

最后，就像其他人提到的那样，您需要usernameRegex.test(username)而不是usernameRegex.test(username.value) ，并且它需要测试一个true值，而不是false 。

在此处查看有效的演示。