一、下载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>