一、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
  • remote
  • minlength
  • maxlength
  • rangelength
  • min
  • max
  • range
  • email
  • url
  • date
  • dateISO
  • number
  • digits
  • creditcard
  • equalTo

  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"
                }

六、综合练习

java代码中使用validator_java代码中使用validator

java代码中使用validator_字符串_02

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>

validate_form.html

运行结果:

java代码中使用validator_ViewUI_03

七、总结一些注意事项

  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>