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/

评论

115 楼 njl_041x 2011-04-26  

请问楼主：能不能将“格式验证”和“验空”分开？
即：字段可以不填，但如果填就必须填写正确。当字段为空时，也是可以提交的。
所以我还想问这个验证插件是不是实现了“只格式验证”，“格式验证+验空”这两种验证模式。请楼主回复至 [e-mail] 期待您的回复，楼主辛苦了！！！

114 楼 huangst 2011-04-26  

请下,可以把给表单项目对应的 <labe for=""></for>  错误提示吗

113 楼 wangking717 2011-04-22  

PlayGod1984 写道

终于可以回帖子了，楼主问个弱的问题哈
=================================
我有这样的需求，就是在表格里放了很多input text,用了你的验证很好使，但是我通过js动态生成的行，直接拷贝的上一行，结果发现无论我怎么实现，除了第一行之外，其他行的input text类型的验证都没有了，提示也木有，不知道是不是名字或者id重复，不知道楼主是否有时间可以帮助解答一下，我该注意什么？

tabledefine.jsp代码里面如果点击按钮需要验证的话，需要用到form标签，这样点击的按钮所在的form标签包含内所有的表单就会验证。
<form action="xxx.html" method="get">
<input表单>....
<submit1 按钮>...当点击submit1这个按钮，会验证这个按钮的表单验证
</form>

<form action="xxx.html" method="get">
<input2 表单>....
<submit2 按钮>...当点击submit2这个按钮，会验证这个按钮的表单验证
</form>

112 楼 PlayGod1984 2011-04-20  

终于可以回帖子了，楼主问个弱的问题哈
=================================
我有这样的需求，就是在表格里放了很多input text,用了你的验证很好使，但是我通过js动态生成的行，直接拷贝的上一行，结果发现无论我怎么实现，除了第一行之外，其他行的input text类型的验证都没有了，提示也木有，不知道是不是名字或者id重复，不知道楼主是否有时间可以帮助解答一下，我该注意什么？

111 楼 carlzhao531 2011-04-19  

呵呵~支持楼主啊~继续努力呐

110 楼 wangking717 2011-04-12  

luoyu-ds 写道

楼主，这个写得很好，谢谢了。。。
不过我想问个问，如果验证不通过，怎么样点击了提交不执行提交呢。。。

只要验证不通过，永远点击提交都不会执行。

109 楼 luoyu-ds 2011-04-12  

楼主，这个写得很好，谢谢了。。。
不过我想问个问，如果验证不通过，怎么样点击了提交不执行提交呢。。。

108 楼 javabean96 2011-03-28  

采用了这种验证，thanks

107 楼 wangking717 2011-03-26  

tianlele_xl 写道

我用了,很不错,很棒,同时也发现了几个问题,就是用js添加的表单中不适用规则,还有个是结合thickbox用的时候,使用js赋予input的值它不认,还是提醒为红色

难免会和其他的一些插件想冲突，只要其他的插件不会用JS去修改其他表单的CSS，就不会出问题。

106 楼 wangking717 2011-03-26  

hp3325 写道

在JQ1.5下提示有点小毛病，希望修正一下

能描述一下JQ1.5下的毛病不。

105 楼 hp3325 2011-03-25  

在JQ1.5下提示有点小毛病，希望修正一下

104 楼 tianlele_xl 2011-03-25  

我用了,很不错,很棒,同时也发现了几个问题,就是用js添加的表单中不适用规则,还有个是结合thickbox用的时候,使用js赋予input的值它不认,还是提醒为红色

103 楼 seagod.wong 2011-03-12  

wangking717 写道

seagod.wong 写道

$("p#vtip").bgiframe is not a function


楼主这是嘛原因？

请确认一下文件都包含了？

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easy_validator.pack.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<link  href="css/validate.css" rel="stylesheet" type="text/css" />

确实包含了。也能用，但是用火狐firebug只要移动鼠标到任何一个输入框就会报这个异常，但是目前不影响使用。

102 楼 yiyi_2 2011-03-11  

不错不错,楼主厉害

101 楼 hp3325 2011-03-02  

在JQ1.5下提示有点小毛病，希望修正一下

100 楼 jessej 2011-02-28  

好漂亮哦。。
哎。。我的毕业设计的前端。。

99 楼 dhj125_ly926 2011-02-24  

感谢楼主的分享，很好。很不错。

98 楼 wangking717 2011-02-23  

seagod.wong 写道

$("p#vtip").bgiframe is not a function


楼主这是嘛原因？

请确认一下文件都包含了？

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easy_validator.pack.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<link  href="css/validate.css" rel="stylesheet" type="text/css" />

97 楼 seagod.wong 2011-02-23  

$("p#vtip").bgiframe is not a function


楼主这是嘛原因？

96 楼 hp3325 2011-02-12  

继续关注和测试。。