jQuery 表单检验插件 ez validator v1.1

作者：　月影   2009年3月于北京

前 言

你，像一阵春风

不经意吹过我的心田

带来了春的信息

你，像一场细雨

在我心灵干枯的时候降临

无声地滋润着我的心田

于是，我心中充满了感激的心情。

感谢你　我的朋友　　

自从2008年接触了jQuery后, 就被它的简洁通俗强大的用法所折服, jQuery的作者将很棘手的一些问题, 用更接近自然思维的方式解决, 在B/S开发中, 实在是一个相当优秀的JavaScript框架。

在B/S开发中，遇到复杂的表单，难免会使用到客户端的JavaScript验证，我也曾经在网络上找到jQuery Validation Plugins , 但是很快发现，它有几个问题：

１.你必须为每个表单重定义一个验证规则，得写一大堆JavaScript代码来实现你的验证，　如果你的系统表单非常多，　那么要写的JavaScript代码就非常多了，实在是一件重复劳动。

２.对于不太懂JavaScript的前台美工，是无法使用的（因为要写大量JavaScript代码）

针对以上问题，　参照“我是佛山人”的验证原理，在2008年为phpcms2008 ( www.Ku6.com ) 编写新一代轻量级(LightHeight)的客户端验证框架时，着重解决了验证复杂度，并将其打包成jQuery的一个插件。现在，对于即使不懂JavaScript的前台美工，也可以在不编写JavaScript逻辑代码的情况下，实现强大的验证效果。结果投入使用后，　均达到了非常好的效果，在此对“我是佛山人”表示感谢　！

其中Ajax验证由恐龙蛋编写，特此声明，不敢独揽功劳。

１.前台美工人员不需要编写JavaScript代码，　只要按约定手册给表单元素设置好相关属性，即可实现自动验证，如:
<script src="jquery.js"></script>
<script src="jquery.validator.js"></script>
<form id="myform">

<input type="text" require="true" datatype="require" msg="不能为空" />

</form>

<script> $('#myform').checkForm(); </script>

如此，即可实现验证效果了，当文本框失败焦点(onblur)的时候，如果文本框为空，则会在其其后提示“不能为空”。

2.目前支持以下条件验证：

不能为空 require

电子邮件地址 email

电话号码（支持分机号） phone

手机号码 mobile

url地址 url

身份证号码 idCard

货币 currency

正整数 number

邮编   zip

IP地址 ip

QQ号码（新版的QQ帐号可使用Email,建议使用正则自定义验证） qq

正负整数  integer

小数 double

英文字母 english

纯汉字 chinese

用户名(数字及字母组合的字符串)  userName

安全字符串（不能包含 ! # < > ? * $ + - =@ % . * { } ( ) | \ / ~ ^等字符的串） isSafe

输入长度限制（即输入长度必须在一定范围内）    limit / limitB

日期 date

密码重复匹配 repeat

整数或小数值必须在一定范围内（比如年龄必须在18至60岁之间） range

数值比较　（比如年龄必须大于18, 但没有上限 / 至多购买100件等等，不能为0,必须为1等等，相当于只有一边范围的） compare

复选框必须选中m到n个   group

下拉框必须选中       compare/require

Ajax服务器端检验    ajax

自定义正则表达式     custom

多条件组合验证       require|limit

何为组合验证？　组合验证即为普通验证规则的叠加，只有全部满足所有的各个规则，验证方可通过 如

<input type="text" name="username"  require="true" datatype="limit|english|ajax" min="3" max="8" msg="用户名应该在3到8位|必须为英文字母|用户名已经被占用"  url="./ajax.php"/>

上面的意思是：必须为3到8位，且为英文字母，并且要通过服务器ajax检验。注意，msg与datatype均用竖线分隔，即表示了每个验证规则失败后的相应的提示信息。那么，如果上面的msg="请使用其它用户名", 那么无论何种验证失败，均提示“请使用其它用户名”。

在实际情况中，请灵活运行组合验证，会达到意想不到的效果的！

3 . 兼容IE6/IE7/FireFox/Safari/Opera主流浏览器

所有源文件及演示以及PDF手册，都在附件中，请下载使用

ez_validator1.1.rar (370.18 KB)

下载次数:637

2009-4-6 14:41

作者: xuer   发布时间: 2009-04-06

作者: laopi   发布时间: 2009-04-06

作者: mailangel123   发布时间: 2009-04-07

作者: hydata   发布时间: 2009-04-08

作者: yangfan5   发布时间: 2009-04-08

作者: forweike   发布时间: 2009-04-09

作者: hxhui08   发布时间: 2009-04-10

作者: chen_pei   发布时间: 2009-04-13

作者: flyboyxiang   发布时间: 2009-04-13

作者: kakashilw   发布时间: 2009-04-13

作者: wanchun0222   发布时间: 2009-04-14

作者: xuer   发布时间: 2009-04-17

作者: iminto   发布时间: 2009-04-17

作者: mark3536   发布时间: 2009-04-19

作者: chen_pei   发布时间: 2009-04-19

作者: ue214   发布时间: 2009-04-19

作者: 草名   发布时间: 2009-04-20

作者: fjch1986   发布时间: 2009-04-24

作者: xmjlgh   发布时间: 2009-05-10

作者: mark3536   发布时间: 2009-05-11

作者: claymore   发布时间: 2009-05-11

作者: avochen   发布时间: 2009-05-11

作者: avochen   发布时间: 2009-05-11

作者: xmjlgh   发布时间: 2009-05-11

作者: xuer   发布时间: 2009-05-11

作者: xmjlgh   发布时间: 2009-05-11

作者: xmjlgh   发布时间: 2009-05-11

本帖最后由 diekiss 于 2009-6-22 10:16 编辑

不错，不过还得改一改，增加提交表单时统一提示错误信息的模式，就像“我佛山人”的validator 1.0x一样。
因为有些应用，表单设计得比较紧凑，不一定有位置显示错误信息的。

这是我修改的，
将checkForm改为 checkForm_alert 即可实现以上功能。
但是楼主的 doajax 部分包含了直接输出的代码，要使用ajax功能，要使用 dataType="ajax_alert"。
望楼主指点，谢谢！

jquery.validator.js (14.33 KB)

下载次数:2

2009-6-22 10:03

作者: diekiss   发布时间: 2009-06-21

作者: zzguo28   发布时间: 2009-06-22

作者: scotoma   发布时间: 2009-06-23

作者: scotoma   发布时间: 2009-06-23

作者: piaohh   发布时间: 2009-06-23

作者: diekiss   发布时间: 2009-06-23

作者: scotoma   发布时间: 2009-06-24

作者: scotoma   发布时间: 2009-10-12

作者: fejay   发布时间: 2009-10-15

作者: jixian   发布时间: 2009-11-28

<input type="text" name="idcard" require="true" datatype="idCard" msg="请填写有效的身份证号码" />

作者: xmjlgh   发布时间: 2010-01-13

作者: lt_124   发布时间: 2010-01-14

作者: cdma711   发布时间: 2010-07-16