<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../JS/jquery-1.12.4.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
body{
background: -webkit-linear-gradient(right,lightgoldenrodyellow,honeydew,papayawhip,antiquewhite);
}
#first{
width: 1400px;
height: 700px;
box-shadow: black inset 0px -2px 10px;
/*
inset:阴影向内，不加默认向外
box-shadow: black inset 0px -2px 10px;
0px :左右
-2px:上下
10px:数值越大越模糊
*/
}
form{
text-align: center;
}
div>p{
text-align: center;
}
form>input{
width: 410px;
height: 40px;
margin-top: 12px;
}
form>input:nth-of-type(2){
width: 230px;
height: 40px;
}
form>input:nth-of-type(3){
width: 170px;
height: 44px;
margin-left: 10px;
background: -webkit-linear-gradient(left,palegoldenrod,papayawhip,pink);
color: pink;
border: none;
}
form>p{
padding-top: 12px;
}
div>p{
margin-top: 12px;
}
span{
color: #069dd5;
}
form>input:last-of-type{
background: -webkit-linear-gradient(right,papayawhip,palegoldenrod,paleturquoise);
color: #6bbb79;
border: none;
}
</style>
</head>
<body>
<img src="../img/1号店logo.jpg">
<div id="first">
<form action="#" method="post">
<h1>1号店注册</h1>
<input type="text" placeholder="手机号码" required id="phone" pattern="^1[3456789][0-9]{9}"><br>
<input type="text" placeholder="验证码" id="pin"><input class="tableText" type="button" value="发送验证码">
<br>
<!--password:密码变成小黑点-->
<input type="password" placeholder="设置密码" id="pw" required pattern="[a-zA-z0-9]{6,10}"><br>
<input type="password" placeholder="确认密码" id="pwd"required><br>
<p>点击注册，表示同意1号店 <span>《服务协议》</span></p>
<input id="sub" type="submit" value="同意协议并注册">
</form>
<div>
<p>沪ICP备13044278号|合字B1.B2-20130004|营业执照</p>
<p>Copyright ©1号网上超市2007-2016,All Rights Reserved</p>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#sub").click(function () {
var phone = document.getElementById("phone")
if (phone.validity.valueMissing === true){
phone.setCustomValidity("手机号为空，怎么找回密码")
}else if (phone.validity.patternMismatch === true){
phone.setCustomValidity("格式都能输错")
} else {
phone.setCustomValidity("")
}
//密码
var pw = document.getElementById("pw")
if (pw.validity.valueMissing === true){
pw.setCustomValidity("密码不能为空")
}else if (pw.validity.patternMismatch === true){
pw.setCustomValidity("设置密码都不会,大小写a到z，0到9")
} else {
pw.setCustomValidity("")
}
//确认密码
var pwd = document.getElementById("pwd")
$pw = $(pw)
$pwd = $(pwd)
if (pwd.validity.valueMissing === true){
pwd.setCustomValidity("确认密码")
}else if (pwd.validity.patternMismatch === true){
pwd.setCustomValidity("设置密码都不会设置,大小写a到z，0到9")
}else {
pwd.setCustomValidity("")
}
if ($pw.val()!=$pwd.val()){
pwd.setCustomValidity("密码不一致")
} else {
pwd.setCustomValidity("")
}
})
$(".tableText").click(function () {
var minth = 60;//初始值
var mytime;//定时函数
function fn() {
minth =--minth;
if (minth>0){
$(".tableText").val("("+minth+")后重发")
}else {
clearInterval(mytime)/*清除定时函数*/
minth = 60;//归0
$(".tableText").val("发送验证码")
}
}
clearInterval(mytime)/*清除定时函数*/
mytime = setInterval(fn,1000)
})
})
</script>
</html>