jquery ui 学习随笔 验证插件
如果返回的是布尔值的话就卸载class里面
例如：<input type="text" class="required" name="user" id="user" /> 表示这个input里面不能为空，必须输入字段
如果是数字区间，就写在属性-值这种方式
例如：<input type="text" class="required" minlength="2" name="user" id="user" /> 表示输入字段不能少于2
注意：由于这种形式不能设置指定的错误提示信息。我们推荐使用下面的形式，也避免的HTML 污染。
$('#reg').validate({
rules : {
user : { //只有一个规则的话， user为input中name的名字
required : true, //直接user : 'required',
minlength : 2,
},
},
messages : { //如果错误则抛出错误信息
user : {
required : '帐号不得为空！',
minlength : '帐号不得小于2 位！',
},
}
});
这种方式可以对应验证规则，比较方便查看
所有规则演示
$('#reg').validate({
rules : {
email : {
email : true,
},
url : {
url : true,
},
date : {
date : true,
},
dateIOS : {
dateIOS : true,
},
number : {
number : true,
} digits : {
digits : true,
},
creditcard : {
creditcard : true,
},
min : {
min : 5,
},
range : {
range : [5, 10],
},
rangelength : {
rangelength : [5,10],
},
notpass : {
equalTo : '#pass', //这里的To 是大写的T
}
},
});
三．validate()的方法和选项
除了默认的验证规则外，validate.js 还提供了大量的其他属性和方法供开发者使用。比
如，调试属性，错误提示位置一系列比较有用的选项。
//jQuery.format 格式化错误提示 $('#reg').validate({ rules : { user : { required : true, minlength : 5, rangelength : [5,10] }, }, messages : { user : { required : '帐号不得为空！', minlength : jQuery.format('帐号不得小于{0}位！'), rangelength : jQuery.format('帐号限制在{0}-{1}位！'), //{0}可以将上面的minlength：5匹配起来，跟着上面的数字进行显示 }, }, });
//开启调试模式禁止提交 $('#reg').validate({ debug : true, }); //设置调试模式为默认，可以禁止多个表单提交 所有默认行为都可以在这里设置 $.validator.setDefaults({ debug : true, }); //使用其他方式代替默认提交 submitHandler : function (form) { //可以执行ajax 提交，并且无须debug:true 阻止提交了 可以获取到dom对象 }, //忽略某个字段验证 ignore : '#pass', //群组错误提示 groups : { myerror : 'user pass', }, //显示群组的错误提示 focusInvalid : false, errorPlacement : function (error, element) { //error:得到错误提示的对象 elemen：得到发生错误的DOM对象 $.each(error, function (index, value) { //value 为label 通过$.html获取label标签中的错误文字 $('.myerror').html($('.myerror').html() + $(value).html()); }) }, //群组错误提示，分开 将错误信息进行分组是比较好的方式 groups : { error_user : 'user', error_pass : 'pass' }, //将群组的错误指定存放位置 errorPlacement : function (error, element) { //因为没有用html()方法进行过滤html文本，所以出来的文字是有label标签的 error.appendTo('.myerror'); }, //设置错误提示的class 名 errorClass : 'error_list', //设置错误提示的标签 errorElement : 'p', //统一包裹错误提示 errorLabelContainer : 'ol.error', wrapper : 'li', //设置成功后加载的class success : 'success', //使用方法加载class 并添加文本 success : function (label) { label.addClass('success').text('ok'); },//高亮显示有错误的元素，变色式 highlight: function(element, errorClass) { $(element).fadeOut(function() { $(element).fadeIn() }) }, //高亮显示有错误的元素，变色式 highlight: function(element, errorClass) { $(element).css('border', '1px solid red'); }, //成功的元素移出错误高亮 unhighlight : function (element, errorClass) { $(element).css('border', '1px solid #ccc'); }, //表单提交时获取信息 invalidHandler : function (event, validator) { var errors = validator.numberOfInvalids(); //获取提交时的错误信息有几条，返回数值 if (errors) { $('.myerror').html('您有' + errors + '个表单元素填写非法！'); } }, //获取错误提示句柄，不用提交及时获取值 showErrors : function (errorMap, errorList) { var errors = this.numberOfInvalids(); if (errors) { $('.myerror').html('您有' + errors + '个表单元素填写非法！'); //在提交之前，输入的值就会判断是否符合，能够及时显示还有多少错误信息 } else { $('.myerror').hide(); } this.defaultShowErrors(); //执行默认错误 }, //获取错误提示句柄，errorList showErrors : function (errorMap, errorList) { alert(errorList[0].message); //得到错误信息 alert(errorList[0].element); //当前错误的表单元素 },
success : function (label) {
label.addClass('success').text('ok');
},
使用remote:url，可以对表单进行ajax 验证，默认会提交当前验证的值到远程地址。如果需要提交其他的值，可以使用data 选项。
valiadte.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/index2.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> <link rel="stylesheet" href="css/style.css" /> </head> <body> <form id="reg" action="123.html"> <p class="myerror"></p> <p> 账号：<input type="text" name="user" id="user" /> </p> <p> 密码：<input type="text" name="pwd" id="pwd" /> </p> <input type="submit" value="提交"/> </form> </body> </html>
index2.js $(function(){ $('#reg').validate({ submitHandler:function(form) { alert('验证成功！'); }, rules:{ user:{ required:true, minlength:2, // remote:'user.php', }, pwd:{ required:true, minlength:6, remote:{ url:'user.php', data:{ user:function(){ return $('#user').val(); }, pwd:function(){ return $('#pwd').val(); } } } } }, messages:{ user:{ required:'必填项', minlength:jQuery.format('请输入不少于{0}个字符'), remote:'该账号已存在' }, pwd:{ required:'请输入密码', minlength:jQuery.format('请输入不少于{0}个字符'), remote:'账号或密码不正确', } }, }); });
user.php <?php // if($_GET['user']=='bnbbs'){ // echo 'false'; // }else{ // echo "true"; // } if($_GET['user'] == 'bnbbs' && $_GET['pwd'] == '111111'){ echo 'true'; }else{ echo 'false'; } ?>
注意：远程地址只能输出'true'或'false'，不能输出其他值
//同时传递多个值到远程端 pass : { required : true, minlength : 6, remote : { url : 'user.php', type : 'POST', dataType : 'json', data : { user : function () { return $('#user').val(); }, }, }, }, //user.php 内容 <?php if ($_POST['user'] != 'bnbbs' || $_POST['pass'] != '123456') { echo 'false'; } else { echo 'true'; } ?>
validate.js 提供了一些事件触发的默认值，这些值呢，大部分建议是不用更改的。 //取消提交验证 onsubmit : false, //默认是true 注意：设置为false 会导致直接传统提交，不会实现验证功能，一般是用于keyup/click/blur 验证提交。 //设置鼠标离开不触发验证 onfocusout : false, //默认为true //设置键盘按下弹起不触发验证 onkeyup : false, //默认为true 注意：只要设置了，在测试的浏览器不管是false 还是true 都不触发了。 //设置点击checkbox 和radio 点击不触发验证 onclick : false, //默认为true //设置错误提示后，无法获取焦点 focusInvalid : false, //默认为true //提示错误时，隐藏错误提示，不能和focusInvalid 一起用，冲突 focusCleanup : true, //默认为false 如果表单元素设置了title 值，且messages 为默认，就会读取title 值的错误信息，我们 可以通过ignoreTitle : true，设置为true，屏蔽这一个功能。 ignoreTitle : true, //默认为false //判断表单所验证的元素是否全部有效 alert($('#reg').valid()); //全部有效返回true Validate.js 提供了可以单独验证每个表单元素的rules 方法，不但提供了add 增加验证， 还提供了remove 删除验证的功能。 //给user 增加一个表单验证 $('#user').rules('add', { required : true, minlength : 2, messages : { required : '帐号不得为空！', minlength : jQuery.format('帐号不得小于{0}位！'), } }); //删除user 的所有验证规则 $('#user').rules('remove'); //删除user 的指定验证规则 $('#user').rules('remove', 'minlength min max'); //添加自定义验证 $.validator.addMethod('code', function (value, element) { //value 为你输入的表单的值 element为那个表单元素 var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, '请正确填写您的邮政编码'); //调用自定义验证 rules : { code : { required : true, code : true, } },