【Java EE 学习 33 下】【validate表单验证插件】
一、validate
1.官方网站：http://jqueryvalidation.org/
2.文档说明：http://jqueryvalidation.org/documentation/
3.js文件下载：官方网站首页，提供一个最新版本的链接
二、验证表单的一般步骤
1.准备好从JQuery官方网站下载JQuery.js文件和validate官网下载的jquery.validte.js文件
注意事项：validate并不支持所有版本的JQuery，支持的版本目前有：JQuery-1.7.2,1.8.3,1.9.1,1.11.1，该信息可以从官网首页Required字段查找到。
2.在网页代码中引入两个文件（不要使用自带的JQuery.js文件，该文件在之前的版本中使用比较方便，但是最新版本的JQuery.js文件里面没有任何实质性的内容，最后还是引入了外部的js文件，大多会使用JQuery-1.11.1.js文件，所以最好直接使用该js文件）。
3.调用验证的方法
$("#empForm").validate(
{
//自定义规则
rules:{
},
//自定义提示信息
messages:{
}
}
);
三、validate的系统规则详情（可参考官网doc）
1.英文原版
required– Makes the element required.remote– Requests a resource to check the element for validity.minlength– Makes the element require a given minimum length.maxlength– Makes the element require a given maxmimum length.rangelength– Makes the element require a given value range.min– Makes the element require a given minimum.max– Makes the element require a given maximum.range– Makes the element require a given value range.email– Makes the element require a valid emailurl– Makes the element require a valid urldate– Makes the element require a date.dateISO– Makes the element require an ISO date.number– Makes the element require a decimal number.digits– Makes the element require digits only.creditcard– Makes the element require a credit card number.equalTo– Requires the element to be the same as another one
2.中文版
（1）required：true，必须字段
（2）remote:"check.jsp"，使用ajax方法调用check.jsp验证输入
（3）email:true，必须输入正确格式的电子邮件
（4）url:true，必须输入正确格式的网址
（5）date:true,必须输入正确格式的日期
（6）dateISO:必须输入正确格式的日期(ISO)，例如：2009-1-1，1009/1/1，只验证格式，不验证有效性
（7）number:true,必须输入合法的数字
（8）digits:true，必须输入整数
（9）creditcard:true，必须输入合法的信用卡号
（10）equalTo:"#filed"，输入的值必须和filed的值相同
（11）accept:输入拥有合法后缀名的字符串
（12）maxlength:5，输入长度最多是5的字符串（汉字算一个字符）
（13）minlength:10，输入长度最多是最小是10的字符串（汉字算一个字符）
（14）rangelength:[5,10]，输入长度必须在5到10之间的字符串，汉字算一个字符。
（15）range:[5,10]，输入的值必须在5到10之间
（16）max:5,输入的值最大不能大到5
（17）min:5，输入的值最小不能小于5
3.使用样例
rules:{ realname:{ required:true }, username:{ required:true, rangelength:[5,8] }, psw:{ required:true, rangelength:[6,12] }, psw2:{ required:true, rangelength:[6,12], equalTo:"#psw" }, gender:{ required:true }, age:{ required:true, range:[26,50] }, edu:{ required:true }, birthday:{ required:true, dateISO:true }, checkbox1:{ required:true }, email:{ required:true, email:true }, cart:{ required:true, checkIdLength:true, checkId:true } },
四、提示信息messages的写法
写法格式和rules相同，但是在每个方法之后需要写上字符串，用于提示信息用。
例：
messages:{ realname:{ required:"真实姓名不能为空！" }, username:{ required:"登录名不能为空！", rangelength:"登录名长度应当在5-8之间" }, psw:{ required:"密码不能为空！", rangelength:"密码长度为6-12！" }, psw2:{ required:"请再次输入密码！", rangelength:"密码长度为6-12！", equalTo:"两次输入的密码不一致！" }, gender:{ required:"性别必须进行选择！" }, age:{ required:"年龄不能为空！", range:"年龄范围应在26-50之间！" }, edu:{ required:"请选择学历信息！", }, birthday:{ required:"请输入日期信息！", dateISO:"请输入正确格式的日期！" }, checkbox1:{ required:"请至少选择一个兴趣爱好！" }, email:{ required:"电子邮箱不能为空！", email:"请输入正确的电子邮箱！" }, cart:{ required:"身份证号码不能为空！", checkIdLength:"身份证号码长度应为15或者18", checkId:"身份证号码不合法！" } } }
五、自定义规则
1.流程
（1）在定义校验规则之前先定义一个方法用于执行校验规则的逻辑
（2）在rules中指定某个域使用该校验
（3）在messages中指定这个域使用此校验规则没有通过的提示信息
2.自定义校验规则的格式
$.validator.addMethod("规则名称，如required",function(value,element,params)
{
//value是元素的值,如text格式的input元素value值
//element是元素本身，如Input
//params是指在rules中设置的参数
},"错误提示信息");
3.示例：
（1）定义方法
$.validator.addMethod("checkIdLength",function(value,element,params){
if(value.length!=15&&value.length!=18)
return false;
return true;
},"长度错误！");
（2）rules中指定某个域使用该校验
cart:{ required:true, checkIdLength:true }
（3）在messages中定义错误提示信息
cart:{ required:"身份证号码不能为空！", checkIdLength:"身份证号码长度应为15或者18" }
六、综合练习
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>jQuery validation plug-in - main demo</title> 5 <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" /> 6 <script type="text/javascript" src="js/jquery-1.11.1.js"></script> 7 <script type="text/javascript" src="js/jquery.validate.js"></script> 8 <script type="text/javascript"> 9 /*********************************************************************************************************/ 10 11 </script> 12 </head> 13 <body> 14 <p>员工信息录入</p> 15 <form name="empForm" id="empForm" method="post" action="test.html"> 16 <table border=1> 17 <tr> 18 <td><label for="realname">真实姓名(不能为空 ,没有其他要求)</label></td> 19 <td><input type="text" id="realname" name="realname" /> 20 </td> 21 </tr> 22 <tr> 23 <td> 24 <label for="username">登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</label> 25 </td> 26 <td><input type="text" id="username" name="username" /></td> 27 </tr> 28 <tr> 29 <td> 30 <label for="psw">密码(不能为空,长度6-12字符或数字,不能包含中文字符):</label> 31 </td> 32 <td><input type="password" id="psw" name="psw" style="width:120px" /></td> 33 </tr> 34 <tr> 35 <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> 36 <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td> 37 </tr> 38 <!-- 39 40 41 --> 42 <tr> 43 <td>性别(必选其一)</td> 44 <td> 45 <input type="radio" id="gender_male" value="m" name="gender"/>男 46 <input type="radio" id="gender_female" value="f" name="gender"/>女 47 <label style="display: none" for="gender" class="error">请选择性别</label> 48 </td> 49 </tr> 50 <tr> 51 <td>年龄(必填26-50):</td> 52 <td><input type="text" id="age" name="age" /></td> 53 </tr> 54 55 <tr> 56 <td>你的学历:</td> 57 <td> <select name="edu" id="edu"> 58 <option value="">－－请选择你的学历－－</option> 59 <option value="a">专科</option> 60 <option value="b">本科</option> 61 <option value="c">研究生</option> 62 <option value="e">硕士</option> 63 <option value="d">博士</option> 64 </select> 65 </td> 66 </tr> 67 68 <tr> 69 <td>出生日期(1982/09/21):</td> 70 <td><input type="text" id="birthday" name="birthday" style="width:120px" value="" /></td> 71 </tr> 72 73 <tr> 74 <td>兴趣爱好:</td> 75 <td colspan="2"> 76 <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球 77 <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球 78 <input type="checkbox" name="checkbox1" id="qq3" value="2" />上网 79 <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游 80 <input type="checkbox" name="checkbox1" id="qq5" value="4" />购物 81 <label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label> 82 </td> 83 </tr> 84 <tr> 85 <td align="left">电子邮箱:</td> 86 <td><input type="text" id="email" style="width:120px" name="email" /></td> 87 </tr> 88 <tr> 89 <td align="left">身份证(15-18):</td> 90 <td><input type="text" id="cart" style="width:200px" name="cart" /></td> 91 </tr> 92 <tr> 93 <td></td> 94 <td></td> 95 <td><input type="submit" name="firstname" id="firstname" value="保存"></td> 96 </tr> 97 </table> 98 99 </form> 100 <script type="text/javascript"> 101 $.validator.addMethod("checkIdLength",function(value,element,params){ 102 if(value.length!=15&&value.length!=18) 103 return false; 104 return true; 105 },"长度错误！"); 106 $.validator.addMethod("checkId",function(value,element,params){ 107 if(value.length==15){ 108 //正则表达式不能带上引号 109 var pattern=/^\d{15}$/; 110 //alert("长度为15！"); 111 var result=pattern.test(value); 112 return result; 113 } 114 if(value.length==18){ 115 var pattern=/^\d{18}|\d{17}[X|x]$/; 116 var result=pattern.test(value); 117 return result; 118 } 119 return false; 120 }); 121 </script> 122 <script type="text/javascript"> 123 /* $(document).ready(function(){ 124 alert("开始加载页面！"); 125 }); */ 126 $("#empForm").validate({ 127 //定义规则 128 rules:{ 129 realname:{ 130 required:true 131 }, 132 username:{ 133 required:true, 134 rangelength:[5,8] 135 }, 136 psw:{ 137 required:true, 138 rangelength:[6,12] 139 }, 140 psw2:{ 141 required:true, 142 rangelength:[6,12], 143 equalTo:"#psw" 144 }, 145 gender:{ 146 required:true 147 }, 148 age:{ 149 required:true, 150 range:[26,50] 151 }, 152 edu:{ 153 required:true 154 }, 155 birthday:{ 156 required:true, 157 dateISO:true 158 }, 159 checkbox1:{ 160 required:true 161 }, 162 email:{ 163 required:true, 164 email:true 165 }, 166 cart:{ 167 required:true, 168 checkIdLength:true, 169 checkId:true 170 } 171 }, 172 //定义犯错的时候使用的提示信息 173 messages:{ 174 realname:{ 175 required:"真实姓名不能为空！" 176 }, 177 username:{ 178 required:"登录名不能为空！", 179 rangelength:"登录名长度应当在5-8之间" 180 }, 181 psw:{ 182 required:"密码不能为空！", 183 rangelength:"密码长度为6-12！" 184 }, 185 psw2:{ 186 required:"请再次输入密码！", 187 rangelength:"密码长度为6-12！", 188 equalTo:"两次输入的密码不一致！" 189 }, 190 gender:{ 191 required:"性别必须进行选择！" 192 }, 193 age:{ 194 required:"年龄不能为空！", 195 range:"年龄范围应在26-50之间！" 196 }, 197 edu:{ 198 required:"请选择学历信息！", 199 }, 200 birthday:{ 201 required:"请输入日期信息！", 202 dateISO:"请输入正确格式的日期！" 203 }, 204 checkbox1:{ 205 required:"请至少选择一个兴趣爱好！" 206 }, 207 email:{ 208 required:"电子邮箱不能为空！", 209 email:"请输入正确的电子邮箱！" 210 }, 211 cart:{ 212 required:"身份证号码不能为空！", 213 checkIdLength:"身份证号码长度应为15或者18", 214 checkId:"身份证号码不合法！" 215 } 216 } 217 }); 218 </script> 219 </body> 220 </html>
运行结果：
七、总结一些注意事项
1.实际上对域的监听是通过<label></label>标签实现的，所以尽量要在被监听的元素旁边声明Label标签，如<label for="username">用户名</label>，其中for的名字要和被监听域的name属性相同，如<input type="text" name="username">，事实上如果没有改标签的话validate插件会自动检测并通过dom添加一个label标签。
2.对于下拉列表框，如果让某一个option元素的值变成""，那么该元素就不会被监听，这样就算是单击了该项，也不会被认为执行了选择的动作，这种情况适用于提示的option，如<option value="">请选择一个省份</option>。
3.规则添加的顺序决定了该规则的执行顺序，所以要谨慎选择添加规则选项的顺序。
4.不要使用""将正则表达式引起来，否则后果很严重。使用形式：/^内容$/
5.单选框、复选框必须加上label标签，下拉菜单则可以不用。
单选框：
<input type="radio" id="gender_male" value="m" name="gender"/>男 <input type="radio" id="gender_female" value="f" name="gender"/>女 <label style="display: none" for="gender" class="error">请选择性别</label>
复选框：
<input type="checkbox" name="checkbox1" id="qq1"/>乒乓球 <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球 <input type="checkbox" name="checkbox1" id="qq3" value="2" />上网 <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游 <input type="checkbox" name="checkbox1" id="qq5" value="4" />购物 <label style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
