我们在使用Jquery-validate插件验证表单时候，默认的提供的校验规则有限，不够用怎么办，可以自己添加自定义校验规则；默认的触发方式有时候也不符合业务需求，需要进行定制化配置修改，下面就来介绍下如何添加自定义校验规则和触发方式的修改
jquery-validate插件如何下载和引入到项目中，这里不做详细介绍了。首先看下一个测试的页面验证效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户信息</title>
<script src="../js/jquery-validation/jquery.min.js"></script>
<script src="../js/jquery-validation/jquery.validate.min.js"></script>
<script src="../js/jquery-validation/messages_zh.js"></script>
<script src="../js/jquery-validation/additional-methods.js"></script>
<script>
$().ready(function() {
$("#userInfoForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
age: {
required: true,
digits:true
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
age: {
required: "请输入年龄",
digits: "必须输入整数"
},
email: "请输入一个正确的邮箱"
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form id="userInfoForm" method="post" action="">
<fieldset>
<legend>用户基本信息</legend>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="age">年龄</label>
<input id="age" name="age" type="text">
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>打开浏览器测试页面，然后点击提交按钮，可以看到表单右侧出现红色的错误提示信息
以上测试页面都是使用自带的默认校验规则
提供的默认校验规则
required:true 必须输入的字段。
remote:"check.do" 使用ajax方法调用check.do验证输入值。
email:true 必须输入正确格式的电子邮件。
url:true 必须输入正确格式的网址。
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期（ISO），如：2017-09-17，2017/09/17。只验证格式，不验证有效性。
number:true 必须输入合法的数字（负数，小数）。
digits:true 必须输入整数。
creditcard: 必须输入合法的信用卡号。
equalTo:"#field" 输入值必须和 #field 相同。
accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
range:[5,10] 输入值必须介于5和10之间。
max:5 输入值不能大于5。
min:10 输入值不能小于10。
例如例子中姓名使用了required必填校验和minlength最小2个字符限制，年龄字段使用digits校验必须是整数，邮箱使用了email格式
如果我们想让姓名只能输入中文，默认的校验规则不符合要求，则需要添加自定义的校验规则。
$.validator.addMethod("validateName", function(value, element) {
var v_regex=/^[\u4E00-\u9FA5]+(?:·[\u4E00-\u9FA5]+)*$/;
value=""+value;
if(value){
if(!v_regex.test(value)){
return false;
}else{
return true;
}
}else{
return null;
}
}, "请正确填写您的姓名");自定义添加的验证规则建议添加到additional-methods.js文件中
在页面验证规则上添加validateName: true
username: {
required: true,
minlength: 2,
validateName: true
}添加之后，页面的用户名表单，如果不填写中文，验证就通过不了
验证的默认触发方式onsubmit，onfocusout，onkeyup，onclick，focusInvalid上，有时候不想在每次按键的时候触发验证，就需要将onkeyup设置为false，因为如果是远程验证规则，onkeyup会在每次输入一个字符的时候，触发一个远程请求，会浪费很多请求资源
在validate参数中如图的位置添加
onkeyup:false
可以关闭onkeyup触发验证
其它的触发验证修改方式，和onkeyup方式一样，可以根据需要进行设置修改
扫一扫
6534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
