jQuery Validate 表单验证
2017-10-30 本文已影响0人
charmingcheng
<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>登陆丨Sharelink</title>
<link rel="stylesheet" href="Content/style.css">
<body>
<div class="login-container">
<h1>ShareLink</h1>
<div class="connect">
<p>Link the world. Share to world.</p>
</div>
<form action="" method="post" id="loginForm">
<div>
<input type="text" name="username" class="username" placeholder="用户名" autocomplete="off"/>
</div>
<div>
<input type="password" name="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" />
</div>
<button id="submit" type="submit">登 陆</button>
</form>
<a href="register.html">
<button type="button" class="register-tis">还有没有账号？</button>
</a>
</div>
</body>
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/common.js"></script>
<!--背景图片自动更换-->
<script src="Scripts/supersized.3.2.7.min.js"></script>
<script src="Scripts/supersized-init.js"></script>
<!--表单验证-->
<script src="Scripts/jquery.validate.min.js"></script>
</html>
<--common.js-->
//打开字滑入效果
window.onload = function(){
$(".connect p").eq(0).animate({"left":"0%"}, 1000);
$(".connect p").eq(1).animate({"left":"0%"}, 400);
};
//jquery.validate表单验证
$(document).ready(function(){
//登陆表单验证
$("#loginForm").validate({
rules:{
username:{
required:true,//必填
minlength:3, //最少6个字符
maxlength:32,//最多20个字符
},
password:{
required:true,
minlength:3,
maxlength:32,
},
},
//错误信息提示
messages:{
username:{
required:"必须填写用户名",
minlength:"用户名至少为3个字符",
maxlength:"用户名至多为32个字符",
remote: "用户名已存在",
},
password:{
required:"必须填写密码",
minlength:"密码至少为3个字符",
maxlength:"密码至多为32个字符",
},
},
});
//注册表单验证
$("#registerForm").validate({
rules:{
username:{
required:true,//必填
minlength:3, //最少6个字符
maxlength:32,//最多20个字符
remote:{
url:"http://kouss.com/demo/Sharelink/remote.json",//用户名重复检查，别跨域调用
type:"post",
},
},
password:{
required:true,
minlength:3,
maxlength:32,
},
email:{
required:true,
email:true,
},
confirm_password:{
required:true,
minlength:3,
equalTo:'.password'
},
phone_number:{
required:true,
phone_number:true,//自定义的规则
digits:true,//整数
}
},
//错误信息提示
messages:{
username:{
required:"必须填写用户名",
minlength:"用户名至少为3个字符",
maxlength:"用户名至多为32个字符",
remote: "用户名已存在",
},
password:{
required:"必须填写密码",
minlength:"密码至少为3个字符",
maxlength:"密码至多为32个字符",
},
email:{
required:"请输入邮箱地址",
email: "请输入正确的email地址"
},
confirm_password:{
required: "请再次输入密码",
minlength: "确认密码不能少于3个字符",
equalTo: "两次输入密码不一致",//与另一个元素相同
},
phone_number:{
required:"请输入手机号码",
digits:"请输入正确的手机号码",
},
},
});
//添加自定义验证规则
jQuery.validator.addMethod("phone_number", function(value, element) {
var length = value.length;
var phone_number = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8}|(18[0-9]{1}))$/
return this.optional(element) || (length == 11 && phone_number.test(value));
}, "手机号码格式错误");
});
