博客

一个简单的注册页面

  • Post author:
  • Post category:其他


<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>服务平台系统注册</title>
    <style>
        #register {
            width: 540px;
            height: 407px;
            border: 1px solid hotpink;
            margin: 0 auto;
            margin-top: 20px;
        }

            #register .row {
                height: 50px;
                line-height: 50px;
                border-bottom: 1px dashed #ccc;
            }

                #register .row div {
                    float: left;
                    height: 50px;
                    line-height: 50px;
                }

                #register .row .left {
                    width: 30%;
                    text-align: right;
                }

                #register .row .right {
                    width: 70%;
                }

                    #register .row .right input {
                        width: 200px;
                        height: 25px;
                        border: 1px solid #ccc;
                        border-radius: 4px;
                        padding: 0px 4px;
                        margin-left: 10px;
                    }
                #register .row button {
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    margin: 0 auto;
                }

        #bg {
            width: 100%;
            height: 800px;
            background: black;
            opacity: 0.8;
            position: absolute;
            top: 0px;
            z-index: 10;
            display: none;
        }

        #msg-box {
            height: 100px;
            line-height: 100px;
            text-align: center;
            top: 240px;
            position: absolute;
            z-index: 100;
            display: none;
        }

        .loading {
            width: 100px;
            margin-left: 48%;
            background-image: url('loading.gif');
            background-repeat: no-repeat;
        }

        .success {
            width: 400px;
            margin-left: 34%;
            color: green;
            border: 2px solid green;
        }

        .error {
            width: 400px;
            margin-left: 34%;
            color: red;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <header class="header">
        <img src="/images/login/top_bg.png" alt="">
        <div class="headerBox">
            <div class="headerInnerBox">
            </div>
        </div>
    </header>
    <div id="register">
        <div class="row">
            <div class="left">
                手机:
            </div>
            <div class="right">
                <input type="text" name="phone" id="phone" placeholder="请输入手机号">
            </div>
        </div>
        <div class="row">
            <div class="left">
                密码:
            </div>
            <div class="right">
                <input type="password" name="password" id="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="row">
            <div class="left">
                确认密码:
            </div>
            <div class="right">
                <input type="password" name="rpassword" id="rpassword" placeholder="请再次输入密码">
            </div>
        </div>
        <div class="row">
            <div class="left">
            </div>
            <div class="right">
                <button id="savebtn">注册</button>
            </div>
        </div>
    </div>
    <div id="bg"></div>
    <div id="msg-box"></div>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script>
        $(function ($) {
            $('#phone').on("blur", function () {
                checkPhone($('#phone'));
            });
            $('#password').on("blur", function () {
                checkPwd($('#password'))
            });
            $('#rpassword').on("blur", function () {
                checkRpwd($('#rpassword'));
            });
            //选择注册按钮,绑定点击事件
            $('#register').on("click", "#savebtn", function () {
                reg();
            });
        });
        //设置一个标记
        var flag = false;

        //检测手机号
        function checkPhone(element) {
            var pattern = /^1(3|4|5|7|8|)\d{9}$/;
            //var element = $('#phone');
            if (pattern.test(element.val())) {
                element.css("border", "2px solid green");
                flag = true;
            } else {
                element.css("border", "2px solid red");
                flag = false;
            }
        }

        //检测密码
        function checkPwd(element) {
            var pattern1 = /^[1-9]{6,18}$/;
            var pattern2 = /^[a-z]{6,18}$/;
            var pattern3 = /^[A-Z]{6,18}$/;
            var pattern4 = /^[0-9a-zA-Z~!@@#$%^&*_-{6,18}]$/;
            //var element = $('#password');
            if (pattern1.test(element.val()) || pattern2.test(element.val()) || pattern3.test(element.val()) || pattern4.test(element.val())) {
                element.css("border", "2px solid green");
                flag = true;
            } else {
                element.css("border", "2px solid red");
                flag = false;
            }
        }

        //检测再次输入的密码
        function checkRpwd(element) {
            //var element = $('#rpassword');
            if (element.val() == $('#password').val() && element.val() != '' && element.val().length > 5 && element.val().length < 18) {
                element.css("border", "2px solid green");
                flag = true;
            } else {
                element.css("border", "2px solid red");
                flag = false;
            }
        }

        //注册
        //给提交按钮绑定一个点击事件,在点击事件中提交输入的内容
        var reg = function () {
            checkPhone($('#phone'));
            checkPwd($('#password'))
            checkRpwd($('#rpassword'));
            console.log(flag);
            if (flag) {
                loading();
                $.post("/User/Regist", {
                    "Phone": $('#phone').val(),
                    "ConfirmPassword": $('#rpassword').val(),
                    "Password": $('#password').val()
                },
                    function (data) {
                        console.log(data);
                        if (data.Code == 1) {
                            msg_box(data.Message);
                        } else {
                            msg_box(data.Message, false);
                        }
                    }, 'json');
            }
        }
        function loading() {
            $('#bg').css('display', 'block'); //显示背景
            $('#msg-box').css('display', 'block'); //显示消息框
            $('#msg-box').addClass("loading"); //显示加载中图片
        }

        function msg_box(msg, flag = true) {
            $('#bg').css('display', 'block'); //显示背景
            $('#msg-box').css('display', 'block').removeClass('loading'); //显示消息框,并移除加载中图片
            flag = flag ? 'success' : 'error';
            $('#msg-box').addClass(flag);
            $('#msg-box').html(msg);
            var sec = 3;
            $('#msg-box').html(msg + sec + '秒后跳转...');
            setInterval(function () {
                sec--;
                $('#msg-box').html(msg + sec + '秒后跳转...');
                if (sec == 0) {
                    location.href = '/User/Login';    //跳转页面
                }

            }, 1000);
        }
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/ningyouyou/p/11558228.html