js自定義驗證規則的使用

網上很多JS自定義規則隻是說明了怎麼定義，以及另外一種使用方式，這種方式無法滿足所有場景，比如name屬性是變量組合生成的，則無法通過那些資料的方法來使用驗證，此處給予參考。

$("#fm").validate({
    rules:{
            loginpwd:{
                required:true,
                minlength:6,
                maxlength:12,
                regex:"^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"
            },
            loginpwd2:{
                required:true,
                equalTo: "#loginpwd"，
                regex:"^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$"
            }
    },
    messages:{
        loginpwd:{
          required: "請輸入密碼",
          minlength: "密碼長度不能小于 6 個字母",
          regex:"密碼必須包含大小寫字母和數字的組合，不能使用特殊字元，長度在8-10之間"
            },
      loginpwd2:{
          required: "請輸入密碼",
          minlength: "密碼長度不能小于 6 個字母",
          equalTo: "兩次密碼輸入不一緻",
          regex:"密碼必須包含大小寫字母和數字的組合，不能使用特殊字元，長度在8-10之間"
            }
}
});
           

通過表單id擷取表單，再通過rules設定通過name屬性對控件添加驗證。這種方式如果name是變量拼接生成，則無法對控件添加驗證，因為不知道控件name是什麼。

此時可以通過以下方式

添加自定義驗證

// 手機号碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機号碼格式錯誤"); 
           

将自定義驗證的名字mobile添加到控件

<input type="text" name="test" mobile>
           

這樣既可為input添加驗證。驗證似乎隻能添加在form表單