Jquery.Validate基本使用方法及注意事项

发布于 2018-02-13  269 次阅读


jquery.validate官方文档:点此打开
jquery.validate.unobtrusive文档:点此打开

首先四个引入

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-form/dist/jquery.form.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

然后验证方式三种:

第一种: 使用class="{}"的方式,必须引入包:jquery.metadata.js

例如:

<input id="firstname" name="firstname" class="{required:true,minlength:5,messages:{required:'请输入内容'}}" />

第二种: 写在标签的多个属性上

例如:

<input type="text" class="form-control" id="txtUserName" name="UserName" placeholder="请输入登陆账户"
data-val="true" data-val-maxlength="用户名长度不能超过20个字符" data-val-maxlength-max="20"
data-val-minlength="用户名长度不能少于2个字符" data-val-minlength-min="2" data-val-required="用户名不能为空" />

<!--这个span是配合显示提示信息的 valmsg-for 对应 input的name-->
<span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>

补充:

  • data-val-required="message". Shows the message when the element has no value
  • data-val-length="message" + data-val-length-min="min length" and/or data-val-length-max="max length". Shows the message if the contents of the element are too long or too short
  • data-val-number="message" or data-val-date="message". Shows the message when the value of the element is not of the right type. Other types: data-val-creditcarddata-val-digitsdata-val-emaildata-val-ur
  • data-val-regex="message" + data-val-regex-pattern="^pattern$". Shows the message if the value of the element does not match the pattern
  • data-val-equalto="message" + data-val-equalto-other="jQuery selector". Shows the message if the contents of the element are not the same as the contents of the element selected by the jQuery selector (usually "#someid")
  • data-val-range="message" + data-val-range-min="min" + data-val-range-max="max". Shows the message if the contents of the element are not in the range. Specify both min and max!

第三种: JS设置

例如

$("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form
alert("提交表单");
form.submit(); //提交表单  这里要注意! 后面会说到 和validate.unobtrusive在一起时 配合jquery.form的ajaxSubmit会有问题
},

//验证规则
rules:{
myname:{
required:true
},
email:{
required:true,
email:true
},
password:{
required:true,
rangelength:[3,10]
},
confirm_password:{
equalTo:"#password"
}
},
//提示的消息
messages:{
myname:{
required:"必填"
},
email:{
required:"必填",
email:"E-Mail格式不正确"
},
password:{
required: "不能为空",
rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
},
confirm_password:{
equalTo:"两次密码输入不一致"
}
}
});

最后,说下配合jquery.Form 提交表单

这种方式,如果你引用了jquery.validate.unobtrusive.js无效的,等于你白配置,参数没设置进去一样

$("#myform").validate({
submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form
alert("提交表单");
form.ajaxSubmit(); 
//$(form).submit();这样的话会陷入死循环 反复提交验证······
//提交表单  这里要注意! 后面会说到 和validate.unobtrusive在一起时 配合jquery.form的ajaxSubmit会有问题
}})

// jQuery Unobtrusive Validation 只能这样设置才有效

$("#myForm").data("validator").settings.submitHandler = function (form) {
$(form).ajaxSubmit(option);  
//这里必须用$(form).ajaxSubmit 而不是form.ajaxSubmit(使用这个会导致无效) 不是上面提到那种会陷入循环
return false; //拦截本身form的普通提交  似乎是
};

最后最后,可以稍微封装一下方便多处使用

//form validation
lkWeb.FormValidation = function (validationForm, successCallBack, successMsg) {
 var option = {
 datatype: "json",
 success: function (data) {
 if (data.flag == true) {
   if (NotIsEmpty(successMsg)) {
      layer.alert(successMsg);
         setTimeout(function () {
        if (IsFunction(successCallBack))
          successCallBack(); }, 1500)
       }
       else {
         if (IsFunction(successCallBack))
           successCallBack();
     }
 }
 else {
 layer.alert(data.msg);
 }
 },
 error: function (error) {
 layer.alert("提交请求失败");
 // console.log(error);
 }
 };
 // jQuery Unobtrusive Validation 只能这样设置才有效
 validationForm.data("validator").settings.submitHandler = function (form) {
 $(form).ajaxSubmit(option);
 return false;
 };
}
//调用
 lkWeb.FormValidation($("#loginForm"), function () {
 lkWeb.GoAction("control", "index")
 }, "登陆成功")

LoneKing