<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<style>
div{margin-left: 10px;color: red}
label.error{
margin-left: 10px;
color: red;
}
</style>
</head>
<body>
<form id="demo">
<div>用户登录系统</div>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<!--<label for="username" class="error"></label>-->
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password" >
<!--<label for="password" class="error"></label>-->
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id= "confirm-password" name="confirm-password">
<!--<label for="confirm-password" class="error"></label>-->
</p>
<button type="submit" id="check">表单检查</button>
<input type="submit" value="登录">
</form>
<script>
$(function(){
$("#demo").validate(
{ //参数
rules:{
//参数1
username:{
required:true,
rangelength:[2,16],
remote:"remote.json"
},
//参数2
password:{
required:true,
minlength:8,
maxlength:16
},
"confirm-password":{
equalTo:"#password"
}
},
messages:{
username:{
required:"必须填写用户名",
rangelength:"长度应该在8位到16位之间"
},
password:{
required:"必须填写密码",
minlength:"长度不得小于8位",
maxlength:"长度不得大于16位"
},
"confirm-password": {
equalTo: "两次输入密码必须相同"
}
}
});
$("#check").click(function(){
alert($("#demo").valid() ? "填写正确":"填写错误")
});
});
</script>
</body>
</html>
Jquery-validate表单插件代码
原创wx5e6caa8b9792d 博主文章分类:Python自动化开发 ©著作权
©著作权归作者所有:来自51CTO博客作者wx5e6caa8b9792d的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:rules()表示返回的是规则
下一篇:Jquery扩展的两种方式
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【Jquery插件集合】轮播、时间处理插件
【Jquery插件集合】轮播、时间处理插件
jquery css JavaScript -
jQuery Validate插件实现表单验证
jQuery Validate前言jQuery Validate插件为表单提供了强大的验证功能,让客户端表
jquery 表单校验 validate js 字符串 -
jQuery Validate 表单验证
http://www.open-open.com/lib/view/open1372923690066.html
jQuery Validate 表单验证