使用jQuery插件檢查用戶名是否有效

Question

我正在使用jQuery驗證插件來驗證表單。我有一個我需要驗證的用戶名字段。到目前爲止，這是我：

$(".personal_form").validate({ 
     errorElement: 'div', 
     rules: { 
      username: { 
       required: true, 
       maxlength: 15, 
       remote: { 
        url: "usernameChecker.php", 
         type: "post", 
         data: { 
          username: function() { 
          return $("#username").val(); 
          }, 
         }, 
        }, 
      }, 

     }, 

     messages: { 

      username: { 
       required: "Please enter a username", 
       maxlength: "Your username should not exceed 15 characters.", 
       remote: "This username is taken." 
      }, 

     }, 

     }); 

我想讓它這樣，如果有人輸入了一個無效的用戶名，它會顯示一個錯誤。例如，如果有人輸入了特殊字符：「！@＃$％^ & *（）_ + =〜` - 」它會顯示錯誤。有效的用戶名是包含字母或數字的用戶名。我怎樣才能做到這一點？

Answer 1

創建用戶名檢查按你的規則，就像一個自定義的驗證規則：

jQuery.validator.addMethod("alphanumeric", function(value, element) { 
     return this.optional(element) || /^[a-zA-Z0-9 ]+$/.test(value); 
    }); 

，並與您的驗證在<input type="text">元素與RegExp\w+|d\+以匹配其添加

Answer 2

您可以pattern屬性字或數字字符，<label>元素，css:focus,:invalid,:after

#username:focus:invalid + label[for="username"]:after { 
 
    content: "input must contain only letters and numbers"; 
 
    color:red; 
 
}

<input type="text" 
 
     pattern="\w+|d\+" 
 
     id="username" 
 
     placeholder="input letters and numbers" /> 
 
<label for="username"></label>

Answer 3

使用jQuery.validator.addMethod(name, method [, message ])對錶單字段自定義驗證。

https://jqueryvalidation.org/jQuery.validator.addMethod/

Answer 4

在補充一點：

$.validator.addMethod(
    "regex", 
    function(value, element, regexp) { 
     var check = false; 
     return this.optional(element) || regexp.test(value); 
    }, 
    "Please provide a valid username." 
); 

$(".personal_form").validate({ 
    errorElement: 'div', 
    rules: { 
     username: { 
      required: true, 
      maxlength: 15, 
      regex: /^[a-zA-Z0-9 ]+$/, 
      remote: { 
       url: "usernameChecker.php", 
        type: "post", 
        data: { 
         username: function() { 
         return $("#username").val(); 
         }, 
        }, 
       }, 
     }, 

    }, 

    messages: { 

     username: { 
      required: "Please enter a username", 
      maxlength: "Your username should not exceed 15 characters.", 
      remote: "This username is taken." 
     }, 

    }, 

});