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); 
    }); 

とすることができますあなたの検証と

Answer 2

をそれを追加pattern一致するRegExp\w+|d\+と<input type="text">要素の属性英数字、<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." 
     }, 

    }, 

});