Jquery validation
一、导入js库
Section titled “一、导入js库”<script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script>二、默认校验规则
Section titled “二、默认校验规则”-
required:boolean默认值：false必输字段-
required:"#aa:checked"表达式的值为真，则需要验证 -
required:() => {}返回为真，表时需要验证后边两种常用于，表单中需要同时填或不填的元素
-
-
remote:string URL默认值：-使用ajax方法调用check.php验证输入值 -
email:boolean必须输入正确格式的电子邮件 -
url:boolean必须输入正确格式的网址 -
date:boolean必须输入正确格式的日期 日期校验ie6出错，慎用 -
dateISO:boolean必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 -
number:boolean必须输入合法的数字(负数，小数) -
digits:boolean必须输入整数 -
creditcard:boolean必须输入合法的信用卡号 -
equalTo:"string"输入值必须和#field相同 -
accept:string输入拥有合法后缀名的字符串（上传文件的后缀） -
maxlength:number 5输入长度最多是5的字符串(汉字算一个字符) -
minlength:number 10输入长度最小是10的字符串(汉字算一个字符) -
rangelength:number[5,10]输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符) -
range:[5,10]输入值必须介于 5 和 10 之间 -
max:5输入值不能大于5 -
min:10输入值不能小于10 -
range:array如：[5,10]，输入值必须介于 5 和 10 之间。 -
rangelength:array如：[5,10]，输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
1、校验规则对象
Section titled “1、校验规则对象”$().ready(function() { $("#signupForm").validate({ rules: { //可以是字符串形式 firstname: "required", //也可以是对象的形式 email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "请输入姓名", email: { required: "请输入Email地址", email: "请输入正确的email地址" }, password: { required: "请输入密码", minlength: jQuery.format("密码不能小于{0}个字 符") }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不能小于5个字符", equalTo: "两次输入密码不一致不一致" } } });});三、默认的提示
Section titled “三、默认的提示”messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.")},
如需要修改，可在js代码中加入：
jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为{0} 的值"), min: jQuery.validator.format("请输入一个最小为{0} 的值")});
//推荐做法，将此文件放入messages_cn.js中，在页面中引入,这样提示就是中文的了<script src="../js/messages_cn.js" type="text/javascript"></script>四、其他选项
Section titled “四、其他选项”debug(很重要)当异步提交数据不想页面刷新的话，设置debug为true，
$().ready(function() { var validator = $("#signupForm").validate({ //debug(很重要)只验证不提交表单，也就是submitHandler() 方法调用之后不会刷新跳转页面， //所以，当异步提交数据不想页面刷新的话，设置debug为true debug:true, //是否敲击键盘是进行验证，默认:true onkeyup:false, //是否获取焦点的时候进行验证，默认:true onfocusout:false, //是否提交时验证，默认:true onsubmit:false, //是否在鼠标点击时验证（一般验证checkbox,radiobox）, 默认:true onclick:false, //错误信息的class errorClass String 默认:"error" errorClass:"invalid", //使用什么元素标记错误 errorElement String 默认:"label", errorElement:"em", //wrapper String 使用什么标签再把上边的errorELement包起来 wrapper:"li", //要验证的元素通过验证后的动作（注意：每个字段验证成功都会调用一次）,如果跟一个字符串,会当做一个css类,也可跟一个函数 success:"valid", //通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交，参数就是form对象 submitHandler: funcrion(form) { form.submit(); //或者 $(form).ajaxSubmit(); }, //可以给未通过验证的元素加效果,闪烁等 //highlight: //更改错误信息显示的位置,默认把错误信息放在验证的元素后面 errorPlacement: function(error, element) { //默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面 error.appendTo(element.parent()); } });});
//如果一个页面中有多个表单都想设置成为debug，用$.validator.setDefaults({ debug: true,
})//重置表单$("#reset").click(function() { validator.resetForm();});
//可以设置validate的默认值，写法如下：$.validator.setDefaults({ submitHandler: function(form) { alert("submitted!");form.submit(); }});
//自定义验证方法addMethod(name, method, message)// 1、中文字两个字节jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] );}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
// 2、邮政编码验证jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");
//valid()检查是否检验通过, 重新验证validator.valid()//校验全部$("#add_product_form").valid()//校验某个$("#add_product_form").valid()$("#url_tab_group_btn input[name='product.url']").valid()
//动态添加校验 $("#province").rules("add",{required:true,min:0,messages:{min:"请选择省份"}});
//动态删除校验，有可能要手动清空下样式才行，恢复校验还要添加回来 $("#area").rules("remove"); $("#is_Aa_product_url").rules("remove", "url") $("#form").removeClass("is-invalid")
//1.设置一个绑定了规则{required: true, minlength: 2}的class，定义为name。jQuery.validator.addClassRules("name", { required: true, minlength: 2});
//2.定义两个classjQuery.validator.addClassRules({ name: { required: true, minlength: 2 }, zip: { required: true, digits: true, minlength: 5, maxlength: 5 }});