validate自定义配置2
2016-10-19 14:02
78 查看
<!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:"用户名不存在"
},
//
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"
} )//validate()函数结束封尾
});//初始化页面默认加载结束
//表单检查
$("#checkbox").click(function(){
alert($("#demoform").valid() ? "全部正确":"还是有错误");
});
</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:"用户名不存在"
},
//
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"
} )//validate()函数结束封尾
});//初始化页面默认加载结束
//表单检查
$("#checkbox").click(function(){
alert($("#demoform").valid() ? "全部正确":"还是有错误");
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vee-validate 中文配置报错及自定义规则 报错.updateDictionary/.addlocale is not a function
- jquery.validate.js默认配置，jquery.validate.js自定义提示信息
- validate自定义项目配置
- 用户自定义配置接点读取 通用方案
- ASP.NET中把扩展名.aspx改成自定义的扩展名.mspx,如何在IIS与.net框架中配置
- 自定义应用程序配置文件（app.config） (引用)
- 自定义应用程序配置文件（app.config）
- 如何在web.config 或者 app.config 文件中配置自定义节点
- 在.NET中自定义配置文件
- 自定义配置数据处理
- 自定义应用程序配置文件（app.config）
- 利用配置文件自定义站点
- 自定义应用程序配置文件(app.config)
- 创建自定义配置结
- Tomcat 5.5.15中自定义Services的配置
- 革新：.NET 2.0的自定义配置文件体系初探
- 在.NET中自定义配置文件（转）
- 为asp.net程序添加自定义配置区域 （转）
- 在.NET框架下使用自定义配置设置(转)
- 自定义应用程序配置文件