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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

html：

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

</head>
<body>
<div class="div1">
    <div class="div2">登录</div>
    <div class="div3">
       <div class="iconfont ic-user"></div> 用户：<input id="username" type="text" placeholder="请输入用户名">
    </div>
    <div class="div3">
        密码：<input id="userpass" type="text" placeholder="请输入密码">
    </div>
    <div id="error_box"><br></div>
     <div class="div3">
        <button onclick="myLogin()">登陆</button>
    </div>
</div>
<br>
</body>
</html>

css：

div{
    margin: 0 auto;
    text-align: center;
    background-color: blue;
    font-family:微软雅黑;
    font-size: 12px;
}
.div1{
    390px;
    height: 320px;
    border-color: red;
    border-style: groove;
    border- 1px;
    margin-top:100px ;
}
.div2{
    font-family:微软雅黑;
    border-bottom-style: groove;
    border-bottom-5px;
    line-height: 50px;
    background-color: yellowgreen;
}
.div3{
    font-family: 幼圆;
     350px;
    height: 50px;
    font-size: 18px;
    align:"center";
}

js：

function myLogin(){
            var uName=document.getElementById("username");
            var uError=document.getElementById("error_box");
            var upass = document.getElementById("userpass");
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>20 || uName.value.length<6){
                uError.innerHTML="name;6-20";
                return;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="first number.";
                return;
            }else for(var i=0; i<uName.value.length;i++){
                if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 || uName.value.charCodeAt(i)>122 )){
                    uError.innerHTML = "only letter or number.";
                    return;
                }
            }


            if(upass.value.length>20 || upass.value.length<6){
                uError.innerHTML="password;6-20";
                return;
            }
            window.alert("登陆成功 ！")

        }

html：

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

</head>
<div class="div1">
    <div class="div2">登录注册</div>
    <div class="div3">
        请输入你的昵称：<input id="username" type="text" placeholder="请输入你的昵称">
    </div>
    <div class="div3">
                   设置密码：<input id="userpass" type="text" placeholder="请输入密码">
    </div>
    <div class="div3">
                   重复密码：<input id="userpass1" type="text" placeholder="请再次输入密码">
    </div>
    <div class="div3">
          请输入手机号：<input id="phonenumber" type="text" placeholder="请输入11位手机号">
    </div>
    <div id="error_box"><br></div>
     <div class="div3">
        <button onclick="myLogin()">注册</button>
    </div>
    <div class="div2">点击 “注册” 即表示您同意并愿意遵守<br>用户协议 和 隐私政策 。</div>
</div>
<br>
</body>
</html>

css：

div{
    margin: 0 auto;
    text-align: center;
    background-color: greenyellow;
    font-family:微软雅黑;
    font-size: 12px;
}
.div1{
     350px;
    height: 350px;
    border-color: blue;
    border-style: groove;
    border- 1px;
    margin-top:150px ;
}
.div2{
    font-family:微软雅黑;
    border-bottom-style: groove;
    border-bottom- 5px;
    line-height: 30px;
    background-color: yellowgreen;
}
.div3{
    font-family: 幼圆;
     350px;
    height: 50px;
    font-size: 18px;
    align:"center";
}

js：

function myLogin(){
            var uName=document.getElementById("username");
            var uError=document.getElementById("error_box");
            var upass = document.getElementById("userpass");
            var uphone = document.getElementById("phonenumber");
            var upass1 = document.getElementById("userpass1");
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>12 || uName.value.length<6){
                uError.innerHTML="name;6-12";
                return;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="first number.";
                return;
            }else for(var i=0; i<uName.value.length;i++){
                if((uName.value.charCodeAt(i)<48 || uName.value.charCodeAt(i)>57)&&(uName.value.charCodeAt(i)<97 || uName.value.charCodeAt(i)>122 )){
                    uError.innerHTML = "only letter or number.";
                    return;
                }
            }


            if(upass.value.length>12 || upass.value.length<6){
                uError.innerHTML="password;6-12";
                return;
            }
            if(upass.value != upass1.value){
                uError.innerHTML="两次密码输入不一致";
                return;
            }
            if(uphone.value.length>11 || uphone.value.length<11){
                uError.innerHTML="phone;11";
                return;
            }
            window.alert("注册成功 ！")

        }