使用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." 
     }, 

    }, 

});