日期:2014-05-16  浏览次数:20372 次

jquery.validate.js客户端验证(一)

jquery.validate.js真是一个好东东,功能强大。使用它进行客户端验证分两种情况。今天暂时记录第一种用法,因为第二种用法还没学会。(⊙o⊙)

1、下载jquery.validate.js及Jquery.js文件

jquery.Validation 官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jquery.Validation 在线文档:http://docs.jquery.com/Plugins/Validation
jquery.Validation 在线 API(强烈推荐):http://jquery.bassistance.de/api-browser/plugins.html
jquery.Validation 官方项目介绍:http://plugins.jquery.com/project/validate
jquery.Validation1.3 [2009-3-10] 最新版下载地址:http://plugins.jquery.com/files/jquery.validate_13.zip

一些有用的中文帖子和博客文章:
jQuery的表单校验插件validate:http://hi.baidu.com/dereky/blog/item/c1cbc3fd60e1aa46d6887d8e.html
jquery.validate.js简介:http://www.iteye.com/topic/276661

2、创建网页文件

 <head>
    <html:base />
    
    <title>addPatient.jsp</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
	<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
	<script src="js/jquery.validate.js" type="text/javascript"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$("#aa").validate();//aa为form表单的id属性,必须为id属性,name属性不行
		});
	</script>
	
  </head>

?

注:必须有meta标记,否则页面报错

3、创建表单

<html:form action="/addPatient" styleId="aa">
		idcard:<html:text property="idcard" styleClass="required"></html:text>
		<html:errors property="idcard"/>
		
		<br/>
		<html:submit></html:submit>
</html:form>

?

其中"required"在jquery.validate.js文件中已定义好。在此文件大红256行定义了许多规则,可供直接使用。