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-creditcard, data-val-digits, data-val-email, data-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")
}, "登陆成功")
