核心提示：一、下载validate表单验证的jquery插件https://jqueryvalidation.org/二、使用validate表单验证的Html文件展示!DOCTYPE htmlhtml lan...
一、下载validate表单验证的jquery插件
https://jqueryvalidation.org/
二、使用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>
