<!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>
validate自定义配置2
原创wx5e6caa8b9792d 博主文章分类:Javascript ©著作权
©著作权归作者所有:来自51CTO博客作者wx5e6caa8b9792d的原创作品,请联系作者获取转载授权,否则将追究法律责任
下一篇:Django命令
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
SpringBoot自定义starter
SpringBoot自定义starter
spring maven ci -
spring 自定义 validate 自定义springmvc
1.自定义的DispatcherServlet,就是SpringMvc运行加载类/*** * 手写SpringMvc框架<br> * 思路:<br> * 1.手动创建一个DispatcherServlet 拦截项目的所有请求 SpringMvc 基于servlet实现<br> * 2.extends HttpHttpServlet 重写init 方法&l
spring 自定义 validate 这是自己手写的SpringMvc spring mvc java -
jQuery:validate添加自定义验证
jQuery.validator.addMethod添加自定义的验证规则addMethod:name, method, message简单实例:单个验证的添加validate.js拓展验证validate.expand.jsjQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value));}, "请正确填写您的邮政编码");多个验证方法添加 Read More
jquery插件 html jquery javascript ajax -
如何自定义jquery的on方法 jquery validate自定义验证
jQuery Validate之自定义(正则)校验 一、前言 相信很多开
如何自定义jquery的on方法 自定义 错误信息 jQuery