基于jQuery的前端数据通用验证库


Posted in Javascript onAugust 08, 2011

于是在之前的开发之中慢慢开始总结,也写了一些零散的方法想要比较简单的,写更少的代码来完成更多的验证。之前采用的思路是传递参数,将要验证的控件的ID传进去,若是要验证数据格式再传入相应的正则表达式进去。项目结束之后,再对整个项目做总结的时候发现,这种写法也并没有节省多少代码量,而且很多地方因为同学反应说我写的那个库并不是很好用,虽然有说明,但他们也还是不能很好的理解,不能很快就上手,而且应该还是有不少BUG,所以很多地方他们还是宁愿用那种对每个控件去一一验证的方式,一个JS文件中光验证的部分就得两三百行的代码,而且都比较懒,对于注释是能少写一句是一句,以致于出了问题之后维护起来也很麻烦,JS调试也还没有一个很方便的工具。
最近也是在外出差,空闲的时候我就在想,能不能在之前的基础上封装更多一点,然后调用更方便呢,最好是调用的时候不要再写JS代码最好。想起jQuery强大的选择器,以及之前做验证的时候或者需要从页面取值的时候经常给页面元素加上了一些自定义的属性。于是乎,想做验证的时候只需要给元素加上几个自定义的属性,调用JS代码就行,这样应该是最简单的了吧。
这个简易的验证库,应该能完成90%的基本验证,包括失去焦点时的验证,以及点击提交按钮时的验证。后端的那我就无能为办了,只能是谁用就谁自个儿去写了:)。
先上一段调用的代码吧,JS代码说少也不少了,就不直接贴出来了,文章后面上附件,还包括一个我之前自己写的一个仿人人网的插件的JS文件。

<script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="Js/ks.ext.msgbox.js" type="text/javascript"></script> 
<script src="Js/validata.js" type="text/javascript"></script> 
<form name="form1" id="form1" action="#" method="post"> 
邮      箱:<input type="text" id="email" name="email" 
validata="email" errormsg="邮箱格式不正确" emptyerrormsg="邮箱不能为空" empty="false" /><br /> 
手      机:<input type="text" name="phone" validata="phone" 
errormsg="手机格式不正确" emptyerrormsg="手机不能为空" empty="true" /><br /> 
电      话:<input type="text" name="tel" validata="tel" 
errormsg="电话格式不正确" emptyerrormsg="电话不能为空" empty="true" /><br /> 
身  份 证:<input type="text" name="idcard" validata="idcard" errormsg="身份证格式不正确" 
emptyerrormsg="身份证不能为空" empty="false" /><br /> 
密      码:<input type="password" name="pwd" validata="empty" 
empty="false" emptyerrormsg="密码不能为空" /><br /> 
确认密码:<input type="password" name="pwd1" validata="password2" errormsg="确认密码不能为空" 
diffmsg="两次密码输入不一致" /><br /> 
<input type="submit" id="submit1" value="Submit" /> 
</form>

比如验证邮箱:
有时候邮箱我们是允许为空的,但是一旦输入了邮箱就要求邮箱是合法的。如果允许为空就给empty赋值为true,那么验证库将不对其做非空验证。若为false或者empty属性不加默认就为是不允许为空的。 不允许为空得加上一个emptyErrorMsg的属性,用来显示为空时的错误信息,若这个属性缺少或者值为空那么显示的就是一个红色"*",若不为空就显示这个属性的值。然后就是对格式的验证,是要对邮箱验证,validata的值就是email,若不合法时就显示另外一个自定义属性errorMsg的值,errorMsg若缺少或者为空显示错误信息也为红色"*".
validata的值还是不能完全自定义的,已经在JS中自定好了。就是根据validata的值来返回不同的正则表达式。方法如下,然后可选的validata的值就是下列方法的regName的值。用户若要据展直接再加上其他表达式就可以了。
//根据不同的验证内容,返回相应的正则表达式 
function returnRegString(regName) { 
if (regName == "email") { 
return "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"; //邮箱 
} else if (regName == "tel") { 
return "^(86)?(-)?(0[0-9]{2,3})?(-)?([0-9]{7,8})(-)?([0-9]{3,5})?$"; //电话 
} else if (regName == "phone") { 
return "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; //手机 
} else if (regName == "postcode") { 
return "^([0-9]{6})$"; //邮编 
} else if (regName == "number") { 
return "^(0|([1-9]+[0-9]*))(.[0-9]+)?$"; //数字 
} else if (regName == "decimal") { 
return "^[0-9]+([.][0-9]+)?$"; //浮点 
} else if (regName == "money") { 
return "^([0-9])$"; //货币 
} else if (regName == "website") { //网址 
return "(http://|https://){0,1}[\w\/\.\?\&\=]+"; 
} else if (regName == "fax") { //传真 
return "^[+]{0,1}([0-9]){1,3}[ ]?([-]?(([0-9])|[ ]){1,12})+$"; 
} else if (regName == "int") { //整数 
return "^(-){0,1}\d+$"; 
} else if (regName == "pInt") { //正整数 
return "^\d+$"; 
} else if (regName == "nInt") { //负整数 
return "^-\d+$"; 
} else if (regName == "nandl") { //数字与字母 
return "[a-zA-Z0-9]"; 
} else if (regName == "chinese") { //是否含有中文字符 
return "[\u4e00-\u9fa5]"; 
} 
}

废话不多说了,该验证库也还没有很完整的测试,各位大牛们若是有兴趣试用一下,发现什么问题或者其他更好的改进方法一定请告诉小弟。虽然肯定有现成的而且比较成熟的JS验证库了,但是我想自己写一个出来。再来一张截图吧,点击按钮时若未通过验证则弹出层提示哪个地方未通过验证,弹出层就是我之前自己写的仿人人网效果的弹出层效果。
Javascript 相关文章推荐
jquery异步请求实例代码
Jun 21 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
javascript数据类型示例分享
Jan 19 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
JS基础之undefined与null的区别分析
Aug 08 #Javascript
jQuery的12招常用技巧分享
Aug 08 #Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 #Javascript
jquery动态加载图片数据练习代码
Aug 04 #Javascript
jquery里的正则表达式说明
Aug 03 #Javascript
基于jQuery的图片剪切插件
Aug 03 #Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php实现建立多层级目录的方法
2014/07/19 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
python私有属性和方法实例分析
2015/01/15 Python
Python使用Flask框架同时上传多个文件的方法
2015/03/21 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
浅析Python四种数据类型
2018/09/26 Python
python八皇后问题的解决方法
2018/09/27 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
Python extract及contains方法代码实例
2020/09/11 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
新员工入职感言
2014/02/01 职场文书
质量整改报告范文
2014/11/08 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python