基于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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
js自制图片放大镜功能
Jan 24 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
Swiper实现导航栏滚动效果
Oct 16 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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python openpyxl使用方法详解
2019/07/18 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python字符串判断密码强弱
2020/03/18 Python
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
元旦活动感言
2014/03/08 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
党组织结对共建协议书
2016/03/23 职场文书
导游词之上海豫园
2019/10/24 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
Python中的pprint模块
2021/11/27 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js