一号店登录动态页面

<!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 &copy;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>
一号店登录动态页面

Supongo que te gusta
