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/

评论

155 楼 wangking717 2013-09-01  

lxlcx201 写道

我使用的时候老是找不到图片，不知道问题出在哪里。
这个是我引用的地址：
<script type="text/javascript" src="${ctx}/script/easyvalidator/js/easy_validator.pack.js"></script>
<script type="text/javascript" src="${ctx}/script/easyvalidator/js/jquery.bgiframe.min.js"></script>
<link  href="${ctx}/script/easyvalidator/css/validate.css" rel="stylesheet" type="text/css" />

文件是可以引用到的  就是vtip_arrow.png这个图片不知道为什么不能自动引用到

“vtip_arrow.png”这个图片一定是存放在“images”文件夹下。你可以在easy_validator.pack.js里看到引用了提示图片。$('body').append( '<p id="vtip"><img id="vtipArrow" src="images/vtip_arrow.png"/>' + $(this).attr('tip') + '</p>' );

当然我也不知道你具体的原因会是什么，能给出一个访问的测试网址不，这样就能很清楚的知道原因所在。

154 楼 lxlcx201 2013-07-24  

我使用的时候老是找不到图片，不知道问题出在哪里。
这个是我引用的地址：
<script type="text/javascript" src="${ctx}/script/easyvalidator/js/easy_validator.pack.js"></script>
<script type="text/javascript" src="${ctx}/script/easyvalidator/js/jquery.bgiframe.min.js"></script>
<link  href="${ctx}/script/easyvalidator/css/validate.css" rel="stylesheet" type="text/css" />

文件是可以引用到的  就是vtip_arrow.png这个图片不知道为什么不能自动引用到

153 楼 骑着蜗牛超F1 2013-05-16  

Struts标签中的radio标签无法添加tip属性。。

152 楼 wangking717 2013-03-05  

szlaptop 写道

IE6下点提交，有些必填的框没有变红色。但是在IE8下就正常。

IE6下面不支持设置BORDER。IE6下会将文字变成红色，而达到提示的作用。

151 楼 wangking717 2013-03-05  

hzxxly 写道

您写的JQ验证控件很棒 特别方便， 但是由于我现在做的页面基本都是 异步提交调用的
不能用submit按钮来做 只能用Button 你得代码是否支持呢

如果支持的话 我的Button按钮应该怎么调用呢？ 我是个初学者 还请多多帮助

支持的，请看DEMO里有通过JS方式触发验证。

150 楼 szlaptop 2013-02-19  

IE6下点提交，有些必填的框没有变红色。但是在IE8下就正常。

149 楼 hzxxly 2013-01-14  

您写的JQ验证控件很棒 特别方便， 但是由于我现在做的页面基本都是 异步提交调用的
不能用submit按钮来做 只能用Button 你得代码是否支持呢

如果支持的话 我的Button按钮应该怎么调用呢？ 我是个初学者 还请多多帮助

148 楼 longaohun 2012-09-01  

如果统一设置input[type=text]的样式的，插件会错误样式就不起作用

147 楼 anyf 2012-07-29  

如何结合jquery.form.js的ajaxSubmit方法使用的，

146 楼 hp3325 2012-07-20  

diqye 写道

我把你的插件改进了 下----不介意吧
添加常用数据类型这样就不用每次都输入正则表达式了
        更改样式出错的样式，模仿Eclipse红色波浪线
更改提示框的显示方式        
        为Form添加属性：success 和faild属性 参考下句
        为每一个验证元素都增加了一个success 和faild属性 用来验证失败执行的代码
        添加自定义验证 check属性 在这个属性里可以写自己的代码来验证复杂的验证

分享一下改过的代码和示例呀，[e-mail]

145 楼 diqye 2012-07-17  

我把你的插件改进了 下----不介意吧
添加常用数据类型这样就不用每次都输入正则表达式了
        更改样式出错的样式，模仿Eclipse红色波浪线
更改提示框的显示方式        
        为Form添加属性：success 和faild属性 参考下句
        为每一个验证元素都增加了一个success 和faild属性 用来验证失败执行的代码
        添加自定义验证 check属性 在这个属性里可以写自己的代码来验证复杂的验证

144 楼 编程的石头 2012-06-26  

点击后：



或者也可以说是能不能消除掉上次验证的结果？

143 楼 编程的石头 2012-06-26  

你好，你的插件很好用。
我现在用的时候出现了一个问题。还请为我解答一下：
我现在在做一个管理系统，经常会用同一个界面来做添加、修改、查看等功能，然后在第一次使用的页面的时候，我可能输错了一些东西，然后又取消了，再弹出这个页面时，会发现前一较验的结果还在，请问有什么方法可以去掉这个结果吗？
附图：

142 楼 李庆辉 2012-06-20  

不错。标记一下

141 楼 yjwf520199 2012-06-06  

加一个绑定验证和取消验证的方法吧,如果是js动态生成的Form 验证事件了,所以我需要在Form生成后,再次绑定一个验证事件 ...:wink:

140 楼 hp3325 2012-06-01  

可否改进支持两个字段或三个字段的同时验证?比如验证同一城市下两个相同的县????

139 楼 编程的石头 2012-04-06  

我在同时使用普通验证和ajax验证时，普通验证不起作用是怎么回事？

138 楼 lihuan2008a 2012-03-19  

思路很好，但效果感觉不怎么行，文本框输入有延时，有稍微停顿

137 楼 hsw168 2012-03-08  

只要在easy_validator.pack.js文件中加入以下函数即可支持ajax请求判断：

/**
 * 供ajax请求调用，前台页面调用方式有两种：
 * if(!validator_check("username"))
	{
		return false;
	}
	或者采用数组的方式：
	if(!validator_check(["username","password"]))
	{
		return false;
	}
 * @param obj
 * @return
 */
function validator_check(obj)
{
	var isSubmit = true;
	if(!isArray(obj))
	{
		isSubmit = validate($("#"+obj));
	}
	else
	{
		for(var i=0; i < obj.length; i++) 
		{
			if(!validate($("#"+obj[i]))){
				isSubmit = false;
			}
		}
	}
	
	if(typeof(isExtendsValidate) != "undefined"){
			if(isSubmit && isExtendsValidate){
			return extendsValidate();
		}
	}
	return isSubmit;
}

function isArray(obj){
    return (typeof(obj)=='object') && obj.constructor==Array;
}

136 楼 hsw168 2012-02-29  

很不错的验证功能。
现在好像只支持表单的验证，对于ajax提交的请求，无法进行验证。
不过，稍微改一下就可以支持了。
谢谢！