JQuery表单验证插件EasyValidator,超级简单易用!

作者 写道

本插件的宗旨是：用户无需写一行JS验证代码，只需在要验证的表单中加入相应的验证属性即可，让验证功能易维护，可扩展，更容易上手。

DEMO中已经包含了常用的正则表达式，可以直接复用，为了考虑扩展性，所以针对不同用户特殊需求，自行写正则吧。

EasyValidator实现的功能：

 

1.提示功能（在表单或者其他标签中加入tip="想提示的文字"）

     如：

    <input name="name" tip="请输入你的名字哟~">

    或者

    <a href="http://wangking717.iteye.com/blog/769021" tip="到EasyValidator官方主页来" target="_blank">有疑惑可以到这里提问</a>

2. 普通表单验证（在表单中加入reg="正则表达式"）
    如： <input name="username" reg="正则" />
    普通表单验证DEMO：http://easyvalidator.coding.io/

3. AJAX表单验证（在表单中加入url="验证系统地址"）
    如： <input name="username" url="地址" />
    AJAX验证DEMO：没有在线演示，请在本地运行ajax_demo.html，请求远程的PHP文件，当然可以为JSP或者ASP，我这里在程序里预设了一些已存在的数据，用户可以自行参考。

4. 普通表单验证 +  AJAX表单验证 （普通验证通过以后，再进行AJAX验证）
    如： <input name="username" reg="正则" url="地址" />

5. 扩展函数表单验证（某些业务特殊需求）：
    这些特殊需求都是根据业务来的，这里列举一下这样的情况：
    1.checkbox选择框数量验证，如限制别人至少选择1个，最多选择5个checkbox。
    2.多个表单之间进行比较，如【开始时间表单】一定小于等于【结束时间表单】或者两个密码表单要相等，用于注册的时候，等等。

由于这种情况的特殊性，所以用户得自己写业务逻辑代码，官方已经提供了extendsValidate扩展函数，在里面写自己的逻辑代码即可。
扩展函数表单验证DEMO：http://easyvalidator.coding.io/extends_demo.html

BUG修复日志：
2010-9-24 : 修复同一页多个FORM提交BUG ，TIP错位BUG
2010-9-26 : 新增bgiframe插件, 修复IE6下TIP 遮罩不了 SELECT表单
2010-9-27 : 增加扩展API，并重构核心库

2011-1-1   : 将表单验证的TIP独立出来，让TIP,URL,REG成为单独的组建而存在，更加灵活！

2011-1-28 : 修改了AJAX的TIP纠错BUG，逻辑修改，并且将AJAX的请求的远程程序validate_user.php的编码设置GB2312。

 

最新下载地址：https://coding.net/u/wangking/p/EasyValidator/git/branches

 

有人说找不到下载地址。这里提供图例供参考：

 

 

在线正则验证器：http://tool.chinaz.com/regex/

评论

95 楼 wangking717 2011-02-12  

hp3325 写道

我一直在测试,所以问题也提得多:
验证正确的就不要再显示TIP提示了,这样更人性化一些

当初的设计思路就是TIP仅仅是提示用途，不一定非得用在表单验证里，和你想要的思路不一样。所以改动会比较大。

94 楼 hp3325 2011-02-11  

我一直在测试,所以问题也提得多:
验证正确的就不要再显示TIP提示了,这样更人性化一些

93 楼 wangking717 2011-02-10  

hp3325 写道

如果你的选项里的数值0为正常选项数值的话，你可以选择0以下的数值作为未选择的数值，如：
<select name="type" reg="[^-1]" tip="一定要选择">
          <option value="-1">－－请选择付款类型－－</option>
          <option value="1">支出款</option>
          <option value="0">收入款</option>
</select>
用了后选择<option value="1">支出款</option>又不能通过验证了

不好意思，我举例没举对，你可以试试这样
<select name="type" reg="[^a]" tip="一定要选择">
          <option value="a">－－请选择付款类型－－</option>
          <option value="1">支出款</option>
          <option value="0">收入款</option>
</select>
这样应该能行了。

92 楼 hp3325 2011-02-10  

如果你的选项里的数值0为正常选项数值的话，你可以选择0以下的数值作为未选择的数值，如：
<select name="type" reg="[^-1]" tip="一定要选择">
          <option value="-1">－－请选择付款类型－－</option>
          <option value="1">支出款</option>
          <option value="0">收入款</option>
</select>
用了后选择<option value="1">支出款</option>又不能通过验证了

91 楼 wangking717 2011-02-10  

hp3325 写道

呵呵,一直在试用,当<select name="type" reg="[^0]" tip="一定要选择">
          <option value="1">支出款</option>
          <option value="0">收入款</option>
        </select>
这样时,验证不能通过,因为value="0"这个也是空,又不能改="0"时验证的正则应该如何表达?

如果你的选项里的数值0为正常选项数值的话，你可以选择0以下的数值作为未选择的数值，如：
<select name="type" reg="[^-1]" tip="一定要选择">
          <option value="-1">－－请选择付款类型－－</option>
          <option value="1">支出款</option>
          <option value="0">收入款</option>
</select>

90 楼 hp3325 2011-02-09  

呵呵,一直在试用,当<select name="type" reg="[^0]" tip="一定要选择">
          <option value="1">支出款</option>
          <option value="0">收入款</option>
        </select>
这样时,验证不能通过,因为value="0"这个也是空,又不能改="0"时验证的正则应该如何表达?

89 楼 wangking717 2011-01-29  

hp3325 写道

$(function(){
$("[name='cb']").each(function(){
$(this).addClass("input_validation-failed");
});

});
这个有必要吗？

这个没用，你删除了吧。。我会更新删除那个多余的DEMO代码。以免误导，呵呵~ 谢谢反馈。

88 楼 hp3325 2011-01-28  

$(function(){
$("[name='cb']").each(function(){
$(this).addClass("input_validation-failed");
});

});
这个有必要吗？

87 楼 wangking717 2011-01-28  

hp3325 写道

hp3325 写道

我试了文本框输入：
<textarea name="myeara" reg="^\w+$" tip="不能为空" cols="40" rows="5">菜网付11715+预付1月5000</textarea>，验证时不能通过是为什么？如果要验证此类文本框还有何办法？
还有Ajax验证在GB2312下返回乱码，能不能加个判断哈的

就是想验证此类文本框不为空的正则写法，演示里的那个reg="^\w+$"不行

将reg="^\w+$"改为reg="^.+$"就行了，我正则没写好。
至于你提到的中文乱码问题已解决。这个跟EASYVALIDATOR本身没多大关系，主要是AJAX远程情况的程序编码设置有关系。比如DEMO下载包里有validate_user.php，设置编码GB2312，header("Content-Type:text/html;charset=GB2312");就可以正常显示了，一般编码是多方面原因导致。

86 楼 hp3325 2011-01-27  

hp3325 写道

我试了文本框输入：
<textarea name="myeara" reg="^\w+$" tip="不能为空" cols="40" rows="5">菜网付11715+预付1月5000</textarea>，验证时不能通过是为什么？如果要验证此类文本框还有何办法？
还有Ajax验证在GB2312下返回乱码，能不能加个判断哈的

就是想验证此类文本框不为空的正则写法，演示里的那个reg="^\w+$"不行

85 楼 hp3325 2011-01-27  

我试了文本框输入：
<textarea name="myeara" reg="^\w+$" tip="不能为空" cols="40" rows="5">菜网付11715+预付1月5000</textarea>，验证时不能通过是为什么？如果要验证此类文本框还有何办法？
还有Ajax验证在GB2312下返回乱码，能不能加个判断哈的

84 楼 332602833 2010-12-31  

中文字符验证不行啊，该咋个解决呢？


解决了哈，我把ajax发送方式改为了POST。

83 楼 332602833 2010-12-27  

非常不错的插件，请问下，我验证数字的时候，怎样同时验证数字大小呢？

比如必须填写2位数字且必须小于30.


自己搞定了哈  用正则  reg="^(([0-9]{1})|(10))$"

82 楼 dengjianqiang200 2010-12-13  

jquery.validate.js这个插件也不错，很好用，而且扩展性也很强。

http://www.woiweb.net/category/jquery/

81 楼 chenxizhiyi 2010-12-10  

感谢楼主，非常好用。就是我自己本来不怎么会写正则表达式，看来要学习正则了。

用的时候还有个小插曲，我把reg和tip都写好之后，测试的时候就发现提示的气泡能够出来，但是提示的字却看不到。费解了很久之后，发现是tip里的样式跟我本来的样式有些冲突，把tip里的样式修改之后就好了，呵呵

80 楼 wangking717 2010-12-05  

mynameshb 写道

问个问题，如果我用普通button提交，没有验证呢

当初开发这个插件的时候只考虑了submit的情况。你那种就是想用button调用js function来额外扩展的一些处理，然后再提交，对吧、、、
然后是这样的话，那么你可以试试

引用

5. 扩展函数表单验证（某些业务特殊需求）：
    这些特殊需求都是根据业务来的，这里列举一下这样的情况：
    1.checkbox选择框数量验证，如限制别人至少选择1个，最多选择5个checkbox。
    2.多个表单之间进行比较，如【开始时间表单】一定小于等于【结束时间表单】或者两个密码表单要相等，用于注册的时候，等等。
由于这种情况的特殊性，所以用户得自己写业务逻辑代码，官方已经提供了extendsValidate扩展函数，在里面写自己的逻辑代码即可。
扩展函数表单验证DEMO：http://easyvalidator.googlecode.com/svn/trunk/extends_demo.html

讲那些特殊的JS处理模块加入到扩展函数验证那里。。

79 楼 mynameshb 2010-12-05  

问个问题，如果我用普通button提交，没有验证呢

78 楼 wangking717 2010-12-01  

Ivanwen 写道

楼主，页面有两个form，按照你的Demo做，还是会全部检测，用不用设置什么

不用设置什么，只要确定两个FORM之间没有交集就可以了，也就是说不要一个FORM包含了另外一个FORM，相对独立，SUBMIT提交的时候，会在包含自己的FORM下的所有控件进行验证。

77 楼 Ivanwen 2010-11-30  

楼主，页面有两个form，按照你的Demo做，还是会全部检测，用不用设置什么

76 楼 carus 2010-11-21  

先下来看看，以后可以用得到