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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录页面：

1.html代码

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

</head>
<body class="bg">
<div id="container">
    <div class="box">
        <h2 id="denglu">登录</h2>

        <div class="input_box">
            <input type="text" id="uname" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input type="password" id="upass" placeholder="请输入密码">
        </div>
        <div class="error" id="error_box"><br></div>
        <div class="input_box">
            <button id="login" type="submit" onclick="fnLogin()">登录</button>
            <button id="cancel" type="cancel" onclick="fnLogin()">取消</button>
        </div>

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

2.js代码

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 = "亲，用户名至少6-20位哦";
        return;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首字母不能是数字";
        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 = "用户名只能为字母或数字";
            return;
        }
    }

// upass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
    oError.innerHTML = "亲，密码至少6-20位哦";
    return;
    }
    window.alert("用户登录成功！")
}

3.css代码

*{
    margin: 0;
    padding: 0;
    font-family:"华文新魏";
    font-size: 12px;
}
.bg {
    background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509547320024&di=5e67e4bd86013c364815958d31c9766d&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a7cf554bfe79000001bf7250f6c3.jpg%402o.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.box {
    border: 1px solid #cccccc;
    position: absolute;
    top: 42%;
    left: 50%;
    height: 320px;
    width: 390px;
    background: #FFF;
    margin-left: -195px;
    margin-top: -160px;

}

h2 {
    font-size: 16px;
    text-align: center;
    height: 46px;
    font-weight:normal;
    color:#666;
    line-height: 46px;
    backgroud:#f7f7f7;
    overflow: hidden;
    border-bottom:solid 1px #ddd;
}
#denglu{


    font-size: 35px;

}
#uname{
    font-size: 20px;
}
#upass{
    font-size: 20px;
}
.input_box {
    width: 350px;
    padding-bottom: 15px;
    margin:0 auto;
    overflow:hidden;
}

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

}

button {
    align-content: center;
    font-family: 华文新魏;
    font-size: 31px;
    text-align: center;
    background: #cccccc;
    height: 40px;
    width: 300px;
}
#error_box{
    font-family: "华文楷体";
    font-size: 29px;

}

登录页面如图：

注册页面：

1.html代码

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

</head>
<body><body class="bg">
<div id="container">

<div class="box">
    <h2 id="zhuce">注册</h2>

    <div class="input_box">
        <input type="text" id="uname" placeholder="请输入用户名">

    </div>
    <div class="input_box">
        <input type="phone" id="phone" type="text" placeholder="手机号">
    </div>
    <div class="input_box">
        <input type="password" id="pass" placeholder="请输入密码">

    </div>
    <div class="input_box">
        <input type="password" id="password" placeholder="请再次输入密码">
    </div>
    <<div class="error" id="error_box"><br></div>

    <div class="input_box">
        <button id="register" onclick="fnLogin()">注册</button>
    </div>
</div>

</body>
</html>

2.js代码

function fnLogin() {
    var oUname = document.getElementById("name");
    var oUphone = document.getElementById("phone");
    var oUpass = document.getElementById("pass");
    var oUpasscom = document.getElementById("passcom");
    var oError = document.getElementById("error_box");
    var isError = true;
    oError.innerHTML = '<br>';
    //
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "name:6-20位";
        isError = false;
        return;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "first letter.";
        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(0) < 97) || (oUname.value.charCodeAt(0) > 122)) {
            oError.innerHTML = "only letter or number";
            return;
        }

    }

    if (oUphone.value.length != 11) {
        oError.innerHTML = "error phone";
        return;
    }

    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "password:6-20";
        return;
    }

    if (oUpass.value != oUpasscom.value) {
        oError.innerHTML = "sorry,the password is false";
        return
    }


    window.alert("注册成功！")
}

注册页面如图：

posted on 2017-11-01 19:36 094吴嘉绿阅读(181) 评论(0) 编辑收藏举报