简单的jQuery验证插件的使用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
?<script src="jquery-1.4.2.js" type="text/javascript"></script>
?<script src="jquery.validate.js" type="text/javascript"></script>
?<script src="jquery.metadata.js" type="text/javascript"></script>
?<script src="jquery.validate.messages_cn.js" type="text/javascript"></script>
?<style type="text/css">
?.error{
??color:red;
?}
?
?
?</style>
? <script type="text/javascript">
? jQuery(document).ready(function(){
?//提交时验证表单
?jQuery("#submitButton").click(function(){
??if(!validator.form()){
???validator.focusInvalid();
???return false;
??}
??
??jQuery("#form1").submit();
?
?});
?
?//验证规则
?var validator = jQuery("#form1").validate({
??
??rules:{
???username:{required:true, minlength:2},
???email:{required:true, email:true},
???url:{url:true, minlength:2},
???comment:{required:true}
??},
??//这里加了一个错误位置，即把错误信息放在<td></td>里面
??errorPlacement:function(error,element){
???error.appendTo(element.parent("td").next("td"));
??}
?});
?
?//重置按钮的重置方法
?jQuery("#resetButton").click(function(){
??jQuery("#form1Table").find(":input[type='text']").attr("value","");
?});
? });
? </script>
?
</head>
<body >
??<h1>一个简单的jQuery验证例子</h1>
??<form id="form1" method="get" action="">
???<table id="form1Table">
????<tr>
?????<td>
??????用户名：
?????</td>
?????<td >
??????<input type="text" name="username" size="25"/><font color="red">*</font>?
?????</td>
?????<td></td>
????</tr>
????<tr>
?????<td>
??????电子邮件：
?????</td>
?????<td >
??????<input type="text" name="email" size="25"/><font color="red">*</font>
?????</td>
?????<td></td>
????</tr>
????<tr>
?????<td>
??????网址：
?????</td>
?????<td>
??????<input type="text" name="url" size="25"/>
?????</td>
?????<td></td>
????</tr>
????<tr>
?????<td>
??????住址：
?????</td>
?????<td>
??????<input type="text" name="comment" size="25"/><font color="red">*</font>
?????</td>
?????<td></td>
????</tr>
????<tr>
?????<td>
??????<input type="button" id="submitButton" value="提交"/>
?????
?????</td>
?????<td>
??????<input type="button" id="resetButton"? value="重置"/>
?????</td>
????</tr>
???</table>
??</form>
?
</body>
</html>
