注册登录模板-CSDN博客

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/88079867

写个通用的注册登录页面

github地址：git@github.com:xiaoli0510/loginRegister.git

需求：1.实现登录和注册的切换；

2.phone/code/pwd的校验;

3.ajax的请求以及登录注册后的回调；

最终效果图如下：

文件结构如下：

index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>account</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <form class="form-login" id="formLogin">
        <h2>登录</h2>
        <div class="item">
           <img src="./img/user.png">
            <input type="text" placeholder="请输入手机号码" id="phone">
        </div>
        <div class="item">
                <img src="./img/pwd.png">
                <input type="password" placeholder="请输入6-16位数密码" minlength="6" maxlength="16" id="pwd">
        </div>
       <div class="btn-area clearfix">
            <button type="button" class="switch fr" id="switchReg">立即注册</button>
       </div>
        <button type="button" class="login" id="login">登录</button>
    </form>
    <form class="form-register  hide" id="formReg">
            <h2>注册</h2>
            <div class="item">
                    <img src="./img/user.png">
                    <input type="text" placeholder="请输入手机号码" id="phoneReg">
                    <button class="code-btn" id="codeBtn">获取验证码</button>
            </div>
            <div class="item">
                    <img src="./img/code.png">
                    <input type="text" placeholder="请输入6位数验证码" maxlength="6" id="codeReg">
            </div>
            <div class="item">
                    <img src="./img/pwd.png">
                    <input type="password" placeholder="请输入6-16位数密码" minlength="6" maxlength="16" id="pwdReg">
            </div>
           <div class="btn-area clearfix">
                <button type="button" class="switch fr" id="switchLogin">已有账号，立即登录</button>
           </div>
            <button type="button" class="register" id="register">注册</button>
        </form>
    <script type="text/javascript" src="./js/rem.js"></script>
    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

index.js代码

//切换到注册
$('#switchReg').click(function () {
    $('#formReg').removeClass('hide');
    $('#formLogin').addClass('hide');
})

//切换到注册
$('#switchLogin').click(function () {
    $('#formReg').addClass('hide');
    $('#formLogin').removeClass('hide');
})

//点击获取验证码
$('#codeBtn').click(function () {
    clickCodeBtn({
        phoneId: "phoneReg",
        codeBtnId: "codeBtn"
    }, countDown)
})

//注册
$("#register").click(function () {
    goRegister({
        phoneId: "phoneReg",
        codeId: "codeReg",
        pwdId: "pwdReg",
        submitBtnId: "register"
    })
});

//登录
$("#login").click(function () {
    goLogin({
        phoneId: "phone",
        pwdId: "pwd",
        submitBtnId: "login"
    });
})

//封装登录函数  参数是{phoneId:'',pwdId:'',submitBtnId:''} sucCallback=>登录成功回调 failCallback=>登录失败回调
function goLogin(obj, sucCallback, failCallback) {
    if (!obj.phoneId || !obj.pwdId||!obj.submitBtnId) {
        alert('数据有误');
        return false;
    }
    var phone = $.trim($("#" + obj.phoneId).val()),
        pwd = $.trim($("#" + obj.pwdId).val()),
        isValidate = validatePhone({
            "phoneId": obj.phoneId
        });
    if (!isValidate) {
        return false;
    }
    if (!pwd || pwd.length == 0) {
        alert("请输入密码");
        return false;
    }
    if (pwd.length < 6 || pwd.length > 16) {
        alert("请输入6-16位密码");
        return false;
    }
    //发送请求 
    //参数
    var params = {
        phone: phone,
        pwd: pwd
    };
    //此处模拟返回数据
    var res = { "code": 1 };
    $("#" + obj.submitBtnId).attr("disabled", true);
    if (res.code == 1) {
        alert('登录成功');
        if (sucCallback) {
            sucCallback(res);
        }
    } else {
        alert('登录失败');
        if (failCallback) {
            failCallback(res);
        }
    }
    $("#" + obj.submitBtnId).attr("disabled", false);
}

