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

140 阅读 0 评论 93 点赞

我是靠谱客的博主霸气大叔，最近开发中收集的这篇文章主要介绍基于jQuery的前端数据通用验证库，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

于是在之前的开发之中慢慢开始总结，也写了一些零散的方法想要比较简单的，写更少的代码来完成更多的验证。之前采用的思路是传递参数，将要验证的控件的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验证库了，但是我想自己写一个出来。再来一张截图吧，点击按钮时若未通过验证则弹出层提示哪个地方未通过验证，弹出层就是我之前自己写的仿人人网效果的弹出层效果。