jquery表单验证validate

jquery表单验证

下载地址和Demo 

http://jquery.bassistance.de/validate/jquery.validate.zip 首页： http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery validation 1.7 ---验证插件 需要:jQuery 1.3.2 或 1.4.2版本

 1 <script type="text/javascript">
 2 
 3 $().ready(function() {
 4 
 5     // validate signup form on keyup and submit
 6     /*
 7      * validate()方法：
 8      *         * 验证表单，实际上调用就是validate()方法
 9      *         * validate()方法传入一个json格式数据
10      *              *    rules：表单验证里的验证规则
11      *              *    key：对应的是页面中表单的name属性值
12      *              *    value：对应的验证规则
13      *                 * required：验证是否为空
14      *                 * minlength：验证最小长度
15      *                 * equalTo：对比指定标签的内容是否一致，"#id"
16      *                 * email：验证email地址是否正确
17      *             rules：{
18      *                 key:value
19      *             },
20      *              *     messages：表单验证里的错误提示信息
21      *              *    key：对应的是页面中表单的name属性值
22      *              *    value：错误提示信息
23      *             
24      *             messages:{
25      *                 key:value
26      *             }
27      */
28     $("#signupForm").validate({
29         rules: {
30             firstname: "required",
31             lastname: "required",
32             username: {
33                 required: true,        //验证规则起作用
34                 minlength: 5
35             },
36             password: {
37                 required: true,
38                 minlength: 5
39             },
40             confirm_password: {
41                 required: true,
42                 minlength: 5,
43                 equalTo: "#firstname"
44             },
45             email: {
46                 required: true,
47                 email: true
48             },
49             topic: {
50                 required: "#newsletter:checked",
51                 minlength: 2
52             },
53             agree: "required"
54         },
55         messages: {
56             firstname: "请输入你的姓",
57             lastname: "请输入你的名",
58             username: {
59                 required: "请输入用户名",
60                 minlength: "最小长度不能少于5个字"
61             },
62             password: {
63                 required: "Please provide a password",
64                 minlength: "Your password must be at least 5 characters long"
65             },
66             confirm_password: {
67                 required: "Please provide a password",
68                 minlength: "Your password must be at least 5 characters long",
69                 equalTo: "Please enter the same password as above"
70             },
71             email: "Please enter a valid email address",
72             agree: "Please accept our policy"
73         }
74     });
75 
76 });
77 </script>

表单验证方法

表单验证提示信息

调用jquery.validate({});方法进行验证

$("#empForm").validate({

　　* //自定义验证规则

　　* //自定义提示信息

})

自定义验证规则

自定义消息

jquery自定义校验规则

自定义校验规则可以通过自定义检验函数的方式新增加校验规则 步骤如下：

  1. 在定义校验规则之前定义一个新的方法 

  2. 在rules中指定某个域使用此校验规则 

  3. 在messages中指定这个域使用此校验规则没有通过的提示 信息

1. 在定义校验规则之前定义一个新的方法

2. 在rules中指定这个某个域使用此校验规则

3. 在messages中指定这个域使用此校验规则没有通过的提示信息

jquery表单验证案例

js部分

  1 <script type="text/javascript">
  2 /*********************************************************************************************************/    
  3     /*
  4      * 自定义验证方法
  5      * $.validator.addMethod(name,method,message);
  6      *         * $.validator.addMethod()是固定写法
  7      *         * name：添加的方法的名字
  8      *         * method：一个函数,function(value,element,param){}
  9      *             * value：对应页面中元素的value属性值
 10      *             * element：对应页面中的元素
 11      *             * param：参数
 12      *         * message：错误提示信息
 13      */
 14     $.validator.addMethod("cartLength",function(value,element,param){
 15         var len = value.length;
 16         
 17         if(len!=15&&len!=18){
 18             return false;
 19         }
 20         
 21         return true;
 22         
 23     });
 24     
 25     $.validator.addMethod("cartCheck",function(value,element,param){
 26         var len = value.length;
 27         
 28         var flag; 
 29         
 30         if(len==15){
 31             var pattern = /^[0-9]{15}$/;
 32             
 33             flag = pattern.test(value);
 34         }
 35         
 36         if(len==18){
 37             var pattern  = /^[0-9]{18}|[0-9]{17}x$/;
 38             
 39             flag = pattern.test(value);
 40         }
 41         
 42         if(!flag){
 43             return false;
 44         }
 45         
 46         return true;
 47         
 48         
 49     });
 50 
 51 /*********************************************************************************************************/    
 52     
 53     $().ready(function(){
 54         
 55         $("#empForm").validate({
 56             rules:{
 57                 realname:"required",
 58                 username:{
 59                     required:true,
 60                     rangelength:[5,8]
 61                 },
 62                 psw:{
 63                     required:true,
 64                     rangelength:[6,12]
 65                 },
 66                 psw2:{
 67                     required:true,
 68                     rangelength:[6,12],
 69                     equalTo:"#psw"
 70                 },
 71                 gender:"required",
 72                 age:{
 73                     required:true,
 74                     range:[26,50]
 75                 },
 76                 edu:"required",
 77                 birthday:{
 78                     required:true,
 79                     dateISO:"yyyy/MM/dd"
 80                 },
 81                 checkbox1:"required",
 82                 email:{
 83                     required:true,
 84                     email:"true"
 85                 },
 86                 cart:{
 87                     required:true,
 88                     cartLength:true,
 89                     cartCheck:true
 90                 }
 91             },
 92             messages:{
 93                 realname:"真是名称不能为空",
 94                 username:{
 95                     required:"登录名不能为空",
 96                     rangelength:"登录名的长度应该在5至8之间"
 97                 },
 98                 psw:{
 99                     required:"密码不能为空",
100                     rangelength:"密码的长度应该在6至12之间"
101                 },
102                 psw2:{
103                     required:"密码不能为空",
104                     rangelength:"密码的长度应该在6至12之间",
105                     equalTo:"两次密码输入不一致"
106                 },
107                 gender:"你没有第三种选择",        //如果在页面中设置其对应的label标签进行提示，在验证规则的信息提示中可以不设置相关内容
108                 age:{
109                     required:"年龄不能为空",
110                     range:"年龄必须在26至50之间"
111                 },
112                 edu:"至少要选择一个学历",
113                 birthday:{
114                     required:"出生日期不能为空",
115                     dateISO:"出生日期格式不正确"
116                 },
117                 email:{
118                     required:"email不能为空",
119                     email:"email地址的格式不正确"
120                 },
121                 cart:{
122                     required:"身份证号码不能为空",
123                     cartLength:"身份证号码长度不正确",
124                     cartCheck:"身份证号码的格式不正确"
125                 }
126             }
127         });
128         
129     });
130 
131 
132 </script>

