找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发登陆注册组件

2018-07-06 分类：教程 阅读(539) 评论(0)

前端开发中图标怎么去除？|微信前端开发有哪些书？|web前端开发工具ide

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>怎么写前端开发文档:登录 注册</title>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }
        body,
        button {
            font-family: “Microsoft YaHei”, Arial, sans-serif;
            letter-spacing: 1px;
        }
        ul {
            list-style: none;
        }
        .sign-wrap {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 128;
        }
        .sign-content {
            width: 500px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -250px 0 0 -250px;
            border-radius: 6px;
            padding: 15px;
        }
        .sign-head ul {
            padding: 1px 0 0 38px;
            border-bottom: 1px solid #dbdbd9;
        }
        .sign-head ul li {
            display: inline-block;
            padding: 6px 12px;
            border: 1px solid #dbdbd9;
            background: #f2f1ef;
            color: #504c4d;
            position: relative;
            top: 1px;
            margin-right: 10px;
        }
        .sign-head ul li:hover {
            cursor: pointer;
        }
        .sign-head ul .on {
            background: #fff;
            border-bottom-color: #fff;
        }
        .sign-regitar {
            display: none;
        }
        .sign-login,
        .sign-regitar {
            padding-top: 20px;
            width: 70%;
            margin: 0 auto;
        }
        .sign-wrap-block {
            padding: 10px 0;
        }
        .sign-content input[type=”text”],
        .sign-content input[type=”password”],
        .sign-content input[type=”number”] {
            padding: 6px 0;
            text-indent: 6px;
            border-radius: 2px;
            border: 1px solid #b7b7b7;
        }
        .sign-content input[type=”text”]:focus,
        .sign-content input[type=”password”]:focus,
        .sign-content input[type=”number”]:focus,
        .sign-content input.error-active {
            outline: none;
            border-color: #ff6000;
        }
        .sign-content input.success-active {
            border-color: #51C37F;
        }
        .sign-content .sign-login input[type=”text”],
        .sign-content .sign-login input[type=”password”] {
            width: 80%;
        }
        .sign-content .sign-regitar input[type=”text”],
        .sign-content .sign-regitar input[type=”password”],
        .sign-content .sign-regitar input[type=”number”] {
            width: 76%;
        }
        .sign-login label span {
            display: inline-block;
            width: 14%;
        }
        .sign-regitar label span {
            display: inline-block;
            width: 22%;
        }
        .sign-login-btn {
            width: 80%;
            padding: 6px 0;
            font-size: 16px;
            font-family: “Microsoft YaHei”, Arial, sans-serif;
            background: #ff6100;
            color: #fff;
            border-radius: 2px;
            border: 1px solid #d45a0f;
            margin: 10px 0 10px 14%;
        }
        .sign-register-btn-wrap {
            width: 80%;
            margin-left: 14%;
            text-align: center;
            font-size: 12px;
            margin-bottom: 10px;
        }
        .sign-register-btn-wrap button {
            border: 0;
            background: transparent;
            border-right: 1px solid #E65600;
            margin-right: 7px;
            color: #E65600;
        }
        .sign-register-btn-wrap a {
            text-decoration: none;
            color: #E65600;
        }
        .sign-content .sign-regitar input.sign-regitar-moddle-btn {
            width: 40%;
        }
        .sign-regitar-set-verificat {
            padding: 5px;
            margin-left: 20px;
            background: #ff6100;
            border: 1px solid #E65600;
            border-radius: 2px;
            color: #fff;
        }
        .sign-regitar-set-verificat:hover,
        .sign-regitar-img-verificat:hover {
            cursor: pointer;
        }
        .sign-regitar-img-verificat {
            height: 30px;
            vertical-align: middle;
            margin-left: 20px;
        }
        .sign-login-error-hint,
        .sign-regitar-error-hint {
            color: #f00;
            text-shadow: 1px 1px 1px #ddd;
        }
        .sign-login-error-hint {
            margin-left: 14%;
        }
        .sign-regitar-error-hint {
            margin-left: 22%;
        }
        .sign-user-agreement {
            margin: 18px 0 6px 22%;
            font-size: 12px;
        }
        .sign-to-register {
            font-size: 12px;
        }
        .sign-agreement {
            position: relative;
            top: 2px;
        }
        .sign-user-agreement a {
            color: #ff6100;
            text-decoration: none;
        }
        .sign-register-btn {
            padding: 8px 20px;
            background: #ff6100;
            color: #fff;
            border: 1px solid #E65600;
            border-radius: 2px;
            font-size: 16px;
            margin: 0 10px 20px 22%;
        }
        .sign-quick-login {
            text-decoration: none;
            color: #ff6100;
        }
        .sign-register-wrap {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id=”sign-wrap” class=”sign-wrap”>
        <div class=”sign-content”>
            <!– sign-head –>
            <div class=”sign-head”>
                <ul>
                    <li type=”button” class=”sign-login-tit on”>登陆</li>
                    <li type=”button” class=”sign-register-tit”>注册</li>
                </ul>
            </div>
            <!– login –>
            <div class=”sign-login”>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>邮箱:</span>
                        <input type=”text” name=”sign-login-email” id=”sign-login-email” class=”sign-login-email” placeholder=”邮箱”>
                    </label>
                </div>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>密码:</span>
                        <input type=”password” name=”sign-login-password” id=”sign-login-password” class=”sign-login-password” placeholder=”密码”>
                    </label>
                </div>
                <div class=”sign-login-error-hint”>&nbsp;</div>
                <button class=”sign-login-btn”>登陆</button>
                <div class=”sign-wrap-btn sign-register-btn-wrap”>
                    <button type=”button” id=”sign-to-register” class=”sign-to-register”>立即注册</button>
                    <a class=”sign-forget-password” href=”#”>忘记密码</a>
                </div>
            </div>
            <!– regitar –>
            <div class=”sign-regitar”>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>电子邮箱:</span>
                        <input type=”text” name=”sign-regitar-email” id=”sign-regitar-email” class=”sign-regitar-email” placeholder=”请输入邮箱”>
                    </label>
                </div>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>登陆密码:</span>
                        <input type=”password” name=”sign-regitar-password” id=”sign-regitar-password” class=”sign-regitar-password” placeholder=”6-16位字符”>
                    </label>
                </div>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>确认密码:</span>
                        <input type=”password” name=”sign-regitar-affirm-password” id=”affirm-password” class=”sign-regitar-affirm-password” placeholder=”请再次输入密码”>
                    </label>
                </div>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>手机号码:</span>
                        <input type=”number” name=”sign-regitar-tel” id=”sign-regitar-tel” class=”sign-regitar-tel” placeholder=”请输入手机号”>
                    </label>
                </div>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>短信验证:</span>
                        <input type=”number” name=”sign-regitar-note” id=”sign-regitar-note” class=”sign-regitar-note sign-regitar-moddle-btn” placeholder=”填写短信回执号”>
                    </label>
                    <button type=”button” class=”sign-regitar-set-verificat”>发送验证码</button>
                </div>
                <div class=”sign-wrap-block”>
                    <label>
                        <span>验证号码:</span>
                        <input type=”text” name=”sign-regitar-verificat-code” id=”sign-regitar-verificat-code” class=”sign-regitar-verificat-code sign-regitar-moddle-btn”
                         placeholder=”填写验证码”>
                    </label>
                    <img class=”sign-regitar-img-verificat” src=”” alt=”验证码” title=”验证码”>
                </div>
                <div class=”sign-regitar-error-hint”>&nbsp;</div>
                <div class=”sign-user-agreement”>
                    <label>
                        <input type=”checkbox” name=”sign-agreement” id=”sign-agreement” class=”sign-agreement” checked=”checked”>已阅读并同意
                        <a href=”#”>用户协议</a>
                    </label>
                </div>
                <div class=”sign-wrap-btn sign-register-wrap”>
                    <button type=”button” id=”sign-register-btn” class=”sign-register-btn”>确定注册</button>已经注册?
                    <a class=”sign-quick-login” href=”#”>快速登陆</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        var sign = {};
        // 获取dom
        sign.getDom = function () {
            var signWrap = document.getElementById(‘sign-wrap’) || null,
                loginTit = signWrap.getElementsByClassName(‘sign-login-tit’)[0] || null,
                regitarTit = signWrap.getElementsByClassName(‘sign-register-tit’)[0] || null,
                login = signWrap.getElementsByClassName(‘sign-login’)[0] || null,
                regitar = signWrap.getElementsByClassName(‘sign-regitar’)[0] || null,
                loginEmail = signWrap.getElementsByClassName(‘sign-login-email’)[0] || null,
                loginPass = signWrap.getElementsByClassName(‘sign-login-password’)[0] || null,
                loginBtn = signWrap.getElementsByClassName(‘sign-login-btn’)[0] || null,
                regitarEmail = signWrap.getElementsByClassName(‘sign-regitar-email’)[0] || null,
                regitarPass = signWrap.getElementsByClassName(‘sign-regitar-password’)[0] || null,
                regitarBtn = signWrap.getElementsByClassName(‘sign-login-btn’)[0] || null,
                regitarAffirmPassword = signWrap.getElementsByClassName(‘sign-regitar-affirm-password’)[0] || null,
                regitarTel = signWrap.getElementsByClassName(‘sign-regitar-tel’)[0] || null,
                regitarNote = signWrap.getElementsByClassName(‘sign-regitar-note’)[0] || null,
                regitarSetVerificat = signWrap.getElementsByClassName(‘sign-regitar-set-verificat’)[0] || null,
                regitarVerificatCode = signWrap.getElementsByClassName(‘sign-regitar-verificat-code’)[0] || null,
                regitarImgVerificat = signWrap.getElementsByClassName(‘sign-regitar-img-verificat’)[0] || null,
                signAgreement = signWrap.getElementsByClassName(‘sign-agreement’)[0] || null,
                registerBtn = signWrap.getElementsByClassName(‘sign-register-btn’)[0] || null;
            registerErrorTint = signWrap.getElementsByClassName(‘sign-regitar-error-hint’)[0] || null;
            loginErrorTint = signWrap.getElementsByClassName(‘sign-login-error-hint’)[0] || null;
            sign.dom = {
                “signWrap”: signWrap,
                “loginTit”: loginTit,
                “regitarTit”: regitarTit,
                “login”: login,
                “regitar”: regitar,
                “loginEmail”: loginEmail,
                “loginPass”: loginPass,
                “loginBtn”: loginBtn,
                “regitarEmail”: regitarEmail,
                “regitarPass”: regitarPass,
                “regitarBtn”: regitarBtn,
                “regitarAffirmPassword”: regitarAffirmPassword,
                “regitarTel”: regitarTel,
                “regitarNote”: regitarNote,
                “regitarSetVerificat”: regitarSetVerificat,
                “regitarVerificatCode”: regitarVerificatCode,
                “regitarImgVerificat”: regitarImgVerificat,
                “signAgreement”: signAgreement,
                “registerBtn”: registerBtn,
                “registerErrorTint”: registerErrorTint,
                “loginErrorTint”: loginErrorTint
            };
        };
        // tab选项栏
        sign.tab = function () {
            sign.dom.loginTit.onclick = function () {
                sign.dom.regitarTit.className = “login-tit”;
                this.className = “login-tit on”;
                sign.dom.login.style.display = “block”;
                sign.dom.regitar.style.display = “none”;
            }
            sign.dom.regitarTit.onclick = function () {
                sign.dom.loginTit.className = “regitar-tit”;
                this.className = “regitar-tit on”;
                sign.dom.regitar.style.display = “block”;
                sign.dom.login.style.display = “none”;
            }
        }
        // 显示
        sign.show = function (state) {
            if (state === 0) { // 登陆
                sign.dom.regitarTit.className = “regitar-tit”;
                sign.dom.loginTit.className = “login-tit on”;
                sign.dom.login.style.display = “block”;
                sign.dom.regitar.style.display = “none”;
            } else { // 注册
                sign.dom.loginTit.className = “login-tit”;
                sign.dom.regitarTit.className = “regitar-tit on”;
                sign.dom.regitar.style.display = “block”;
                sign.dom.login.style.display = “none”;
            }
            sign.dom.signWrap.style.display = “block”;
        }
        // 隐藏
        sign.hide = function () {
            sign.dom.signWrap.style.display = “none”;
        }
        // 登录
        sign.login = function () {
            sign.dom.loginEmail.onblur = function () {
                if (!sign.dom.loginEmail || !sign.isEmail(sign.dom.loginEmail.value)) {
                    sign.dom.loginErrorTint.innerHTML = “请输入正确的邮箱！”;
                    sign.dom.loginEmail.className = “sign-login-email error-active”;
                    return;
                } else {
                    sign.dom.loginErrorTint.innerHTML = “”;
                    sign.dom.loginEmail.className = “sign-login-email success-active”;
                }
            }
            sign.dom.loginPass.onblur = function () {
                if (!sign.dom.loginPass || !sign.dom.loginPass.value) {
                    sign.dom.loginErrorTint.innerHTML = “请输入密码！”;
                    sign.dom.loginPass.className = “sign-login-email error-active”;
                    return;
                } else {
                    sign.dom.loginErrorTint.innerHTML = “”;
                    sign.dom.loginPass.className = “sign-login-email success-active”;
                }
            }
            sign.dom.loginBtn.onclick = function () {
                sign.ajax(“/user/login/index.html?random=” + Math.round(Math.random() * 100) + “&loginName=” + sign.dom.loginEmail.value + “&password=” + sign.dom.loginPass.value + “&longLogin=0”, function (call) {
                    if (call != null) {
                        switch (call.resultCode) {
                            case -1:
                                sign.dom.loginErrorTint.innerHTML = “用户名或密码错误”;
                                break;
                            case -2:
                                sign.dom.loginErrorTint.innerHTML = “此ip登录频繁，请2小时后再试”;
                                break;
                            case -3:
                                sign.dom.loginErrorTint.innerHTML = “”;
                                if (call.errorNum == 0) {
                                    sign.dom.loginErrorTint.innerHTML = “此ip登录频繁，请2小时后再试”;
                                } else {
                                    sign.dom.loginErrorTint.innerHTML = “用户名或密码错误，您还有” + call.errorNum + “次机会”;
                                }
                                break;
                            case -4:
                                sign.dom.loginErrorTint.innerHTML = “您的浏览器还未开启COOKIE,请设置启用COOKIE功能”;
                                break;
                            case 1:
                                console.log(location.search.match(“forwardUrl”));
                                console.log(location.search.split(‘=’)[1] !== “”);
                                if (location.search.match(“forwardUrl”) && location.search.split(‘=’)[1] !== “”) {
                                    window.location.href = “http://” + window.location.host + “/” + location.search.split(‘=’)[1];
                                } else if (location.search.match(“forwardUrl”) && location.search.split(‘=’)[1].trim() == “”) {
                                    window.location.href = “http://” + window.location.host + “/”;
                                } else {
                                    window.location.href = “http://” + window.location.host + “/”;
                                }
                                break;
                            case 2:
                                sign.dom.loginErrorTint.innerHTML = “账户出现安全隐患被冻结，请尽快联系客服。”;
                                break;
                            case -404:
                                sign.dom.loginErrorTint.innerHTML = “系统升级中，暂停登录”;
                                break;
                        }
                    }
                });
            }
        }
        // 注册
        sign.regitar = function () {
            sign.dom.regitarEmail.onblur = function () {
                if (!sign.dom.regitarEmail || !sign.isEmail(sign.dom.regitarEmail.value)) {
                    sign.dom.registerErrorTint.innerHTML = “请输入正确的邮箱！”;
                    sign.dom.regitarEmail.className = “sign-regitar-email error-active”;
                    return;
                } else {
                    sign.dom.registerErrorTint.innerHTML = “”;
                    sign.dom.regitarEmail.className = “sign-regitar-email success-active”;
                }
            }
            sign.dom.regitarPass.onblur = function () {
                if (!sign.dom.regitarPass || !sign.dom.regitarPass.value) {
                    sign.dom.registerErrorTint.innerHTML = “请输入密码！”;
                    sign.dom.regitarPass.className = “sign-regitar-password error-active”;
                    return;
                } else {
                    sign.dom.registerErrorTint.innerHTML = “”;
                    sign.dom.regitarPass.className = “sign-regitar-password success-active”;
                }
            }
            sign.dom.regitarAffirmPassword.onblur = function () {
                if (!sign.dom.regitarAffirmPassword || !sign.dom.regitarAffirmPassword.value) {
                    sign.dom.registerErrorTint.innerHTML = “请输入确认密码！”;
                    sign.dom.regitarAffirmPassword.className = “sign-regitar-affirm-password error-active”;
                    return;
                } else if (sign.dom.regitarAffirmPassword.value !== sign.dom.regitarPass.value) {
                    sign.dom.registerErrorTint.innerHTML = “两次输入的密码不一致！”;
                    sign.dom.regitarAffirmPassword.className = “sign-regitar-affirm-password error-active”;
                    return;
                } else {
                    sign.dom.registerErrorTint.innerHTML = “”;
                    sign.dom.regitarAffirmPassword.className = “sign-regitar-affirm-password success-active”;
                }
            }
            sign.dom.regitarTel.onblur = function () {
                if (!sign.dom.regitarTel || !sign.dom.regitarTel.value) {
                    sign.dom.registerErrorTint.innerHTML = “请输入手机号码！”;
                    sign.dom.regitarTel.className = “sign-regitar-tel error-active”;
                    return;
                } else if (!sign.isMobile(sign.dom.regitarTel.value)) {
                    sign.dom.registerErrorTint.innerHTML = “请输入正确的手机号码！”;
                    sign.dom.regitarTel.className = “sign-regitar-tel error-active”;
                } else {
                    sign.dom.registerErrorTint.innerHTML = “”;
                    sign.dom.regitarTel.className = “sign-regitar-tel error-active success-active”;
                }
            }
            sign.dom.regitarNote.onblur = function () {
                if (!sign.dom.regitarNote || !sign.dom.regitarNote.value) {
                    sign.dom.registerErrorTint.innerHTML = “请填写短信验证码”;
                    sign.dom.regitarNote.className = “sign-regitar-note sign-regitar-moddle-btn error-active”;
                    return;
                } else {
                    sign.dom.registerErrorTint.innerHTML = “”;
                    sign.dom.regitarNote.className = “sign-regitar-note sign-regitar-moddle-btn success-active”;
                }
            }
            sign.dom.regitarVerificatCode.onblur = function () {
                if (!sign.dom.regitarVerificatCode || !sign.dom.regitarVerificatCode.value) {
                    sign.dom.registerErrorTint.innerHTML = “请填写验证码”;
                    sign.dom.regitarVerificatCode.className = “sign-regitar-verificat-code sign-regitar-moddle-btn error-active”;
                    return;
                } else {
                    sign.dom.registerErrorTint.innerHTML = “”;
                    sign.dom.regitarVerificatCode.className = “sign-regitar-verificat-code sign-regitar-moddle-btn success-active”;
                }
            }
            // sign.ajax(“/validate/validatePhone.html?random=”+Math.round(Math.random()*100),function (call) {
            // });
        }
        sign.ajax = function (url, call) {
            //先声明一个异步请求对象
            var xmlHttpReg = null;
            if (window.ActiveXObject) {//如果是IE
                xmlHttpReg = new ActiveXObject(“Microsoft.XMLHTTP”);
            } else if (window.XMLHttpRequest) {
                xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
            }
            //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
            if (xmlHttpReg != null) {
                xmlHttpReg.open(“get”, url, true);
                xmlHttpReg.send(null);
                xmlHttpReg.onreadystatechange = doResult; //设置回调函数
            }
            function doResult() {
                if (xmlHttpReg.readyState == 4) {//4代表执行完成
                    if (xmlHttpReg.status == 200) {//200代表执行成功
                        //将xmlHttpReg.responseText的值赋给ID为resText的元素
                        call(JSON.parse(xmlHttpReg.responseText));
                        sign.loginResponseText = xmlHttpReg.responseText;
                    }
                }
            }
        }
        // 是否是邮箱
        sign.isEmail = function (email) {
            var remail = /^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-zA-Z0-9]+)*)+\.[a-z]{2,6})$/i;
            return remail.test(email);
        }
        // 是否是手机
        sign.isMobile = function (m) {
            return /^0?1[3|4|5|8][0-9]\d{8}$/.test(m);
        }
        // 初始化
        sign.init = function () {
            sign.getDom();
            sign.tab();
            sign.login();
            sign.regitar();
        }
        sign.init();
    </script>
</body>
</html>

系统前端开发技术架构|前端开发要会的技术|web前端开发技术实训报告

赞(0)
前端开发者 » 前端开发登陆注册组件
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论