<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jquery-validate插件</title>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<style>
body{font-size: 36px;
line-height: 1.6;
}
p{margin: 10px 0;}
label{display:inline-block;min-width:140px;}
label.error{margin-left: 10px;color: red}
input,button{
line-height: 35px;
border: 1px solid #999;
min-width: 180px;
}
input.error{border: 1px solid red;}
input[type=submit],button{
margin-top: 20px;
font-size: 36px;
padding: 10px 0;
}
</style>
</head>
<body>
<form id="demoform">
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密码</label>
<input type="password" name="password" id="password">
</p>
<p>
<label for="apassword">确认密码</label>
<input type="password" name="apassword" id="apassword">
</p>
<p>
<button id="checkbox">表单检查</button>
</p>
<input type="submit" value="登录">
</form>
<script>
var validate;
$(document).ready(function(){
// $.validator.setDefaults({debug:true})
validate=$("#demoform").validate(
{
rules:{
//姓名
username:{
//required:true,第一种
required:{
depends:function(element){
return $("#password").is(":filled");//这样用户名校验就看密码有没有填
}
},
//第一种minlength:2,
minlength:{
param:2,
depends:function(element){
return $("#password").is(":filled");//如果条件满足则被加进来
}
},
maxlength:10,
remote:"remote.json",
},
//密码
password:{
required:true,
minlength:2,
maxlength:10,
},//确认密码
apassword:{
equalTo:"#password",
}
},
//MESSAGES
messages:
{
username:
{
required:"必须输入用户名",
minlength:"最小长度为2位",
maxlength:"最大长度为16位",
remote:"用户名不存在",
postcode:true
},
//
password:
{
required:"必须输入密码",
minlength:"最小长度为2位",
maxlength:"最大长度为16位",
},
apassword:{
equalTo:"两次密码要一致",
}
},
//MESSAGES
//自定义配置项
//第一项
submitHandler:function(form){
console.log($(form).serialize());
},//第二项
invalidHandler:function(event,validator){
console.log("错误树"+validator.numberOfInvalids());
},//第三项
//ignore:"username"
//第四项
//onsubmit:false,//是否在提交的时候验证
//第四项
// showErrors:function(errorMap,errorList){
// console.log(errorMap),
// console.log(errorList)
//
//
//
// },
//第五项
highlight:function(element,errorClass,validClass)
{
$(element).addClass(errorClass).removeClass(validClass),
$(element).fadeOut().fadeIn();
},
unhighlight:function(element,errorClass,validClass)
{$(element).addClass(errorClass).removeClass(validClass)},
} )//validate()函数结束封尾
});//初始化页面默认加载结束
//表单检查
$("#checkbox").click(function(){
alert($("#demoform").valid() ? "全部正确":"还是有错误");
});
// 这是那个邮箱的方法
$.validator.addMethod("postcode",function(value,element,params){
var postcode=/^[0-9]{6}/;
return (postcode.test(value));//这种情况可以不填写
},"请填写正确的邮编");
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Jquery-validate插件</title>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<style>
body{font-size: 36px;
line-height: 1.6;
}
p{margin: 10px 0;}
label{display:inline-block;min-width:140px;}
label.error{margin-left: 10px;color: red}
input,button{
line-height: 35px;
border: 1px solid #999;
min-width: 180px;
}
input.error{border: 1px solid red;}
input[type=submit],button{
margin-top: 20px;
font-size: 36px;
padding: 10px 0;
}
</style>
</head>
<body>
<form id="demoform">
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密码</label>
<input type="password" name="password" id="password">
</p>
<p>
<label for="apassword">确认密码</label>
<input type="password" name="apassword" id="apassword">
</p>
<p>
<button id="checkbox">表单检查</button>
</p>
<input type="submit" value="登录">
</form>
<script>
var validate;
$(document).ready(function(){
// $.validator.setDefaults({debug:true})
validate=$("#demoform").validate(
{
rules:{
//姓名
username:{
//required:true,第一种
required:{
depends:function(element){
return $("#password").is(":filled");//这样用户名校验就看密码有没有填
}
},
//第一种minlength:2,
minlength:{
param:2,
depends:function(element){
return $("#password").is(":filled");//如果条件满足则被加进来
}
},
maxlength:10,
remote:"remote.json",
},
//密码
password:{
required:true,
minlength:2,
maxlength:10,
},//确认密码
apassword:{
equalTo:"#password",
}
},
//MESSAGES
messages:
{
username:
{
required:"必须输入用户名",
minlength:"最小长度为2位",
maxlength:"最大长度为16位",
remote:"用户名不存在",
postcode:true
},
//
password:
{
required:"必须输入密码",
minlength:"最小长度为2位",
maxlength:"最大长度为16位",
},
apassword:{
equalTo:"两次密码要一致",
}
},
//MESSAGES
//自定义配置项
//第一项
submitHandler:function(form){
console.log($(form).serialize());
},//第二项
invalidHandler:function(event,validator){
console.log("错误树"+validator.numberOfInvalids());
},//第三项
//ignore:"username"
//第四项
//onsubmit:false,//是否在提交的时候验证
//第四项
// showErrors:function(errorMap,errorList){
// console.log(errorMap),
// console.log(errorList)
//
//
//
// },
//第五项
highlight:function(element,errorClass,validClass)
{
$(element).addClass(errorClass).removeClass(validClass),
$(element).fadeOut().fadeIn();
},
unhighlight:function(element,errorClass,validClass)
{$(element).addClass(errorClass).removeClass(validClass)},
} )//validate()函数结束封尾
});//初始化页面默认加载结束
//表单检查
$("#checkbox").click(function(){
alert($("#demoform").valid() ? "全部正确":"还是有错误");
});
// 这是那个邮箱的方法
$.validator.addMethod("postcode",function(value,element,params){
var postcode=/^[0-9]{6}/;
return (postcode.test(value));//这种情况可以不填写
},"请填写正确的邮编");
</script>
</body>
</html>