easyvalidator是JQuery的一个表单验证插件，因为很简单所以叫easyvalidator

Mr.Cheney

浏览: 215325 次
性别:
来自: 武汉

最近访客更多访客>>

wyk525

Union365

q4421

wuxia_2001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery JavaScript CSS ITeye XHTML

例子一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<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" />
</head>

<body>
<h1>JQuery表单验证DEMO</h1>
FORM1表单验证
<hr />
<form name="validateForm1" action="http://mr-cheney.iteye.com" method="post">
<table width="800" border="0" class="ad" cellpadding="0" cellspacing="1" bgcolor="#999999" id="testTable">
 　　<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		用户名 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="flightno" type="text" id="flightno" reg="^\w{2}\d+$" tip="游戏商名称[2个字母简写]+用户ID[数字] 如: sd10059"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		中文姓名 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="floatNum" type="text" id="floatNum" reg="^[\u4e00-\u9fa5]+$" tip="只允许中文字符"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		电话号码 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="str" type="text" id="str" reg="^\d{3}-\d{8}$|^\d{4}-\d{7}$" tip="国内电话号码，格式: 0832-4405222 或 021-87888822"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		邮箱地址 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="groupname" type="text" id="groupname" reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" tip="邮箱地址，如wangking717@qq.com" />
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		来自哪里 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<select id="from" name="from" reg="[^0]" tip="一定要选择哟">
		  <option value="0">－－请选择你来自哪里－－</option>
		  <option value="a">北京</option>
		  <option value="b">上海</option>
		  <option value="c">四川</option>
		</select> <span name="easyTip"></span>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
	<td colspan="2" align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
	<input type="submit" name="submit" value=" 提交 " id="submit" />
	</td>
	</tr>
</table>
</form>
FORM2表单验证
<hr />
<form name="validateForm2" action="http://mr-cheney.iteye.com/" method="post">
<table width="800" border="0" class="ad" cellpadding="0" cellspacing="1" bgcolor="#999999" id="testTable">
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		网址 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="time1" type="text" id="time1" reg="^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&%\$#\=~])*$" tip="URl格式，允许FTP,HTTP,HTTPS"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		图片上传 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="imgFile" type="file" id="imgFile" reg=".*gif|png$" tip="允许GIF,PNG图片"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		文本 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<textarea name="myeara" reg="^.+$" tip="不能为空" cols="40" rows="5">菜网付11715+预付1月5000</textarea>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
	<td colspan="2" align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
	<input type="submit" name="submit" value=" 提交 " id="submit" />
	</td>
	</tr>
</table>
</form>
</body>
</html>

例子二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证DEMO By wangking</title>
<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>
<script type="text/javascript">
var isExtendsValidate = true;	//如果要试用扩展表单验证的话，该属性一定要申明
function extendsValidate(){	//函数名称，固定写法
	
	//密码匹配验证
	if( $('#pwd1').val() == $('#pwd2').val() ){	//匹配成功
		$('#pwd2').validate_callback(null,"sucess");	//此次是官方提供的，用来消除以前错误的提示
	}else{//匹配失败
		$('#pwd2').validate_callback("密码不匹配","failed");	//此处是官方提供的API，效果则是当匹配不成功，pwd2表单 显示红色标注，并且TIP显示为“密码不匹配”
		return false;
	}
	
	//如果觉得官方提供的错误提示UI API 过于复杂，完全可以选择自定义，可以试试下面注释掉的代码
	
	//if( $('#pwd1').val() != $('#pwd2').val() ){	//匹配不成功
		//alert("密码不匹配");
		//return false;
	//}
	
	//checkbox 验证，必须选择一个checkbox
	if($("[name='lover']:checked").length < 1){
		alert("必须得有一个lover!");
		return false;
	}
	
	
}

</script>
<link  href="css/validate.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Extends validation demo</h1>
<p>参与讨论：<a href="http://mr-cheney.iteye.com/" target="_blank">link</a></p>
<p>扩展需求表单验证,此处实例为【验证两个密码是否相等】，当然还有多个表单大小比较，checkbox数量限制等等，依葫芦画瓢</p>
<hr />
<form name="pwdEqualForm" action="http://wangking717.iteye.com/" method="post">
<table width="800" border="0" class="ad" cellpadding="0" cellspacing="1" bgcolor="#999999" id="testTable">
 　　<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		密码 : 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="u" type="password" id="pwd1" reg="^\w{6,20}$" tip="6-20个字符"/>
		&nbsp; ( 6-20个字符) 
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		确实密码: 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input name="u" type="password" id="pwd2" reg="^\w{6,20}$" tip="6-20个字符，请确认两次密码输入相同"/> </td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		LOVERS: 
		</td>
		<td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		<input type="checkbox" name="lover" value="lilly" /> Lilly
		<input type="checkbox" name="lover" value="Han MeiMei" /> Han MeiMei
		<input type="checkbox" name="lover" value="Polly" /> Polly
		</td>
	</tr>
	<tr bgcolor="#ffffff">
	<td colspan="2" align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
	<input type="submit" name="submit" value=" 提交 " id="submit" />
	</td>
	</tr>
</table>
</form>
</body>
</html>

easyvalidator_download.rar (49.9 KB)
下载次数: 14

分享到：

自定义Tag标签的使用、Struts2国际化全局 ... | 得到json中的key的名称

2011-04-26 15:16
浏览 1364
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyvalidator是JQuery的一个表单验证插件，因为很简单所以叫easyvalidator

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

easyvalidator是JQuery的一个表单验证插件，因为很简单所以叫easyvalidator

评论

发表评论

相关推荐

jquery实例5:仿Google Suggest自动补齐

jquery实例4:动态显示股票信息

Jquery实例2：可收缩展开的级联菜单与局部刷新

jquery实例1:淡入淡出窗口

jquery实例3：可编辑的表格

最近访客更多访客>>