在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写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;" > |
03 |
< form id = "signupForm" method = "get" action = "" > |
05 |
< label for = "firstname" >用户名:</ label > |
06 |
< input id = "firstname" name = "firstname" type = "text" /> |
07 |
< span class = "red" >*</ span > |
10 |
< label for = "realname" >真实名:</ label > |
11 |
< input id = "realname" name = "realname" type = "text" /> |
14 |
< label for = "password" >密 码:</ label > |
15 |
< input id = "password" name = "password" type = "password" /> |
16 |
< span class = "red" >*</ span > |
19 |
< label for = "confirm_password" >确 认:</ label > |
20 |
< input id = "confirm_password" name = "confirm_password" type = "password" /> |
21 |
< span class = "red" >*</ span > |
24 |
< label for = "email" >邮 箱:</ label > |
25 |
< input id = "email" name = "email" type = "text" /> |
26 |
< span class = "red" >*</ span > |
29 |
< label for = "tel" >电 话:</ label > |
30 |
< input id = "tel" name = "tel" type = "text" /> |
33 |
< label for = "address" >地 址:</ label > |
34 |
< input id = "address" name = "address" type = "text" /> |
37 |
< label for = "idcard" >证件号:</ label > |
38 |
< input id = "idcard" name = "idcard" type = "text" /> |
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 > |
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" />保密 |
60 |
< input id = "read" name = "read" type = "checkbox" />< label for = "read" >同意相关条约</ label > |
63 |
< input class = "submit" type = "submit" value = "Register" /> |
4、表单初始化样式
3 |
input{ height : 22px ; padding : 2px ;} |
5、验证代码
01 |
$(document).ready( function () { |
04 |
$.validator.setDefaults({ |
05 |
submitHandler: function (form) { |
11 |
$( "#signupForm" ).validate({ |
16 |
byteRangeLength:[4,15] |
39 |
byteRangeLength:[4,100] |
56 |
stringCheck: "请正确输入您的联系地址" , |
57 |
byteRangeLength: "请详实您的联系地址以便于我们联系您" |
69 |
errorPlacement: function (error, element) { |
70 |
if (element.is( ':radio' ) || element.is( ':checkbox' )) { |
71 |
var eid = element.attr( 'name' ); |
72 |
error.appendTo(element.parent()); |
74 |
error.appendTo(element.closest( "p" )); |
82 |
e.html( " " ).addClass( "valid" ).text( 'ok' ); |
到这里表单验证功能就初步完成了,可以试着预览一下效果,点击按钮提交你肯定发现不会进行验证,因为在验证中使用了一些自定义的方法,所以验证失效,那么继续读下去吧,接下来是实现验证的提示信息的个性化和自定义验证方法。
6、我们可以知道validate默认的提示信息是英文的,我们可以编写一个jquery.validate.message_cn.js文件来改变它的提示内容并让提示内容显示成中文的:
05 |
email: "请输入正确格式的电子邮件" , |
08 |
dateISO: "请输入合法的日期 (ISO)." , |
11 |
creditcard: "请输入合法的信用卡号" , |
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} 的值" ), |
22 |
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线" , |
23 |
byteRangeLength: "用户名必须在4-15个字符之间(一个中文字算2个字符)" , |
24 |
isIdCardNo: "请正确输入您的身份证号码" , |
26 |
jQuery.extend(jQuery.validator.messages, cnmsg); |
可以看到此文件中有一个自定义验证方法的提示信息,这些验证方法也是让之前预览没有验证效果的原凶哦,validate插件提供自定义验证方法,继续完善 jquery.validate.message_cn.js(自定义验证方法来源于网络) 文件:
02 |
jQuery.validator.addMethod( "stringCheck" , function (value, element) { |
03 |
return this .optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); |
04 |
}, "只能包括中文字、英文字母、数字和下划线" ); |
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){ |
14 |
return this .optional(element) || ( length >= param[0] && length <= param[1] ); |
15 |
}, "请确保输入的值在4-15个字节之间(一个中文字算2个字节)" ); |
18 |
jQuery.validator.addMethod( "isIdCardNo" , function (value, element) { |
19 |
return this .optional(element) || isIdCardNo(value); |
25 |
function isIdCardNo(num) { |
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(); |
33 |
var intStrLen = num.length; |
36 |
if ((intStrLen != 15) && (intStrLen != 18)) { |
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)) { |
45 |
varArray[i] = varArray[i] * factorArr[i]; |
49 |
if (intStrLen == 18) { |
51 |
var date8 = idNumber.substring(6,14); |
52 |
if (isDate8(date8) == false ) { |
55 |
// calculate the sum of the products |
57 |
lngProduct = lngProduct + varArray[i]; |
59 |
// calculate the check digit |
60 |
intCheckDigit = parityBit[lngProduct % 11]; |
62 |
if (varArray[17] != intCheckDigit) { |
68 |
var date6 = idNumber.substring(6,12); |
69 |
if (isDate6(date6) == false ) { |
在文件中导入jquery.validate.message_cn.js文件
1 |
< script src = "test/jquery.validate.message_cn.js" type = "text/javascript" ></ script > |
到这里表单的验证功能就做好了,现在预览的效果应该是这样的:
如果没是这样的效果那要好好看看是不是漏了哪一步呢?还有最后一步就是编写验证样式来实现个性化验证,那个正确('√')和错误('×')的提示是背景图片,我们可以从网上找到自己中意的小图标就行了,验证样式为:
07 |
input.error { border : 1px dashed red ; background :yellow; padding : 2px ; } |
08 |
select.error { border : 1px dashed red ; background :yellow; padding : 2px ; } |
14 |
background : url (unchecked.gif) no-repeat 0px 0px ; |
15 |
font-family : Verdana , Geneva, sans-serif ; |
19 |
input.valid{ background : #FFC ; border : #09F solid 1px ; padding : 2px ;} |
20 |
select.valid{ background : #FFC ; border : #09F solid 1px ; padding : 2px ;} |
25 |
background : url (checked.gif) no-repeat 0px 0px ; |
26 |
font-family : Verdana , Geneva, sans-serif ; |
当然这个只是我这个效果的样式,表单和验证样式都可以根据自己的喜好来设置。这些都做完之后再次预览就应该是文中开头那个的效果图片了。
记录只是方便以后查阅,若有不足和建议欢迎留言。
最新文章
- failed to load the jni shared library jvm
- Pyhton 学习总结 21 :fileinput模块
- RocketMQ消费者示例程序
- ARP缓存表的构成ARP协议全面实战协议详解、攻击与防御
- log4j配置webapp日志系统
- sbrk and coreleft
- 过程化开发2048智力游戏WebApp
- QT下的几种透明效果(三种方法:调色板,透明度属性,自绘)
- 浅谈C语言中的强符号、弱符号、强引用和弱引用
- Nginx教程(二) Nginx虚拟主机配置
- idea使用转载【别人的专栏】
- NOIP 2017 day 1 游记
- 【Python 07】汇率兑换1.0-2(基本元素)
- c++中的auto、const auto&;
- IIS7发布asp.net mvc提示404.0
- hive 语法 case when 语法
- [20180122]列统计与直方图.txt
- 【loj3043】【zjoi2019】线段树
- 12.18daily_scrum
- C++:派生类的构造函数和析构函数的调用顺序
热门文章
- 字符串处理——strpos()函数
- sql 批处理、获取自增长、事务、大文本处理
- 信号量 sem_t 进程同步
- zend framework 1 连接oracle数据库的写法
- poj 2777Count Color
- SlidingMenu和ActionBarSherlock结合滑动式菜单都
- POJ1860 Currency Exchange(最短路)
- FFT多项式乘法加速
- jps(JVM Process Status)
- js编写验证码