// 封装注册函数  参数是{phoneId:'',pwdId:'',codeId:'',submitBtnId:''}  sucCallback=>注册成功回调 failCallback=>注册失败回调
function goRegister(obj, sucCallback, failCallback) {
    if (!obj.phoneId || !obj.pwdId || !obj.codeId||!obj.submitBtnId) {
        alert('数据有误');
        return false;
    }
    var phone = $.trim($("#" + obj.phoneId).val()),
        pwd = $.trim($("#" + obj.pwdId).val()),
        code = $.trim($("#" + obj.codeId).val()),
        isValidate = validatePhone({
            "phoneId": obj.phoneId
        });
    if (!isValidate) {
        return false;
    }
    if (code.length < 1) {
        alert("请输入手机验证码");
        return false;
    }
    if (code.length != 6) {
        alert("请输入6位数验证码");
        return false;
    }
    if (pwd.length < 1) {
        alert("请输入密码");
        return false;
    }
    if (pwd.length < 6 || pwd.length > 16) {
        alert("请输入6-16位密码");
        return false;
    }
    //请求发送手机验证码接口 
    //参数
    var params = {
        phone: phone,
        pwd: pwd,
        code: code
    };
    //此处是模拟返回数据
    var res = { "code": 1 };
    $("#" + obj.submitBtnId).attr("disabled", true);
    if (res.code == '1') {
        alert('注册成功');
        if (sucCallback) {
            sucCallback();
        }
    } else {
        alert('注册失败');
        if (failCallback) {
            failCallback(res.errorMsg);
        }
    }
    $("#" + obj.submitBtnId).attr("disabled", false);
}

//点击获取验证码倒计时 参数是obj(phoneId codeBtnId) sucCallback=>发送验证码成功回调 failCallback=>发送验证码失败回调
function clickCodeBtn(obj, sucCallback, failCallback) {
    var isValidate = validatePhone({
        "phoneId": obj.phoneId
    }),
        phone = validatePhone({
            "phoneId": obj.phoneId
        });

    if (!isValidate) {
        return false;
    }
    //请求发送验证码接口
    //参数
    var params = {
        phone: phone
    };
    //此处是模拟返回数据
    var res = { "code": 1 };
    if (res.code == '1') {
        if (sucCallback) {
            sucCallback(obj);
        }
    } else {
        alert('发送验证码失败');
        if (failCallback) {
            failCallback();
        }
    }
}

//点击获取验证码倒计时 参数是{codeBtnId:''}
function countDown(obj) {
    var countDown = 60;
    $('#' + obj.codeBtnId).attr('disabled', true).html(countDown + 's');
    var countInterval = setInterval(function () {
        countDown--;
        $('#' + obj.codeBtnId).html(countDown + 's');
        if (countDown == 0) {
            $('#' + obj.codeBtnId).attr('disabled', false).html('重新获取');
            clearInterval(countInterval);
        };
    }, 1000);
}

//验证手机号码是否正确 参数是{phoneId:''} 
function validatePhone(obj) {
    var phone = $.trim($("#" + obj.phoneId).val());
    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
    if (!phone || phone.length == 0) {
        alert("请输入手机号码");
        return false;
    } else {
        if (!phoneReg.test(phone)) {
            alert("请输入有效的手机号码");
            return false;
        }
    }
    return true;
}

index.css代码

.hide{
    display: none;
}
form {
    width: 86%;
    margin: 10% auto;
    max-width: 400px;
    text-align: center;
}

h2 {
    line-height: .8rem;
    font-size: .3rem;
    font-weight: 600;
}
.item {
    width: 100%;
    margin-bottom: 4%;
    line-height: .5rem;
    height: .5rem;
    position: relative;
}
img {
    width: .3rem;
    left: .1rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
input{
    width: 100%;
    height: 100%;
    padding-left: .45rem;
}
.btn-area{
    margin: 5% 0;
}
.login,.register {
    width: 100%;
    height: .4rem;
    line-height: .4rem;
    background: #32bd40;
    color: #fff;
    border-radius: .05rem;
    font-size: .2rem;
    cursor: pointer;
}
.switch{
    cursor: pointer;
}
.switch:hover{
    color: #32bd40;
}
.code-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #32bd40;
    line-height: .5rem;
    height: .5rem;
    color: #fff;
    cursor: pointer;
}