论坛首页 Web前端技术论坛

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

浏览 77671 次
该帖已经被评为新手帖
作者 正文
   发表时间:2010-09-21   最后修改:2011-05-28
作者 写道
本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。

DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧。
顺便AD下刚出炉的小站,欢迎捧场:www.paipaiyou.com

 

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.googlecode.com/svn/trunk/index.html


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.googlecode.com/svn/trunk/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。

 

最新下载地址:http://code.google.com/p/easyvalidator/downloads/list

 

在线正则验证器:http://regexpal.com/

  • 大小: 25 KB
  • 大小: 126.9 KB
   发表时间:2010-09-23  
wow, guy, great work!
thanks!
0 请登录后投票
   发表时间:2010-09-23  
很不错,减少很多重复代码!
0 请登录后投票
   发表时间:2010-09-23  
这种验证方法还不错。
0 请登录后投票
   发表时间:2010-09-23  
不错,很好的验证框架,和jsValidation差不多。
0 请登录后投票
   发表时间:2010-09-24  
轻巧实用,我喜欢
0 请登录后投票
   发表时间:2010-09-24  
看了看源码,有个问题,你这个没有考虑同一页面多form的问题,

$("form").submit(function(){
var isSubmit = true;
$("[reg],[url]:not([reg])").each(function(){
                //...

这样如果有多个form,那你触发任何一个form的submit事件都会导致全部需要验证的表单项的验证,建议改成:

$("form").submit(function(){
var isSubmit = true;
$(this).find("[reg],[url]:not([reg])").each(function(){
                //...
0 请登录后投票
   发表时间:2010-09-24  
红色的框框不太喜欢,显示div节省了空间,这点不错,是好像项目组有人提起过。
0 请登录后投票
   发表时间:2010-09-24  
凭什么又给评新手?
0 请登录后投票
   发表时间:2010-09-24  
不错的验证收下了,谢谢!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics