jQuery前端数据通用验证库,解放你的双手

时间:2023-03-08 22:27:48

这个简易的验证库,应该能完成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">
邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:<input type="text" id="email" name="email"
validata="email" errormsg="邮箱格式不正确" emptyerrormsg="邮箱不能为空" empty="false" /><br /> 手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机:<input type="text" name="phone" validata="phone"
errormsg="手机格式不正确" emptyerrormsg="手机不能为空" empty="true" /><br /> 电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话:<input type="text" name="tel" validata="tel"
errormsg="电话格式不正确" emptyerrormsg="电话不能为空" empty="true" /><br /> 身&nbsp;&nbsp;份&nbsp;证:<input type="text" name="idcard" validata="idcard" errormsg="身份证格式不正确"
emptyerrormsg="身份证不能为空" empty="false" /><br /> 密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<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]";
}
}