网站登录验证码获取、用户注册

最新推荐文章于 2024-10-17 09:40:47 发布

weixin_30815469

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量213

点赞数

文章标签： javascript python ViewUI

原文链接：http://www.cnblogs.com/labc/articles/5982562.html

版权

环境：Django 1.8

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>德购奥特莱斯</title>
    <link href="bootstrap335/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body{
            background:url(images/login_background.jpg);
        }
        .login_container {
            background-color: #FFFFFF;

            border-radius: 8px;
            border-style: solid;
            border-width: 1px;
            border-color: #DADADA;

            width:500px;
            position: absolute;
            top: 3%;
            left: 35%;
            box-shadow: #E3E3E3     10px 10px 10px;
        }

        .login_container .user_logo_area{
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
        }
        .login_form form{
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .login_form form >input{
            border-radius: 0px;
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 50px;
            margin-right: 50px;
            width: 80%;
            height: 50px;

            font-size: 20px;
        }
        .input-group> input,button {
            border-radius: 0px;
            /*margin-top: 20px;*/
            /*margin-bottom: 20px;*/
            margin-left: 50px;
            #margin-right: 50px;
            height: 50px;

            font-size: 20px;
        }
        .login_form form >button{
            border-radius: 0px;
            margin-top: 20px;
            margin-bottom: 80px;
            margin-left: 50px;
            margin-right: 50px;
            width: 80%;
            height: 50px;
        }
        .login_form form .register_forget_password_area{
            text-align: right;
            margin-right: 50px;
        }
    </style>
</head>
<body>

<div class="login_container">
    <div class="user_logo_area"  >
        <img src="site_packages/bootstrap-jquery-login-form/images/test/head_120.png" alt="" class="img-circle" >
    </div>
    <div style="color:red; text-align: center;">
        <span id="error_message"></span>
    </div>
    <div class="login_form">
        <form method="POST">{%csrf_token%}
            <input type="text" class="form-control" name="user_nickname" id="user_nickname" placeholder="用户名" required autofocus />
            <input type="text" class="form-control" name="cellphone_number" id="cellphone_number" placeholder="手机号"/>
            <div class="input-group">
                <input type="text" class="form-control" name="verification_code" id="verification_code"  placeholder="短信验证码" onblur="is_verification_code_valid();"/>
                <span class="input-group-btn">
                    <button id="request_verification_code_btn" class="btn btn-default" type="button" style="border-radius: 0px; margin-left: 0px; margin-right: 50px;" onclick="request_verification_code();">
                        获取验证码
                    </button>
                </span>
            </div>

            <input type="text" class="form-control" name="email" id="email"  placeholder="邮箱"/>
            <input type="password" class="form-control" name="password" id="password"  placeholder="密码"/>
            <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
            <hr>
            <div class="register_forget_password_area">
                <p>如果您已有账户，则可在此<a href="/user/login/">登录</a></p>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="bootstrap335/js/jquery-2.2.1.js"></script>
<script type="text/javascript" src="bootstrap335/js/bootstrap.js"></script>

<script type="text/javascript">
    document.getElementById('password').value="";
    document.getElementById('email').value="";
</script>
<script type="text/javascript">
    function request_verification_code(){
        var cellphone = document.getElementById('cellphone_number');
        document.getElmentById('request_verification_code_btn').disabled=true;
        $.ajax({
            type:'POST',
            url:'/user/register/request_verification_code/',
            dataType:'json',
            data:{cellphone_number:cellphone.value},
            success:function(data){
                var btn = document.getElementById('request_verification_code_btn');
                btn.innerHTML = data.wait_seconds+" 秒后重试"
                var intervalId = setInterval(function () {
                    var waitSecond = parseInt((/\d+/).exec(btn.innerHTML));//利用RegExp.exec（）方法，返回匹配的字符串内容
                    waitSecond--;//时间--
                    if (waitSecond >= 0) {//判断
                        btn.innerHTML=btn.innerHTML.replace(/\d+/, waitSecond) //利用string.repleace(RegExp,code)方法替换按钮value中数字，并返回替换结果
                        btn.disabled = true;//将按钮disabled值改为false
                    } else {
                        btn.innerHTML = '获取验证码';//将按钮value值改为同意
                        btn.disabled = false;//将按钮disabled值改为false
                        clearInterval(intervalId);//清除计时器
                    }
                }, 1000);   # 1000ms=1s

            },
            error:function(data){alert("请重新发送获取验证码请求")}
        });
    }
</script>
<script type="text/javascript">
    function is_verification_code_valid(){
        var verification_code_element = document.getElementById('verification_code');
        $.ajax({
            type:'POST',
            url:'/user/register/request_verification_code/is_valid/',
            dataType:'json',
            data:{verification_code:verification_code_element.value},
            success:function(data){
                if(data.valid == true){
                    // 验证码任然有效，则不进行任何提示
                    document.getElementById('error_message').innerHTML='';
                }
                else {
                    // 验证码任然有效，则提示：验证码失效，请重新获取
                    document.getElementById('error_message').innerHTML='验证码失效，请重新获取';
                    document.getElementById('request_verification_code_btn').innerHTML='获取验证码';
                    document.getElementById('request_verification_code_btn').disabled=false;
                }
            },
            error:function(data){}
        });
    }
</script>
</body>
</html>