一、下載validate表單驗證的jquery插件

二、使用validate表單驗證的Html文件展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="additional-methods.js"></script>
<script type="text/javascript">
	//自定義表單驗證
	$.validator.addMethod("lattice",function(value){
		return value=="lattice";
	},'請輸入lattice!');


	$(function(){
		var form=$("#form1").validate({
			debug:true,//調試模式，即使點擊表單提交，也不會發生頁面跳轉
			onkeyup:null,//焦點失去即觸發校驗
			rules:{
				username:{	//username爲input標籤的name屬性值
						required:true,
						rangelength:[5,10]	//輸入字符長度
				},//逗號必不可少
				password:{
						required:true,
						rangelength:[5,10]
				},
				password1:{
						required:true,
						equalTo:'#password'	//與id
				},
				email:{
						required:true,
						email:true
				},
				tests:"lattice"
			},
			messages:{
				username:{
						required:"請輸入用戶名",
						rangelength:$.validator.format("用戶名長度在5-10之間")
				},
				password:{
						required:"請輸入密碼",
						rangelength:$.validator.format("密碼在5-10之間")
				},
				password1:{
						required:true,
						equalTo:$.validator.format("確認密碼：跟輸入密碼一致")
				},
				email:{
					required:"密碼輸入不爲6位",
					email:$.validator.format("輸入的郵件地址格式不正確")

				}
			}
		});
		$("input[type='button']").click(function (){
			form.resetForm();
		});
	});
</script>
</head>
<body>
	<form action="#" id="form1">
	賬號：<input type="text" name="username"><br>
	密碼：<input type="password" name="password" id="password"><br>
	確認密碼：<input type="password" name="password1"><br>
	郵件：<input type="text" name="email">
	lattice：<input type="text" name="tests">
	<input type="submit" value="提交"> 
	<input type="reset" value="重置">
	</form>
</body>
</html>