jQuery表单验证插件 -- Validation插件的使用 -

wltjack

浏览: 40690 次
性别:
来自: 成都

最近访客更多访客>>

dkl187788

wangyy

hyla_bob

epichust

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery表单验证插件 -- Validation插件的使用

博客分类：

jQuery

jQuery插件的使用

jQuery表单验证插件 --- Validation
特点：
1、内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。
2、自定义验证规则：可以很方便地自定义验证规则。
3、简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。
4、实时验证：可以通过 keyup 或 blur 事件触发验证，而不仅仅在表单提交的时候验证。

Validation 插件的官方API地址为：
http://docs.jquery.com/Plugins/Validation 。

以下是改写的一个简单的示例：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>Validation 插件的使用</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<script type="text/javascript" src="<%=path %>/js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="<%=path %>/js/jquery.validate.js"></script>	
	<!-- 引入一个新的jQuery插件 -- jquery.metadata.js ，这样可以 将所有的与验证相关的信息写到class属性中方便管理  -->
	<%--<script type="text/javascript" src="<%=path %>/js/jquery.metadata.js"></script>--%>
	<!-- 添加中文库支持  -->
	<%--<script type="text/javascript" src="<%=path %>/js/messages_zh.js"></script>--%>	
	<!-- 定义样式  -->
	<style type="text/css">
		* {font-family:Verdana; font-size: 96%;}
		label {
			width:10em; float:left;
		}
		label.error{
			float:none; color:red; padding-left:.5em; vertical-align:top;
		}
		p{
			clear:both;
		}
		.submit{
			margin-left:12em;
		}
		em{
			font-weight:bold; padding-right:1em; vertical-align:top;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			/** 在validate()方法中增加rules属性 ，通过每个字段的name属性值来匹配验证规则。 */
			$("#commentForm").validate({
				rules:{
					username:{
						required:true,
						minlength:2
					},
					email:{
						required:true,
						email:true
					},
					url:"url",
					comment:"required",
					validateCode:{
						formula:"1+2"
					}
				},
				messages:{ // 下面是对应的自定义验证信息
					username:{
						required:"请输入姓名",
						minlength:"请至少输入两个字符"
					},
					email:{
						required:"请输入电子邮件",
						email:"请检查电子邮件的格式"
					},
					url:"请检查网址的格式",
					comment:"请输入您的评论"
				}
			});
			/** 自定一个验证"验证码"的方法 */
			$.validator.addMethod(
				"formula",		// 验证方法的名称
				function(value,element,param){	// 验证规则 
					return value == eval(param);
				},
				"请输入数学公式计算后的正确结果"	// 验证提示信息
			);
			
		});	
	</script>
  </head>
  <body>
  	<!-- 自定义验证信息 ，Validation 插件可以很方便地自定义验证规则，用来代替千篇一律的默认验证信息 ;
  		  自定义验证规则 ，以满足业务的需要 。
  	  -->
  	<form class="cmxform" id="commentForm" method="get" action="#">
	  	<fieldset>
	  		<legend>一个简单的验证带验证提示的评论例子</legend>
	  		<p>
	  			<label for="username">姓名</label><em>*</em>
	  			<input id="username" name="username" size="25" /> <!-- 对"姓名"的必填和长度至少是两位的验证  -->
	  		</p>
	  		<p>
	  			<label for="email">电子邮件</label><em>*</em>
	  			<input id="email" name="email" size="25" /> <!-- 对"电子邮件"的必填和是否为E-mail格式的验证  -->
	  		</p>
	  		<p>
	  			<label for="url">网址</label><em>&nbsp;&nbsp;</em>
	  			<input id="url" name="url" size="25" value=""/> <!-- 对"网址"是否为url的验证  -->
	  		</p>
	  		<p>
	  			<label for="comment">你的评论</label><em>*</em>
	  			<textarea id="comment" name="comment" rows="5" cols="22"></textarea> <!-- 对"你的评论"的必填验证  -->
	  		</p>
	  		<p>
	  			<label for="validateCode">验证码</label><em>*</em> <!-- 这里只在模拟，并未从后台生成  -->
	  			<input id="validateCode" name="validateCode" size="25" value=""/> =1+2
	  		</p>
	  		<p>
	  			<input type="submit" class="submit" value="提交"/>
	  		</p>
	  	</fieldset>
  	</form>
  </body>
</html>

页面的效果图：