容易的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>