完成登录与注册页面的前端 - 068冯斐然

公告

完成登录与注册页面的前端

完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="../static/css/gg.css" rel="stylesheet" type="text/css">
    <script src="../static/js/gg.js"></script>

</head>
<body>
    <div class="box">
        <h2>Login</h2>

        <div class="input_box">
            <input type="text" id="uname" placeholder="Your Name">
        </div>
        <div class="input_box">
            <input type="password" id="upass" placeholder="password">
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">Enter</button>
        </div>

    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
    font-size: 12px;
}

.box {
    border: 1px solid #cccccc;
    position: absolute;
    top: 42%;
    left: 50%;
    height: 320px;
    width: 390px;
    background: grey;
    margin-left: -195px;
    margin-top: -160px;
}

h2 {
    font-size: 28px;
    text-align: center;
    height: 46px;
    font-weight:normal;
    color:black;
    line-height: 46px;
    backgroud:write;
    overflow: hidden;
    border-bottom:solid 1px #ddd;
}
.input_box {
    width: 350px;
    padding-bottom: 15px;
    margin:0 auto;
    overflow:hidden;
}

input {
    align-self: center;
    height: 30px;
    width: 280px;

}

button {
    align-content: center;
    font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
    font-size: 20px;
    text-align: center;
    background: wheat;
    height: 40px;
    width: 300px;
}

body {
    width: 100%;
    height:100%;
    background: black;
}

function fnLogin() {
    var oUname = document.getElementById("uname");
    var oUpass = document.getElementById("upass");
    var oError = document.getElementById("error_box");

    oError.innerHTML = "<br>"
    // uname
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "your Name：6-20";
        return;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "first number";
        return;
    } else for (var i = 0; i < oUname.value.length; i++) {
        if ((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57) && (oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "letters or numbers";
            return;
        }
    }

// upass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
    oError.innerHTML = "password：6-20位";
    return;
    }
    window.alert("Login successful！")
}

注册页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Registration</title>
    <link rel="stylesheet" type="text/css" href="../static/css/ww.css">
    <script src="../static/js/ww.js"></script>
</head>
<body>
<div id="container">
    <div id="header"><h2 align="center">Registration</h2></div>
    <div id="content">
        <form>
            <p align="center">
            <p align="center">
                <input type="text" name="user" id="user" placeholder="Username">
            </p>
            <p align="center">
            <p align="center">
                <input type="password" name="pass" id="pass" placeholder="Password">
            </p>
            <p align="center">
            <p align="center">
                <input type="password" name="again" id="again" placeholder="Input again">
            </p>
            <p align="center">
                <input type="radio" name="r1" id="r1" value="stu">student
                <input type="radio" name="r2" id="r2" value="tea">teacher
            </p>
            <div id="error_box"><br></div>
            <p align="center">
                <input type="button" value="registration" onclick="fnRegistration()">
            </p>

        </form>
    </div>
    <div id="footer"><p align="right">版权FFR</p></div>
</div>

</body>
</html>

*{
    margin: 0;
    padding: 0;
    font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
    font-size: 12px;
}

.box {
    border: 1px solid #cccccc;
    position: absolute;
    top: 42%;
    left: 50%;
    height: 320px;
    width: 390px;
    background: grey;
    margin-left: -195px;
    margin-top: -160px;
}

h2 {
    font-size: 28px;
    text-align: center;
    height: 46px;
    font-weight:normal;
    color:black;
    line-height: 46px;
    backgroud:write;
    overflow: hidden;
    border-bottom:solid 1px #ddd;
}
.input_box {
    width: 350px;
    padding-bottom: 15px;
    margin:0 auto;
    overflow:hidden;
}

input {
    align-self: center;
    height: 30px;
    width: 280px;

}

button {
    align-content: center;
    font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
    font-size: 20px;
    text-align: center;
    background: wheat;
    height: 40px;
    width: 300px;
}

body {
    width: 100%;
    height:100%;
    background: white;
}

function fnRegistration() {
    var uSer = document.getElementById("user");
    var pAss = document.getElementById("pass");
    var aGain = document.getElementById("again");
    var oError = document.getElementById("error_box");

    oError.innerHTML = "<br>";

    // 验证用户名
    if (uSer.value.length < 6 || uSer.value.length > 20) {
        oError.innerHTML = "用户名只能6-20位";
        return
    } else if ((uSer.value.charCodeAt(0) >= 48) && (uSer.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首字母不能是数字";
        return
    } else for (var i = 0; i < uSer.value.length; i++) {
        if ((uSer.value.charCodeAt(i) < 48) || (uSer.value.charCodeAt(i) > 57) && (uSer.value.charCodeAt(i) < 97) || (uSer.value.charCodeAt(i) > 122)) {
            oError.innerHTML = "用户名只能由数字和字母组成";
            return
        }
    }

    // 验证密码
    if (pAss.value.length < 6 || pAss.value.length > 20) {
        oError.innerHTML = "密码只能6-20位";
        return
    }

    // 验证再次输入的密码
    if (aGain.value != pAss.value) {
        oError.innerHTML = "密码不一致";
        return
    }
    // 验证弹框
    window.alert("注册成功！")
}

posted on 2017-10-31 18:52 068冯斐然阅读(171) 评论(0) 收藏举报

刷新页面返回顶部

因陀罗

公告