用戶名正則表達式驗證問題

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 。

在此處查看有效的演示。