在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交，我们可以通过自己编写JavasScript代码来验证，但是有时数据量过多时就会有些难度了。基于jQuery的jquery.validate验证框架帮我们解决了困难，我们可以通过它迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，而且对国际化也有非常好的支持。
今天记录的就是用此插件来实现表单验证，效果图：
1、获取JS文件：http://jqueryvalidation.org/，这个插件的用法就不再多讲了，如不熟悉或者还没用过的可以通过官网了解也可以搜索jquery validate中文API，此文仅仅记录如何实现上图效果。
2、导入JS
1 |
<script src="test/jquery.js" type="text/javascript"></script>
|
2 |
<script src="test/jquery.validate.js" type="text/javascript"></script>
|
3、创建表单
01 |
<fieldset style="width:700px; margin:0 auto;">
|
02 |
<legend>用户注册</legend>
|
03 |
<form id="signupForm" method="get" action="">
|
04 |
<p>
|
05 |
<label for="firstname">用户名：</label>
|
06 |
<input id="firstname" name="firstname" type="text" />
|
07 |
<span class="red">*</span>
|
08 |
</p>
|
09 |
<p>
|
10 |
<label for="realname">真实名：</label>
|
11 |
<input id="realname" name="realname" type="text" />
|
12 |
</p>
|
13 |
<p>
|
14 |
<label for="password">密 码：</label>
|
15 |
<input id="password" name="password" type="password" />
|
16 |
<span class="red">*</span>
|
17 |
</p>
|
18 |
<p>
|
19 |
<label for="confirm_password">确 认：</label>
|
20 |
<input id="confirm_password" name="confirm_password" type="password" />
|
21 |
<span class="red">*</span>
|
22 |
</p>
|
23 |
<p>
|
24 |
<label for="email">邮 箱：</label>
|
25 |
<input id="email" name="email" type="text" />
|
26 |
<span class="red">*</span>
|
27 |
</p>
|
28 |
<p>
|
29 |
<label for="tel">电 话：</label>
|
30 |
<input id="tel" name="tel" type="text" />
|
31 |
</p>
|
32 |
<p>
|
33 |
<label for="address">地 址：</label>
|
34 |
<input id="address" name="address" type="text" />
|
35 |
</p>
|
36 |
<p>
|
37 |
<label for="idcard">证件号：</label>
|
38 |
<input id="idcard" name="idcard" type="text" />
|
39 |
</p>
|
40 |
<p>
|
41 |
<label for="degree">学 历：</label>
|
42 |
<select id="degree" name="degree">
|
43 |
<option value="-1">请选择</option>
|
44 |
<option value="1">小学</option>
|
45 |
<option value="2">中学</option>
|
46 |
<option value="3">大专</option>
|
47 |
<option value="4">本科</option>
|
48 |
<option value="5">学士</option>
|
49 |
<option value="6">硕士</option>
|
50 |
<option value="7">博士</option>
|
51 |
</select>
|
52 |
</p>
|
53 |
<p>
|
54 |
<label for="sex">性 别：</label>
|
55 |
<input type="radio" id="rdoFemale" name="sex" />男
|
56 |
<input type="radio" id="rdoMale" name="sex" />女
|
57 |
<input type="radio" id="rdoSecret" name="sex" />保密
|
58 |
</p>
|
59 |
<p>
|
60 |
<input id="read" name="read" type="checkbox" /><label for="read">同意相关条约</label>
|
61 |
</p>
|
62 |
<p>
|
63 |
<input class="submit" type="submit" value="Register"/>
|
64 |
</p>
|
65 |
</form>
|
66 |
</fieldset>
|
4、表单初始化样式
1 |
.red{ color:red;}
|
2 |
.submit{ width:80px;}
|
3 |
input{height:22px; padding:2px;}
|
5、验证代码
01 |
$(document).ready(function() {
|
02 |
|
03 |
//设置默认属性
|
04 |
$.validator.setDefaults({
|
05 |
submitHandler: function(form) {
|
06 |
form.submit();
|
07 |
}
|
08 |
}),
|
09 |
|
10 |
//开始验证
|
11 |
$("#signupForm").validate({
|
12 |
rules: {
|
13 |
firstname: {
|
14 |
required: true,
|
15 |
stringCheck:true,
|
16 |
byteRangeLength:[4,15]
|
17 |
},
|
18 |
realname: {
|
19 |
minlength:5
|
20 |
},
|
21 |
password: {
|
22 |
required: true,
|
23 |
minlength: 5
|
24 |
},
|
25 |
confirm_password: {
|
26 |
required: true,
|
27 |
minlength: 5,
|
28 |
equalTo: "#password"
|
29 |
},
|
30 |
email: {
|
31 |
required: true,
|
32 |
email: true
|
33 |
},
|
34 |
tel: {
|
35 |
isMobile: true
|
36 |
},
|
37 |
address: {
|
38 |
stringCheck:true,
|
39 |
byteRangeLength:[4,100]
|
40 |
},
|
41 |
read: {
|
42 |
required:true
|
43 |
},
|
44 |
degree: {
|
45 |
required:true,
|
46 |
min:0
|
47 |
},
|
48 |
idcard: {
|
49 |
required:true,
|
50 |
isIdCardNo:true
|
51 |
}
|
52 |
},
|
53 |
//设置提示信息
|
54 |
messages:{
|
55 |
address:{
|
56 |
stringCheck: "请正确输入您的联系地址",
|
57 |
byteRangeLength: "请详实您的联系地址以便于我们联系您"
|
58 |
},
|
59 |
read:{
|
60 |
required:"请先阅读注册条约"
|
61 |
},
|
62 |
degree:{
|
63 |
min:"请选择学历"
|
64 |
}
|
65 |
},
|
66 |
//设置错误信息存放标签
|
67 |
errorElement: "em",
|
68 |
//指定错误信息位置
|
69 |
errorPlacement: function (error, element) {
|
70 |
if (element.is(‘:radio‘) || element.is(‘:checkbox‘)) {
|
71 |
var eid = element.attr(‘name‘);
|
72 |
error.appendTo(element.parent());
|
73 |
} else {
|
74 |
error.appendTo(element.closest("p"));
|
75 |
}
|
76 |
},
|
77 |
//设置验证触发事件
|
78 |
focusInvalid: true,
|
79 |
//设置验证成功提示格式
|
80 |
success:function(e)
|
81 |
{
|
82 |
e.html(" ").addClass("valid").text(‘ok‘);
|
83 |
}
|
84 |
})
|
85 |
}); |
到这里表单验证功能就初步完成了，可以试着预览一下效果，点击按钮提交你肯定发现不会进行验证，因为在验证中使用了一些自定义的方法，所以验证失效，那么继续读下去吧，接下来是实现验证的提示信息的个性化和自定义验证方法。
6、我们可以知道validate默认的提示信息是英文的，我们可以编写一个jquery.validate.message_cn.js文件来改变它的提示内容并让提示内容显示成中文的：
01 |
//定义中文消息 |
02 |
var cnmsg = {
|
03 |
required: "必需填写项",
|
04 |
remote: "请修正该字段",
|
05 |
email: "请输入正确格式的电子邮件",
|
06 |
url: "请输入合法的网址",
|
07 |
date: "请输入合法的日期",
|
08 |
dateISO: "请输入合法的日期 (ISO).",
|
09 |
number: "请输入合法的数字",
|
10 |
digits: "只能输入整数",
|
11 |
creditcard: "请输入合法的信用卡号",
|
12 |
equalTo: "请再次输入相同的值",
|
13 |
accept: "请输入拥有合法后缀名的字符串",
|
14 |
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
|
15 |
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
|
16 |
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
|
17 |
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
|
18 |
max: jQuery.format("请输入一个最大为 {0} 的值"),
|
19 |
min: jQuery.format("请输入一个最小为 {0} 的值"),
|
20 |
|
21 |
//自定义验证方法的提示信息
|
22 |
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
|
23 |
byteRangeLength: "用户名必须在4-15个字符之间(一个中文字算2个字符)",
|
24 |
isIdCardNo: "请正确输入您的身份证号码",
|
25 |
}; |
26 |
jQuery.extend(jQuery.validator.messages, cnmsg); |
可以看到此文件中有一个自定义验证方法的提示信息，这些验证方法也是让之前预览没有验证效果的原凶哦，validate插件提供自定义验证方法，继续完善 jquery.validate.message_cn.js(自定义验证方法来源于网络) 文件：
01 |
// 字符验证 |
02 |
jQuery.validator.addMethod("stringCheck", function(value, element) {
|
03 |
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
|
04 |
}, "只能包括中文字、英文字母、数字和下划线");
|
05 |
06 |
// 中文字两个字节 |
07 |
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
|
08 |
var length = value.length;
|
09 |
for(var i = 0; i < value.length; i++){
|
10 |
if(value.charCodeAt(i) > 127){
|
11 |
length++;
|
12 |
}
|
13 |
}
|
14 |
return this.optional(element) || ( length >= param[0] && length <= param[1] );
|
15 |
}, "请确保输入的值在4-15个字节之间(一个中文字算2个字节)");
|
16 |
17 |
// 身份证号码验证 |
18 |
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
|
19 |
return this.optional(element) || isIdCardNo(value);
|
20 |
}, "请正确输入您的身份证号码");
|
21 |
22 |
/** |
23 |
* 身份证号码验证
|
24 |
*/ |
25 |
function isIdCardNo(num) {
|
26 |
|
27 |
var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
|
28 |
var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2");
|
29 |
var varArray = new Array();
|
30 |
var intValue;
|
31 |
var lngProduct = 0;
|
32 |
var intCheckDigit;
|
33 |
var intStrLen = num.length;
|
34 |
var idNumber = num;
|
35 |
// initialize
|
36 |
if ((intStrLen != 15) && (intStrLen != 18)) {
|
37 |
return false;
|
38 |
}
|
39 |
// check and set value
|
40 |
for(i=0;i<intStrLen;i++) {
|
41 |
varArray[i] = idNumber.charAt(i);
|
42 |
if ((varArray[i] < ‘0‘ || varArray[i] > ‘9‘) && (i != 17)) {
|
43 |
return false;
|
44 |
} else if (i < 17) {
|
45 |
varArray[i] = varArray[i] * factorArr[i];
|
46 |
}
|
47 |
}
|
48 |
|
49 |
if (intStrLen == 18) {
|
50 |
//check date
|
51 |
var date8 = idNumber.substring(6,14);
|
52 |
if (isDate8(date8) == false) {
|
53 |
return false;
|
54 |
}
|
55 |
// calculate the sum of the products
|
56 |
for(i=0;i<17;i++) {
|
57 |
lngProduct = lngProduct + varArray[i];
|
58 |
}
|
59 |
// calculate the check digit
|
60 |
intCheckDigit = parityBit[lngProduct % 11];
|
61 |
// check last digit
|
62 |
if (varArray[17] != intCheckDigit) {
|
63 |
return false;
|
64 |
}
|
65 |
}
|
66 |
else{ //length is 15
|
67 |
//check date
|
68 |
var date6 = idNumber.substring(6,12);
|
69 |
if (isDate6(date6) == false) {
|
70 |
return false;
|
71 |
}
|
72 |
}
|
73 |
return true;
|
74 |
}
|
在文件中导入jquery.validate.message_cn.js文件
1 |
<script src="test/jquery.validate.message_cn.js" type="text/javascript"></script>
|
到这里表单的验证功能就做好了，现在预览的效果应该是这样的：
如果没是这样的效果那要好好看看是不是漏了哪一步呢？还有最后一步就是编写验证样式来实现个性化验证，那个正确（‘√‘）和错误（‘ב）的提示是背景图片，我们可以从网上找到自己中意的小图标就行了，验证样式为：
01 |
/** |
02 |
* @DO 校验的样式文件
|
03 |
* @DATE 2012-01-19
|
04 |
* @AUTHOR Frylan
|
05 |
*/
|
06 |
/*错误样式*/
|
07 |
input.error { border: 1px dashed red;background:yellow; padding:2px; }
|
08 |
select.error { border: 1px dashed red; background:yellow; padding:2px; }
|
09 |
.error { |
10 |
padding-left: 16px;
|
11 |
margin-left: 2px;
|
12 |
color:red;
|
13 |
/*背景图片（校验未通过的’×’图标）*/
|
14 |
background: url(unchecked.gif) no-repeat 0px 0px;
|
15 |
font-family:Verdana, Geneva, sans-serif;
|
16 |
font-size:11px;
|
17 |
} |
18 |
/*验证通过样式*/ |
19 |
input.valid{ background:#FFC; border:#09F solid 1px; padding:2px;}
|
20 |
select.valid{ background:#FFC; border:#09F solid 1px; padding:2px;}
|
21 |
.valid { |
22 |
padding-left: 16px;
|
23 |
margin-left: 2px;
|
24 |
/*背景图片(校验通过的’√’图标)*/
|
25 |
background: url(checked.gif) no-repeat 0px 0px;
|
26 |
font-family:Verdana, Geneva, sans-serif;
|
27 |
color:#00F;
|
28 |
font-size:11px;
|
29 |
} |
当然这个只是我这个效果的样式，表单和验证样式都可以根据自己的喜好来设置。这些都做完之后再次预览就应该是文中开头那个的效果图片了。
记录只是方便以后查阅，若有不足和建议欢迎留言。