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