基于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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
vue router demo详解
Oct 13 Javascript
fastadmin中调用js的方法
May 14 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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
谈谈新手如何学习PHP
2006/12/23 PHP
PHP开发框架总结收藏
2008/04/24 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
php DES加密算法实例分析
2019/09/18 PHP
编程语言JavaScript简介
2014/10/16 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
vue组件间通信解析
2017/03/01 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
Python查询IP地址归属完整代码
2017/06/21 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
Django异步任务线程池实现原理
2019/12/17 Python
python中提高pip install速度
2020/02/14 Python
python中有函数重载吗
2020/05/28 Python
keras导入weights方式
2020/06/12 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
三方协议书
2015/01/27 职场文书
2015年母亲节寄语
2015/03/23 职场文书
自考生自我评价
2019/06/21 职场文书
导游词之太湖
2019/10/08 职场文书