【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 email
• url – Makes the element require a valid url
• date – 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"
                }

六、综合练习

 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>jQuery validation plug-in - main demo</title>
         <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
         <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
         <script type="text/javascript" src="js/jquery.validate.js"></script>
 <script type="text/javascript">
 /*********************************************************************************************************/    
 
 </script>
 </head>
 <body>
     <p>员工信息录入</p>
 <form name="empForm" id="empForm" method="post" action="test.html">
         <table border=1>
             <tr>
                 <td><label for="realname">真实姓名(不能为空 ,没有其他要求)</label></td>
                 <td><input type="text" id="realname" name="realname" />
                 </td>
             </tr>
             <tr>
                 <td>
                     <label for="username">登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</label>
                 </td>
                 <td><input type="text" id="username" name="username" /></td>
             </tr>
              <tr>
               <td>
                       <label for="psw">密码(不能为空,长度6-12字符或数字,不能包含中文字符):</label>
               </td>
               <td><input type="password" id="psw"  name="psw" style="width:120px" /></td>
             </tr>
             <tr>
               <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
               <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
             </tr>
             <!--
 
             -->
             <tr>
                 <td>性别(必选其一)</td>
                 <td>
                     <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>
                 </td>
             </tr>
             <tr>
                 <td>年龄(必填26-50):</td>
                 <td><input type="text" id="age" name="age" /></td>
             </tr>
 
             <tr>
               <td>你的学历:</td>
               <td> <select name="edu" id="edu">
                       <option value="">－－请选择你的学历－－</option>
                       <option value="a">专科</option>
                       <option value="b">本科</option>
                       <option value="c">研究生</option>
                       <option value="e">硕士</option>
                       <option value="d">博士</option>
                   </select>
               </td>
             </tr>
 
             <tr>
               <td>出生日期(1982/09/21):</td>
                <td><input type="text" id="birthday"  name="birthday" style="width:120px" value="" /></td>
             </tr>
 
            <tr>
               <td>兴趣爱好:</td>
               <td colspan="2">
                   <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>
               </td>
             </tr>
              <tr>
                   <td align="left">电子邮箱:</td>
                   <td><input type="text" id="email" style="width:120px" name="email" /></td>
               </tr>
               <tr>
                   <td align="left">身份证(15-18):</td>
                   <td><input type="text" id="cart"  style="width:200px" name="cart" /></td>
               </tr>
             <tr>
                 <td></td>
                 <td></td>
                 <td><input type="submit"  name="firstname"  id="firstname" value="保存"></td>
             </tr>
         </table>
 
 </form>
     <script type="text/javascript">
         $.validator.addMethod("checkIdLength",function(value,element,params){
             if(value.length!=15&&value.length!=18)
                 return false;
             return true;
         },"长度错误！");
         $.validator.addMethod("checkId",function(value,element,params){
             if(value.length==15){
                 //正则表达式不能带上引号
                 var pattern=/^\d{15}$/;
                 //alert("长度为15！");
                 var result=pattern.test(value);
                 return result;
             }
             if(value.length==18){
                 var pattern=/^\d{18}|\d{17}[X|x]$/;
                 var result=pattern.test(value);
                 return result;
             }
             return false;
         });
     </script>
     <script type="text/javascript">
         /* $(document).ready(function(){
             alert("开始加载页面！");
         }); */
         $("#empForm").validate({
             //定义规则
             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:{
                 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:"身份证号码不合法！"
                 }
             }
         });
     </script>
 </body>
 </html>

validate_form.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>