validator自定义方法

来源：互联网发布：mysql my.ini配置编码编辑：程序博客网时间：2024/04/28 03:39

<!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>

0 0