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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎你,请先登陆!</title>
    <script type="text/javascript" src="../static/jsp/lx.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/lx.css">
</head>
<body>
<div class="div" id="container">
    <div id="header" >
        <h2 class="h">登陆</h2>
    </div>
    <div id="content">
            <p class="p">账号:
                <input id="uname" type="text" placeholder="请输入用户名">
            </p>
            <p class="p">密码:
                <input id="upass" type="password" >
            </p>
            <div id="error_box"><br>
            </div>
            <button  onclick="fnLogin()">登陆</button>
            &nbsp&nbsp&nbsp
            <input type="button" name="regist" value="注册">
    </div>
    <div>
        <i>版权信息@</i>
    </div>
</div>

</body>
</html>
.div {
    border: 5px solid #cccc22;
    width: 400px;
    text-align: center;
}
.p{
    font-family:宋体;
}
.h{
    font-family: 华文宋体;
}
function fnLogin() {
    var oUname = document.getElementById("uname")
    var oUpass = document.getElementById("upass")
    var oError = document.getElementById("error_box")
    if (oUname.value.length > 20 || oUname.value.length < 6) {
        oError.innerHTML = "请输入6-20位字符"
    }

    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "请输入6-20位字符"
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <script src="wjq.js"></script>
    <link rel="stylesheet" type="text/css" href="wjq.css">
</head>
<body>
<div class="div" id="container">
    <div id="header" >
        <h2 class="h">注册</h2>
    </div>
    <div id="content">
            <p class="p">账号:
                <input id="uname" type="text" placeholder="请输入用户名">
            </p>
            <p class="p">密码:
                <input id="upass" type="password" >
            </p>
            <p class="p">再次输入密码:
                <input id="upass2" type="password" >
            </p>
            <div id="error_box"><br>
            </div>
    </div>
    <div>
        <button  onclick="register()">注册</button>
    </div>
    </div>
    <div>
        <i>版权信息@</i>
    </div>


</body>
</html>
function register() {
    var oUname = document.getElementById("uname")
    var oError = document.getElementById("error_box")
    var oUpass = document.getElementById("upass")
    var oUpass2 = document.getElementById("upass2")

    oError.innerHTML = "<br>"
    if (oUname.value.length < 6 || oUname.value.length > 20) {
        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;
        }
    }
    // oUpass
    if (oUpass.value.length > 20 || oUpass.value.length < 6) {
        oError.innerHTML = "密码必须在6-20之间";
        return;
    } else if (oUpass.value!= oUpass2.value) {
       oError.innerHTML = "两次密码不一致"
        return;
    }
    window.alert("注册成功!")
}

 

 

posted @ 2017-11-01 21:01  007王俊祺  阅读(249)  评论(0编辑  收藏  举报