HTML部分

  1 <p>员工信息录入</p>
  2 <form name="empForm" id="empForm" method="post" action="test.html">
  3         <table border=1>
  4             <tr>
  5                 <td>真实姓名(不能为空 ,没有其他要求)</td>
  6                 <td><input type="text" id="realname" name="realname" />
  7                 </td>
  8             </tr>
  9             <tr>
 10                 <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>
 11                 <td><input type="text" id="username" name="username" /></td>
 12             </tr>
 13              <tr> 
 14               <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
 15               <td><input type="password" id="psw"  name="psw" style="width:120px" /></td>
 16             </tr>
 17             <tr> 
 18               <td>重复密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>
 19               <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td>
 20             </tr>
 21             <!--
 22                                           默认错误提示信息，在放置在页面的表单中第一个控件后面
 23                 <label  style="display: none" for="gender" class="error">请选择性别</label>
 24                     * for：值对应的是页面表单中name属性的值
 25                     * class：设置样式，设置"error"样式
 26                     * style："display: none"，设置成隐藏
 27                 
 28                 * 在jquery表单验证框架运行时，原理如下：
 29                     * 首先，表单验证框架会在页面中查找对应的label标签
 30                         * 在页面中查找对应label标签，错误提示信息就提示页面中label标签内的文本信息
 31                         * 在页面中没有找到对应label标签，就通过验证框架底层创建一个label标签进行错误信息的提示
 32                 
 33                 
 34                 errorClass: "error",
 35                 validClass: "valid",
 36                 errorElement: "label",
 37                 
 38                 
 39                 label = $("<" + this.settings.errorElement + "/>")            //<label></label>
 40                     .attr({"for":  this.idOrName(element), generated: true})//<label for="gender"></label>
 41                     .addClass(this.settings.errorClass)                        //<label for="gender" class="error"></label>
 42                     .html(message || "");                                    //<label for="gender" class="error">错误提示信息</label>
 43                                       
 44             -->
 45             <tr>
 46                 <td>性别(必选其一)</td>
 47                 <td>
 48                     <input  type="radio" id="gender_male" value="m" name="gender"/>男
 49                     <input  type="radio" id="gender_female" value="f" name="gender"/>女
 50                     <label  style="display: none" for="gender" class="error">请选择性别</label>
 51                 </td>
 52             </tr>
 53             <tr>
 54                 <td>年龄(必填26-50):</td>
 55                 <td><input type="text" id="age" name="age" /></td>
 56             </tr>
 57             
 58             <tr> 
 59               <td>你的学历:</td>
 60               <td> <select name="edu" id="edu">
 61                       <option value="">－－请选择你的学历－－</option>
 62                       <option value="a">专科</option>
 63                       <option value="b">本科</option>
 64                       <option value="c">研究生</option>
 65                       <option value="e">硕士</option>
 66                       <option value="d">博士</option>
 67                   </select>
 68               </td>
 69             </tr>
 70             
 71             <tr> 
 72               <td>出生日期(1982/09/21):</td>
 73                <td><input type="text" id="birthday"  name="birthday" style="width:120px" value="" /></td>
 74             </tr>
 75             
 76            <tr> 
 77               <td>兴趣爱好:</td>
 78               <td colspan="2"> 
 79                   <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球 
 80                   <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球 
 81                   <input type="checkbox" name="checkbox1" id="qq3" value="2" />上网 
 82                   <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游 
 83                   <input type="checkbox" name="checkbox1" id="qq5" value="4" />购物 
 84                   <label  style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>
 85               </td>
 86             </tr>
 87              <tr> 
 88                   <td align="left">电子邮箱:</td>
 89                   <td><input type="text" id="email" style="width:120px" name="email" /></td>
 90               </tr>
 91               <tr> 
 92                   <td align="left">身份证(15-18):</td>
 93                   <td><input type="text" id="cart"  style="width:200px" name="cart" /></td>
 94               </tr>
 95             <tr>
 96                 <td></td>
 97                 <td></td>
 98                 <td><input type="submit"  name="firstname"  id="firstname" value="保存"></td>
 99             </tr>
100         </table>
101 
102 </form>

 

转载于:https://www.cnblogs.com/Abner5/p/5940013.html