知问前端——验证插件(三)
使用remote:url，可以对表单进行ajax验证，默认会提交当前验证的值到远程地址。如果需要提交其他的值，可以使用data选项。
新用户注册时，如果用户名已被占用，则及时返回用户名已占用的信息。应当使用ajax验证。
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form id="reg" action="123.html"> <p>账号：<input type="text" name="user" id="user" /></p> <p>密码：<input type="text" name="pass" id="pass" /></p> <p><input type="submit" value="提交" /></p> </form> </body> </html>
style.css：
.valid { background: url(img/reg_succ.png) no-repeat right; } .abc { border: 5px solid green; }
user.php：
<?php //账号被占用 if($_GET['user'] == 'liayun') { echo 'false'; } else { echo 'true'; } ?>
注意：远程地址只能输出'true'或'false'，不能输出其他值。
使用ajax验证，jQuery代码如下：
$(function() { $("#reg").validate({ submitHandler:function(form) { alert("验证成功，准备提交！"); }, rules:{ user:{ required:true, minlength:2, remote:"user.php" //连接远程地址 }, pass:{ required:true, minlength:6 } }, messages:{ user:{ required:"账号不得为空！", minlength:"账号不得小于{0}位！", remote:"账号被占用！" }, pass:{ required:"密码不得为空！", minlength:"密码不得小于{0}位！" } } }); });
如果要同时传递多个值到远程端，即用户登录时，如果用户名或密码错误，则会给用户一定的提示。
user.php：(若使用post方式提交)
<?php if($_POST['user'] == 'liayun' && $_POST['pass'] == '123321') { echo 'true'; } else { echo 'false'; } ?>
jQuery代码如下：
$(function() { $("#reg").validate({ submitHandler:function(form) { alert("验证成功，准备提交！"); }, rules:{ user:{ required:true, minlength:2, }, pass:{ required:true, minlength:6, remote:{ url:"user.php", type:"post", dateType:"json", data:{ user:function() { return $('#user').val(); } } } } }, messages:{ user:{ required:"账号不得为空！", minlength:"账号不得小于{0}位！", }, pass:{ required:"密码不得为空！", minlength:"密码不得小于{0}位！", remote:"账号或密码不正确！" } } }); });
jquery.validate.js提供了一些事件触发的默认值，这些值呢，大部分建议是不用更改的。仅作了解。
1.取消提交验证，默认是true。
onsubmit : false, //默认是true
注意：设置为false会导致直接传统提交，不会实现验证功能，一般是用于keyup/click/blur验证提交。
2.设置鼠标离开不触发验证
onfocusout : false, //默认为true
如果默认，输入比如"1"这样的错误字符串，鼠标一旦离开，即验证！反则，置为false，鼠标离开不验证，没什么鸟用！
3.设置键盘按下弹起不触发验证
onkeyup : false, //默认为true
如果默认，在输入的过程(即伴随着键盘的按下弹起)中，就会触发验证，反之，置为false，在输入的过程(即伴随着键盘的按下弹起)中不触发验证。
4.设置点击checkbox和radio不触发验证，同上。
onclick : false, //默认为true
5.设置错误提示后，无法获取焦点。
focusInvalid : false, //默认为true
如果默认，初次点击submit按钮，会触发xxx不为空等验证，随即焦点落在第一个输入框中，然后以此类推。若置为false，错误提示后，无法获取焦点。
6.提示错误时，隐藏错误提示，不能和focusInvalid一起用，冲突。这个问题一大堆，就一废物属性，估计这辈子都不会用到它。
focusCleanup : true, //默认为false
7.如果表单元素设置了title值，且messages为默认，就会读取title值的错误信息，我们可以通过ignoreTitle : true，设置为true，屏蔽这一个功能。
ignoreTitle : true, //默认为false
index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form id="reg" action="123.html"> <p>账号：<input type="text" name="user" id="user" title="账号错误" /></p> <p>密码：<input type="text" name="pass" id="pass" /></p> <p><input type="submit" value="提交" /></p> </form> </body> </html>
index.js：
$(function() { $("#reg").validate({ submitHandler:function(form) { alert("验证成功，准备提交！"); }, rules:{ user:{ required:true, minlength:2, //remote:"user.php" //连接远程地址 }, pass:{ required:true, minlength:6, remote:{ url:"user.php", type:"post", dateType:"json", data:{ user:function() { return $('#user').val(); } } } } }, messages:{ user:{ //required:"账号不得为空！", //minlength:"账号不得小于{0}位！", //remote:"账号被占用！" }, pass:{ required:"密码不得为空！", minlength:"密码不得小于{0}位！", remote:"账号或密码不正确！" } } }); });
此时，点击提交按钮，会显示“账号错误”信息。那么可以通过ignoreTitle : true，设置为true，屏蔽这一个功能：
$(function() { $("#reg").validate({ //onsubmit:false, //onfocusout:false, //onkeyup:false, //focusInvalid:false, //focusCleanup:true, //禁止读取title ignoreTitle : true, submitHandler:function(form) { alert("验证成功，准备提交！"); }, rules:{ user:{ required:true, minlength:2, //remote:"user.php" //连接远程地址 }, pass:{ required:true, minlength:6, remote:{ url:"user.php", type:"post", dateType:"json", data:{ user:function() { return $('#user').val(); } } } } }, messages:{ user:{ //required:"账号不得为空！", //minlength:"账号不得小于{0}位！", //remote:"账号被占用！" }, pass:{ required:"密码不得为空！", minlength:"密码不得小于{0}位！", remote:"账号或密码不正确！" } } }); });
此时，点击提交按钮，会显示“这是必填字段”信息。
8.判断表单所验证的元素是否全部有效
//外部验证，得到true/false的返回值 alert($("#reg").valid()); //全部有效返回true
validate.js提供了可以单独验证每个表单元素的rules方法，不但提供了add增加验证，还提供了remove删除验证的功能。
给user增加一个表单验证：
$("#user").rules("add", {
required:true,
minlength:2,
messages:{
required:"账号不得为空！",
minlength:"账号不得小于{0}位！"
}
});
删除user的所有验证规则：
$("#user").rules("remove");
删除user的指定验证规则：
$('#user').rules('remove', 'minlength min max');
添加自定义验证并调用：
index.html中加入
<p>邮编：<input type="text" name="code" id="code" /></p>
jQuery代码如下：
//调用自定义验证 $("#code").rules("add", { required:true, code:true, messages:{ required:"邮编不得为空！" } }); //自定义验证 $.validator.addMethod("code", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); //固定套路 }, "请输入正确的邮政编码！");
