完成登录与注册

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录HTML

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

</head>
<body style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
    <div class="box" >
        <h2 class="denglu">登录</h2>
        <div class="input_box">
            <input id="uname" type="text" placeholder="请输入用户名">
        </div>
        <div class="input_box">
            <input id="uword" type="password" placeholder="请输入密码">
        </div>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>
        </div>
    </div>


</body>
</html>

 .box{
        border: 1px solid #cccccc;
         334px;
        margin: 5px;
        text-align: center;
    }
    .denglu{
        background-color: cornflowerblue;
        font-family: 华文楷体;
        font-size: 35px;
    }
    .input_box{
       height: 40px;
    }

登录JS

function fnLogin() {
    var oUname = document.getElementById("uname")
    var oError = document.getElementById("error_box")
    var oUword = document.getElementById("uword")

    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 = "密码为6到20位";
        return
    }
    window.alert("登录成功！！")
}

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

</head>

<body style="text-align: center">
<div class="box">
    <h2 class="zhuce">注册</h2>
    <div class="input_box">
        <input id="zcuname" type="text" placeholder="请输入用户名">
    </div>
    <div class="input_box">
        <input id="zcuword1" type="password" placeholder="请输入密码">
    </div>
    <div class="input_box">
        <input id="zcuword2" type="password" placeholder="请再次输入密码">
    </div>
    <div id="zcerror_box"><br></div>
    <div class="input_box">
        <button onclick="fnEnroll()">立即注册</button>
    </div>
</div>

</body>
</html>

 .box{
        border: 1px solid #cccccc;
         334px;
        margin: 5px;
        text-align: center;
    }
  .zhuce{
      font-family: "Bodoni MT Poster Compressed";
  }
    .input_box{
       height: 40px;
    }

function fnEnroll() {
    var zcoUname = document.getElementById("zcuname")
    var zcoError = document.getElementById("zcerror_box")
    var zcoUword1 = document.getElementById("zcuword1")
    var zcoUword2 = document.getElementById("zcuword2")

    zcoError.innerHTML = "<br>"
    if (zcoUname.value.length < 6 || zcoUname.value.length > 12) {
        zcoError.innerHTML = "用户名为6到12位";
        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位";
        return
    }
    if (zcoUword1.value()!=zcoUword2.value()){
        zcoError.innerHTML="两次密码不一致"
    }
    window.alert("注册成功！！")
}