jquery表单验证插件
2017-08-18 本文已影响167人
孙雪冬
jquery的validate插件
前置知识：默认校验规则
使用方法：按顺序引入jquery.js、jquery.validate.min.js和validate-config.js
例：
<script src="xx/jquery.js"></script><script src="xx/jquery.validate.min.js"></script><script src="xx/validate-config.js"></script>
下面是validate-config.js的代码（这个文件不是下载的文件，是自己写的文件，起什么名字都行，内容是一些验证规则，如下：）
$.extend($.validator.messages, {
required: "这是必填字段",
ip: "输入格式不正确",
number: '请输入数字',
max: "输入超过了最大值",
min: "输入小于最小值",
minlength: $.validator.format( "输入字符不能少于 {0} 个." ),
maxlength: $.validator.format( "输入字符不能多于 {0} 个." ),
mask: "网关不可达",
remote: "该名称已存在",
equalTo: "两次输入密码不匹配",
notEqualTo: "新密码不能与原始密码相同",
pw : "必须包含数字、英文字母、特殊字符, 并且大于等于8位"
});
$.validator.addMethod("ip",function(value,element,params){
var ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;
if( value === '' ) {
return true;
}
return ipReg.test( value );
},"输入格式不正确");
代码第1行到第14行是在添加验证信息，第16行后面的代码是在自定义验证函数，返回值为false则显示上面的验证信息。
上面的代码是验证规则的定义，接下来的代码是开始进行验证：
<script src="xx/jquery.js"></script>
<script src="xx/jquery.validate.min.js"></script>
<script src="xx/validate-config.js"></script>
<script>
var $form = $("#form");
$form.validate( {
rules: {
id: {
required: true
},
ip: {
required: true,
ip: true //这个不是写错，而是说明了要使用自定义（$.validator.addMethod）的ip验证方法
},
username: {
required: true
},
pw: {
required: true
}
},
ignore: '.ignore'
} );
$form.on("submit", function () {
if ( $form.valid() ) { //$form.valid返回值为true验证通过
//验证通过执行的代码
}
})
</script>
第6行至第23行说明了使用哪些规则，第25行是进行表单提交的事件监听。
注：如果想改变验证信息在dom结构中的位置，使用errorPlacement，如下：
$('.lock-form-register').validate({
rules: {
username: {
required: true,
username: true
},
password: {
required: true,
pw: true
},
confirmpwd : {
required : true,
equalTo : "#pw",
pw: true
}
},
errorPlacement: function(error, element) {
//element是被验证的元素，error是包含错误信息的label标签
}
});
了解更多，访问：
http://www.runoob.com/jquery/jquery-plugin-validate.html
