第一百八十三节，jQuery-UI，知问前端--验证插件
jQuery-UI，知问前端--验证插件
学习要点：
1.使用 validate.js 插件
2.默认验证规则
3.validate()方法和选项
4.validate.js 其他功能
验证插件（validate.js），是一款验证常规表单数据合法性的插件。使用它，极大的解 放了在表单上繁杂的验证过程，并且错误提示显示的完善也增加了用户体验。
一．使用 validate.js 插件
官网下载：http://bassistance.de/jquery-plugins/jquery-plugin-validation 最重要的文件是 validate.js，还有两个可选的辅助文件：additional-methods.js（控件 class 方式）和 message_zh.js（提示汉化）文件（实际使用，请使用 min 压缩版）。
html
<form id="reg" action="123.html"> <p class="myerror"></p> <p>帐号：<input type="text" name="user" id="user" title="帐号错误" /></p> <p>密码：<input type="text" name="pass" id="pass" /></p> <p>邮编：<input type="text" name="code" id="code" /></p> <p><input type="submit" value="提交" /></p> </form>
第一步：引入 validate.js
<script type="text/javascript" src="js/jquery.validate.js"></script>
第二步：在 JS 文件中执行
$('#reg').validate(); //在form元素上使用，表单验证方法
二．默认验证规则
Validate.js 的默认验证规则的写法有两种形式：1.控件属性方式；2.JS 键值对传参方式。
validate()方法，接收一个对象，对象里有两个基本属性rules，和messages，rules写验证规则，messages写提示信息
$('#reg').validate({
rules : {
//获取表单元素的name值来写验证规则
},
messages : {
//获取表单元素的name值来写验证提示，以上面对象
}
});
rules默认规则列表
required:true 必须输入字段，不能为空
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 user: { //表单name为user的 required: true //表单不能为空 } }, messages: { //编写提示信息 user: { //表单name为user的 required: '用户名不能为空!' //不符合规则的提示 } } });
email:true 必须输入正确格式的电子邮件
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 email: true //必须输入正确格式的电子邮件 } }, messages: { //编写提示信息 ail: { //表单name值 email: '必须输入正确格式的电子邮件!' //不符合规则的提示 } } });
url:true 必须输入正确格式的网址
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 url: true //必须输入正确格式的电子邮件 } }, messages: { //编写提示信息 ail: { //表单name值 url: '必须输入正确格式的网址包含http://!' //不符合规则的提示 } } });
date:true 必须输入正确格式的日期（IE6 验证出错）
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 url: true //必须输入正确格式的电子邮件 }, riq:{ date:true //必须输入正确格式的日期 } }, messages: { //编写提示信息 ail: { //表单name值 url: '必须输入正确格式的网址包含http://!' //不符合规则的提示 }, riq:{ date:'必须输入正确格式的日期!' } } });
dateISO:true 必须输入正确格式的日期(ISO)（只验证格式，不验证有效）
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 url: true //必须输入正确格式的电子邮件 }, riq:{ dateISO:true //必须输入正确格式的日期(ISO)（只验证格式，不验证有效） } }, messages: { //编写提示信息 ail: { //表单name值 url: '必须输入正确格式的网址包含http://!' //不符合规则的提示 }, riq:{ dateISO:'必须输入正确格式的日期!' } } });
number:true 必须输入合法的数字(负数，小数)
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 number: true //必须输入合法的数字(负数，小数) } }, messages: { //编写提示信息 ail: { //表单name值 number: '必须输入合法的数字(负数，小数)!' //不符合规则的提示 } } });
digits:true 必须输入正整数
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 digits: true //必须输入正整数 } }, messages: { //编写提示信息 ail: { //表单name值 digits: '必须输入合法的数字(负数，小数)!' //不符合规则的提示 } } });
creditcard:true 必须输入合法的信用卡号，例如：5105105105105100
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 creditcard: true //必须输入合法的信用卡号 } }, messages: { //编写提示信息 ail: { //表单name值 creditcard: '必须输入合法的信用卡号!' //不符合规则的提示 } } });
equalTo:"#field" 输入值必须和#field 相同，密码确认，值为密码框的id
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 equalTo: '#pass' //输入值必须和#field 相同，密码确认 } }, messages: { //编写提示信息 ail: { //表单name值 equalTo: '确认密码与密码不一致' //不符合规则的提示 } } });
minlength:5 输入长度最小是 5 的字符串(汉字算一个字符)
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 minlength: 3 //输入长度最小是 } }, messages: { //编写提示信息 ail: { //表单name值 minlength: '输入长度不得小于3位' //不符合规则的提示 } } });
maxlength:10 输入长度最多是 10 的字符串(汉字算一个字符)
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 maxlength: 5 // 输入长度最多是 } }, messages: { //编写提示信息 ail: { //表单name值 maxlength: '输入长度不得大于5位' //不符合规则的提示 } } });
rangelength:[5,10] 输入长度介于 5 和 10 之间的字符串")(汉字算一个字符)
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 rangelength: [2,5] // 输入长度介于 5 和 10 之间的字符串 } }, messages: { //编写提示信息 ail: { //表单name值 rangelength: '输入长度不得小于2位，大于5位' //不符合规则的提示 } } });
range:[5,10] 输入值必须介于 5 和 10 之间，数值必须大于5小于10
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 range: [5,10] // 数值必须大于5小于10 } }, messages: { //编写提示信息 ail: { //表单name值 range: '数值必须大于5小于10' //不符合规则的提示 } } });
min:5 输入值不能小于 5
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 min: 5 // 输入值不能小于 5 } }, messages: { //编写提示信息 ail: { //表单name值 min: '数值不能小于5' //不符合规则的提示 } } });
max:10 输入值不能大于 10
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 // 输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: '数值不能大于10' //不符合规则的提示 } } });
remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值
三．validate()的方法和选项
除了默认的验证规则外，validate.js 还提供了大量的其他属性和方法供开发者使用。比 如，调试属性，错误提示位置一系列比较有用的选项。
jQuery.format 格式化错误提示，自动获取规则里的数值显示到提示，第1个参数写0，第二个参数1
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 100 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } } });
debug : true开启调试模式禁止提交
//将表单执行表单验证方法 $('#reg').validate({ debug : true, //开启调试模式禁止提交 rules: { //编写规则 ail: { //表单name值 max: 100 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } } });
setDefaults()全局方法，设置调试模式为默认，可以禁止多个表单提交
$.validator.setDefaults({
debug : true,
});
submitHandler : function{form}使用其他方式代替默认提交，函数接收form，阻止默认提交，并且表单验证通过后执行函数
//将表单执行表单验证方法 $('#reg').validate({ debug : true, //开启调试模式禁止提交 rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, submitHandler:function (form) { //阻止默认提交，并且表单验证通过后执行函数 //alert(form); //会得到form对象 //一般用于ajax提交 } });
ignore : '#pass',忽略某个字段验证，值为要忽略的字段id
//将表单执行表单验证方法 $('#reg').validate({ ignore : '#ail', //忽略某个字段验证，值为要忽略的字段id rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } } });
groups群组错误提示，将提示信息群组在一起，值是对象，对象里属性为自定义名称，值为要群组的name值，多个空格隔开
//将表单执行表单验证方法 $('#reg').validate({ ignore : '#ail', //忽略某个字段验证，值为要忽略的字段id rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, groups: { myerror: 'user pass' } });
errorPlacement显示群组的错误提示
//将表单执行表单验证方法 $('#reg').validate({ ignore : '#ail', //忽略某个字段验证，值为要忽略的字段id rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, focusInvalid: false, errorPlacement: function (error, element) { $.each(error, function (index, value) { $('.myerror').html($('.myerror').html() + $(value).html()); }) } });
errorPlacement将群组的错误指定存放位置
//将表单执行表单验证方法 $('#reg').validate({ ignore : '#ail', //忽略某个字段验证，值为要忽略的字段id rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, errorPlacement: function (error, element) { //将群组的错误指定存放位置 error.appendTo('.myerror'); //将群组的错误指定存放位置 } });
errorClass设置错误提示的 class 名，参数为Class名称
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, errorClass:'cuor' //设置错误提示的 class 名 });
errorElement设置错误提示的标签，值为标签名称
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, errorElement : 'p' //设置错误提示的标签 });
errorLabelContainer统一包裹错误提示，也就是给错误提示标签，包裹一个标签
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, errorLabelContainer: 'ol.error', //给错误提示标签，包裹一个标签 wrapper: 'li' });
success设置成功后加载的 class ，注意是验证通过后才会有这个class，一般做验证成功后的样式，成功后输入框内样式
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, success : 'succe' //设置成功后加载的 class });
success使用方法加载成功后 class 并添加文本，一般做成功后的信息提示样式，成功后输入框外样式
//将表单执行表单验证方法 $.validator.setDefaults({ debug: true }); $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, success: function (label) { //使用方法加载成功后 class 并添加文本 label.addClass('success').text('ok'); } });
highlight高亮显示有错误的元素，变色式，也就是有错输入框闪烁
//将表单执行表单验证方法 $.validator.setDefaults({ debug: true }); $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, highlight: function (element, errorClass) { //也就是有错输入框闪烁 $(element).fadeOut(function () { $(element).fadeIn() }) } });
highlight高亮显示有错误的元素，变色式，有错输入框边框变色
//将表单执行表单验证方法 $.validator.setDefaults({ debug: true }); $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, highlight: function (element, errorClass) { //有错输入框边框变色 $(element).css('border', '1px solid red'); } });
unhighlight成功的元素移出错误高亮，也就是使用上面两种的情况下，成功了将变色去掉
//将表单执行表单验证方法 $.validator.setDefaults({ debug: true }); $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, highlight: function (element, errorClass) { //有错输入框边框变色 $(element).css('border', '1px solid red'); }, unhighlight: function (element, errorClass) { //成功了将变色去掉 $(element).css('border', '1px solid #ccc'); } });
invalidHandler表单提交时获取信息
//将表单执行表单验证方法 $.validator.setDefaults({ debug: true }); $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, invalidHandler: function (event, validator) { var errors = validator.numberOfInvalids(); if (errors) { $('.myerror').html('您有' + errors + '个表单元素填写非法！'); } } });
showErrors获取错误提示句柄，不用提交及时获取值
//将表单执行表单验证方法 $.validator.setDefaults({ debug: true }); $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, showErrors: function (errorMap, errorList) { var errors = this.numberOfInvalids(); if (errors) { $('.myerror').html('您有' + errors + '个表单元素填写非法！'); } else { $('.myerror').hide(); } this.defaultShowErrors(); //执行默认错误 } });
showErrors获取错误提示句柄，errorList
//将表单执行表单验证方法 $.validator.setDefaults({ debug: true }); $('#reg').validate({ rules: { //编写规则 ail: { //表单name值 max: 10 //输入值不能大于 10 } }, messages: { //编写提示信息 ail: { //表单name值 max: jQuery.format('数值不能大于{0}') //jQuery.format 格式化错误提示 } }, showErrors: function (errorMap, errorList) { alert(errorList[0].message); //得到错误信息 alert(errorList[0].element); //当前错误的表单元素 } });
四．validate.js 其他功能
remote属性，可以将表单信息通过ajax提交服务器验证，这个功能一般验证用户名是否存在，或密码是否一致等，值是要提交的url地址
使用 remote:url，可以对表单进行 ajax 验证，默认会提交当前验证的值到远程地址。如 果需要提交其他的值，可以使用 data 选项。
验证用户名是否被占用
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 user: { //表单name值,用户名 required : true, //用户名不能为空 remote : 'yzh.php' //将用户名字段，提交远程地址验证 } }, messages: { //编写提示信息 user: { //表单name值,用户名 required: '用户名不能为空', //jQuery.format 格式化错误提示 remote : '用户名被占用' //如果远程，返回false，显示错误信息 } } });
验证php文件
<?php if ($_GET['user'] == 'abc') { //接收用户名值判断，如果用户名等于abc echo 'false'; //如果用户名存在，返回false } else { echo 'true'; //否则返回，true } ?>
注意：远程地址php只能返回'true'或'false'，不能输出其他值。
remote属性，同时传递多个值到远程端，验证登录，账号和密码是否正确
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 pass: { //表单name值,密码 required : true, //用户名不能为空 //remote : 'yzh.php' //默认只能传递密码，还要传递其他表单，对象传值 remote : { url: 'yzh.php', //验证地址 type: 'POST', //验证方式 data: { //验证内容， user: function () { //传递用户名，默认会传递pass，密码 return $('#user').val(); //获取用户名值 } } } } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空', //jQuery.format 格式化错误提示 remote : '用户名或者密码不正确' //如果远程，返回false，显示错误信息 } } });
验证php文件
<?php if ($_POST['user'] != 'bnbbs' || $_POST['pass'] != '123456') { //接收用户名和密码， echo 'false'; //如果用户名和密码正确返回false } else { echo 'true'; //如果用户名和密码不正确返回true } ?>
validate.js 提供了一些事件触发的默认值，这些值呢，大部分建议是不用更改的。下面的一般使用不到
onsubmit取消提交验证，默认是 true
//将表单执行表单验证方法 $('#reg').validate({ onsubmit : false, //默认是 true rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } });
注意：设置为 false 会导致直接传统提交，不会实现验证功能，一般是用于 keyup/click/blur 验证提交。
onfocusout设置鼠标离开不触发验证，默认为 true
//将表单执行表单验证方法 $('#reg').validate({ onfocusout : false, //默认为 true rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } });
onkeyup设置键盘按下弹起不触发验证，默认为 true
//将表单执行表单验证方法 $('#reg').validate({ onkeyup : false, //默认为 true rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } });
注意：只要设置了，在测试的浏览器不管是 false 还是 true 都不触发了。
onclick设置点击 checkbox 和 radio 点击不触发验证，默认为 true
//将表单执行表单验证方法 $('#reg').validate({ onclick : false, //默认为 true rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } });
focusInvalid设置错误提示后，无法获取焦点，默认为 true
//将表单执行表单验证方法 $('#reg').validate({ focusInvalid : false, //默认为 true rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } });
focusCleanup提示错误时，隐藏错误提示，不能和 focusInvalid 一起用，冲突，默认为 true
//将表单执行表单验证方法 $('#reg').validate({ focusCleanup : true, //默认为 false rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } });
ignoreTitle如果表单元素设置了 title 值，且 messages 为默认，就会读取 title 值的错误信息，我们 可以通过 ignoreTitle : true，设置为 true，屏蔽这一个功能。
//将表单执行表单验证方法 $('#reg').validate({ ignoreTitle : true, //默认为 false rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } });
valid()判断表单所验证的元素是否全部有效
//将表单执行表单验证方法 $('#reg').validate({ rules: { //编写规则 pass: { //表单name值,密码 required : true //用户名不能为空 } }, messages: { //编写提示信息 pass: { //表单name值,密码 required: '用户名不能为空' //错误提示 } } }); alert($('#reg').valid()); //全部有效返回 true
Validate.js 提供了可以单独验证每个表单元素的 rules 方法，不但提供了 add 增加验证， 还提供了 remove 删除验证的功能。
rules()方法，增加或者删除表单元素验证
//将表单执行表单验证方法 $('#reg').validate({ }); $('#user').rules('add', { //将输入框id为user的增加validate验证 required: true, minlength: 2, messages: { required: '帐号不得为空！', minlength: jQuery.format('帐号不得小于{0}位！') } });
删除验证
//将表单执行表单验证方法 $('#reg').validate({ }); $('#user').rules('add', { //将输入框id为user的增加validate验证 required: true, minlength: 2, messages: { required: '帐号不得为空！', minlength: jQuery.format('帐号不得小于{0}位！') } }); //删除 user 的所有验证规则 $('#user').rules('remove'); //删除 user 的指定验证规则 $('#user').rules('remove', 'minlength min max');
addMethod添加自定义验证
//添加自定义验证 $.validator.addMethod('code', function (value, element) { //添加自定义验证规则名称为code var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, '请正确填写您的邮政编码'); //将表单执行表单验证方法 $('#reg').validate({ rules: { //增加自定义验证 code: { //name为code的元素 required: true, //不能为空 code: true //自定义验证规则 } } });
