例子一：
<!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个字符"/>
( 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>
分享到：
相关推荐
jQuery EasyValidator是一款强大且易用的表单验证插件，专门用于简化前端验证流程。本文将深入探讨该插件的特性和使用方法。 ### 一、简介 jQuery EasyValidator是基于jQuery库的，它通过简单的API就能实现复杂的...
**jQuery表单验证插件EasyValidator 2.0：打造高效且友好的用户输入体验** 在Web开发中，表单验证是不可或缺的一部分，它确保了用户提交的数据符合预期的格式和标准，从而防止无效数据的输入。jQuery作为一款广泛...
总的来说，EasyValidator是一个非常实用的JQuery表单验证插件，尤其适合那些不希望在验证逻辑上花费过多时间的开发者。通过其直观的API和丰富的内置规则，我们可以快速构建出功能完善的表单验证系统，从而提升用户...
**jQuery表单验证插件EasyValidator详解** 在Web开发中，表单验证是必不可少的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和安全性。EasyValidator是一款基于jQuery的轻量级表单验证插件...
jQuery EasyValidator是一款强大的JavaScript表单验证插件，它基于jQuery库构建，专为简化和增强网页表单数据验证而设计。这款插件提供了一系列灵活且易于使用的API，帮助开发者快速实现对用户输入的有效性检查，...
本插件的宗旨是：用户无需写一行JS验证代码，只需在要验证的表单中加入相应的验证属性即可，让验证功能易维护，可扩展，更容易上手。 DEMO中已经包含了常用的正则表达式，可以直接复用，为了考虑扩展性，所以针对...
EasyValidator是一款基于jQuery的轻量级表单验证组件，它以其简单易用、功能强大的特点，在众多验证库中脱颖而出。本文将深入探讨EasyValidator的原理、使用方法以及实战示例。 一、EasyValidator简介 ...
JQuery表单验证插件EasyValidator是一款高效且易于使用的工具，它专为简化JavaScript表单验证而设计。该插件的核心理念是让用户无需编写复杂的JavaScript验证代码，而是通过在HTML表单元素上添加特定属性，即可实现...
在实际应用中，EasyValidator与其他jQuery插件的兼容性良好，可以方便地与Bootstrap、ElementUI等前端框架结合使用，提供美观的表单验证效果。同时，它还有良好的扩展性，开发者可以根据项目需求对其进行二次开发或...
"EasyValidator2表单验证JQuery插件"就是这样一个工具，它专为jQuery设计，简化了前端数据验证的过程，提供了丰富的验证规则和友好的用户体验。 EasyValidator2是基于jQuery的一个轻量级插件，它的核心功能在于为...
jQuery EasyValidator是一款为了解决传统验证复杂、上手难的问题而设计的轻量级表单验证插件。这款插件以其简单易用、易于维护和高度可扩展性脱颖而出，极大地降低了开发者的工作负担。 首先，我们来了解一下...
**jQuery表单验证插件——EasyValidator 2.0** 在网页开发中，表单验证是必不可少的一个环节，它能够确保用户输入的数据符合预设的规则，提高用户体验并减轻服务器端的压力。`EasyValidator 2.0` 是一款基于 jQuery...
总结来说，EasyValidator修改版是一个强大而灵活的前端验证工具，通过HTML属性配置和JQuery集成，使得验证过程变得简单易行。无论你是初学者还是经验丰富的开发者，都能从中受益，提升你的项目质量和用户体验。结合...
EasyValidator是一款验证插件，它可以帮助开发者轻松实现表单验证，减少用户输入错误，提升用户体验。 这些插件的集合展示了jQuery如何通过扩展实现各种功能，从简单的交互到复杂的业务逻辑。它们通常包含了丰富的...
EasyValidator是这个主题中提到的一个具体插件，它可能是用于表单验证的。在网页表单中，数据验证是必不可少的，确保用户输入的数据符合预设规则，例如邮箱格式、手机号码格式等。EasyValidator可能提供了丰富的验证...
在提供的压缩包文件名中，我们看到两个与jQuery相关的插件：“jQuery表单验证插件EasyValidator+2.0带TIP提示效果.rar”和“jquery_validate.rar”。这表明这些插件是用于jQuery框架的，jQuery是一种广泛使用的...
3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7....