基于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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
vue实现移动端返回顶部
Oct 12 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php命令行用法入门实例教程
2014/10/27 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php mysql操作mysql_connect连接数据库实例详解
2016/12/26 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
jquery中动态效果小结
2010/12/16 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python数据可视化图实现过程详解
2020/06/12 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
英语自我介绍演讲稿
2014/09/01 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python