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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索百科</title>
    <link rel="stylesheet" type="text/css" href="../static/css/20.css">
    <script src="../static/JS/JS30.js"></script>
</head>
<body style="background: burlywood">

<div class="box">
    <h1>登录</h1>
    <div class="input_box">
    帐号：<input id="name" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
    密码：<input id="pass" type="password" placeholder="请输入密码">
    </div>
    <div id="error_box"><br>
    </div>
    <div class="input_box">
        <button onclick="fnLogin()">login</button>
        <a class="link-forget cl-link-blue" href="get_password.html">忘记密码</a><br>

        <a href="注册yemian.html"><input type="button" class="btn btn-info" name="regist" value="新用户注册"></a>

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

CSS:

.box {
    border: 1px solid palevioletred;
    position: absolute;
    top: 25px;
    left: 40px;
    float: left;
    height: 300px;
     400px;

    margin-left: 30%;

} h1 { font-size: 28px; text-align: center; background: palevioletred; margin-top: auto; height: 40px;  400px; } .input_box { height: 60px;  80px; margin-left: 10%; } input { align-self: center; height: 30px;  300px; } button { align-content: center; font-size: 28px; text-align: center; background: #cccccc;  height: 40px;  300px; }

JS:

function fnLogin() {
    var oUname = document.getElementById("name");
    var oError = document.getElementById("error_box");
    var oUword = document.getElementById("pass");

    var isoError = true;

oError.innerHTML = "<br>"; if (oUname.value.length < 6 || oUname.value.length > 12) { oError.innerHTML = "用户名为6到12位"; 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; } } if ((oUword.value.length < 6) || (oUword.value.length > 20)) { oError.innerHTML = "password:6-20"; return; } window.alert("登录成功！！") }

注册HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" type="text/css" href="../static/css/20.css">
    <script src="../static/JS/注册.js"></script>
</head>
<body style="background: burlywood">
<div class="box">
    <h1>注册</h1>
    <div class="input_box">
        注册帐号：<input id="zcuname" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        注册密码：<input id="zcupassword1" type="password" placeholder="请输入密码">
    </div>

<div class="input_box">
    再次输入:<input id="zcupassword2" type="password" placeholder="请再次输入密码" >

</div> <div id="zcerror_box"><br></div> <div class="input_box"> <button onclick="fnEnroll()">立即注册</button>

<a href="10.31.html">已注册</a>

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

JS:

function fnEnroll() {
    var zcoUname = document.getElementById("zcuname");
    var zcoError = document.getElementById("zcerror_box");
    var zcoUword1 = document.getElementById("zcupassword1");
    var zcoUword2 = document.getElementById("zcupassword2");
    var isoError = true;
    zcoError.innerHTML = "<br>";
    if (zcoUname.value.length<6|| zcoUname.value.length>12) {
         zcoError.innerHTML = "用户名为6到12位";
         isoError = false;
        return;
    } else if((zcoUname.value.charCodeAt(0)>=48)&&(zcoUname.value.charCodeAt(0)<=57)){
        zcoError.innerHTML = "用户名首位不能是数字";
        return;
    } else for (var i = 0; i < zcoUname.value.length; i++) {
        if(zcoUname.value.charCodeAt(i)<48||(zcoUname.value.charCodeAt(i)>57)&&(zcoUname.value.charCodeAt(i)<97)||zcoUname.value.charCodeAt(i)>122){
            zcoError.innerHTML = "用户名只能是字母与数字";
            return;
        }
    }

    if (zcoUword1.value.length<6||zcoUword1.value.length>20){
        zcoError.innerHTML = "密码为6到20位";
        isoError = false;
        return;
    }
    if (zcoUword1.value!=zcoUword2.value){
        zcoError.innerHTML="两次密码不一致";
        return;
    }
    window.alert("注册成功！！");
}

.box {
    border: 1px solid palevioletred;
    position: absolute;
    top: 25px;
    left: 40px;
    float: left;
    height: 300px;
     400px;

    margin-left: 30%;

} h1 { font-size: 28px; text-align: center; background: palevioletred; margin-top: auto; height: 40px;  400px; } .input_box { height: 60px;  80px; margin-left: 10%; } input { align-self: center; height: 30px;  300px; } button { align-content: center; font-size: 17px; text-align: center; background: #cccccc;  height: 40px;  300px; }