<!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">還有沒(méi)有賬號(hào)？</button>
</a>
</div>
</body>
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/common.js"></script>
<!--背景圖片自動(dòng)更換-->
<script src="Scripts/supersized.3.2.7.min.js"></script>
<script src="Scripts/supersized-init.js"></script>
<!--表單驗(yàn)證-->
<script src="Scripts/jquery.validate.min.js"></script>
</html>
<--common.js-->
//打開(kāi)字滑入效果
window.onload = function(){
$(".connect p").eq(0).animate({"left":"0%"}, 1000);
$(".connect p").eq(1).animate({"left":"0%"}, 400);
};
//jquery.validate表單驗(yàn)證
$(document).ready(function(){
//登陸表單驗(yàn)證
$("#loginForm").validate({
rules:{
username:{
required:true,//必填
minlength:3, //最少6個(gè)字符
maxlength:32,//最多20個(gè)字符
},
password:{
required:true,
minlength:3,
maxlength:32,
},
},
//錯(cuò)誤信息提示
messages:{
username:{
required:"必須填寫(xiě)用戶名",
minlength:"用戶名至少為3個(gè)字符",
maxlength:"用戶名至多為32個(gè)字符",
remote: "用戶名已存在",
},
password:{
required:"必須填寫(xiě)密碼",
minlength:"密碼至少為3個(gè)字符",
maxlength:"密碼至多為32個(gè)字符",
},
},
});
//注冊(cè)表單驗(yàn)證
$("#registerForm").validate({
rules:{
username:{
required:true,//必填
minlength:3, //最少6個(gè)字符
maxlength:32,//最多20個(gè)字符
remote:{
url:"http://kouss.com/demo/Sharelink/remote.json",//用戶名重復(fù)檢查，別跨域調(diào)用
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,//自定義的規(guī)則
digits:true,//整數(shù)
}
},
//錯(cuò)誤信息提示
messages:{
username:{
required:"必須填寫(xiě)用戶名",
minlength:"用戶名至少為3個(gè)字符",
maxlength:"用戶名至多為32個(gè)字符",
remote: "用戶名已存在",
},
password:{
required:"必須填寫(xiě)密碼",
minlength:"密碼至少為3個(gè)字符",
maxlength:"密碼至多為32個(gè)字符",
},
email:{
required:"請(qǐng)輸入郵箱地址",
email: "請(qǐng)輸入正確的email地址"
},
confirm_password:{
required: "請(qǐng)?jiān)俅屋斎朊艽a",
minlength: "確認(rèn)密碼不能少于3個(gè)字符",
equalTo: "兩次輸入密碼不一致",//與另一個(gè)元素相同
},
phone_number:{
required:"請(qǐng)輸入手機(jī)號(hào)碼",
digits:"請(qǐng)輸入正確的手機(jī)號(hào)碼",
},
},
});
//添加自定義驗(yàn)證規(guī)則
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));
}, "手機(jī)號(hào)碼格式錯(cuò)誤");
});
