jQuery Validation Plugin
资料
基本说明
最基本的框架依赖:jquery.js和jquery.validate.min.js
示例代码:
<script type="text/javascript">
$(function(){
var validator = $("#form1").validate({
rules:{
name: {
required:true,
minlength:2,
maxlength:5
}
},
messages:{
name: {
required:"请输入姓名!",
minlength:"姓名最少输入2位",
maxlength:"姓名最多输入5位"
}
}
});
// 提交事件
$("#btn-submit").click(function(){
if(validator.form()){
$("#form1").submit();
}
});
// 清空表单中的错误提示,不是清空表单
$("#btn-reset").click(function(){
validator.resetForm();
});
});
</script>
对目标表单,调用validate(),可以获得一个验证对象validate;
validate对象调用form()方法执行验证,并返回验证结果;
validate对象调用resetForm()方法,可以清空表单中的报错信息,不是清空表单内容。
自定义校验方法
$.validator.addMethod()方法,可以传入方法名和函数,添加自定义的校验方法;
添加成功后在验证时直接调用。
示例代码:
<script type="text/javascript">
$(function(){
$.validator.addMethod("rightName", function(value, element) {
return this.optional(element) || (value != '1234' && value != '1111');
});
var validator = $("#form1").validate({
rules:{
name: {
required:true,
minlength:2,
maxlength:5,
rightName:"名字文案"
}
},
messages:{
name: {
required:"请输入姓名!",
minlength:"姓名最少输入2位",
maxlength:"姓名最多输入5位",
rightName:"名字不要乱写!!!"
}
}
});
// 提交事件
$("#btn-submit").click(function(){
if(validator.form()){
$("#form1").submit();
}
});
});
</script>
自定义验证报错
validate()函数的入参,提供了一组供开发者自定义报错信息的参数选项。
示例代码:
var validator = $("#form1").validate({
rules:{
name: {
required:true
}
},
messages:{
name: {
required:"请输入姓名!"
}
},
// 自定义报错信息元素名称
errorElement:"em",
// 自定义报错信息样式名称
errorClass:"my-error",
// 自定义报错信息位置
errorPlacement:function(error,element) {
error.appendTo(element.parent("td").next("td"));
}
});
说明:
errorElement:
自定义报错信息元素名称,输入一个元素名称,报错文案就指定为这个元素
errorClass:
自定义报错信息样式名称,输入一个class name,则报错的input元素和报错文案元素会被添加上这个class
errorPlacement:
自定义报错信息位置,使用方式如代码示例