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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录的代码

js23.html

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

</head>
<body>
<div class="box">
          <h2>登录</h2>
          <div class="input_box"></div>
          <div class="input_box">
              username:<input id="uname" type="text" placeholder="请输入用户名">
          </div>
          <div class="input_box"></div>
          <div class="input_box"></div>
          <div class="input_box">
              password:<input id="upass" type="password" placeholder="请输入密码">
          </div>
          <div class="input_box"></div>

          <div id="error_box" ><br></div>
          <div class="input_box">
              <button id="button" onclick="fnLogin()">登录</button>&nbsp&nbsp&nbsp&nbsp&nbsp
              <button id="button" onclick="window.location.replace('register.html')">注册</button>
          </div>

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

js23.css

*{
    font-family: 华文细黑;
    font-size: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
}
.box{
    border: solid 1px #dddddd;
    background: #FFFFFF;
    position:absolute;
    top:42%;
    left:50%;
    margin-top: -160px;
    margin-left:-196px;
    390px;
    height:410px;

}

#error_box{

    color: red;
    font-size: 20px;

}

.input_box{
    400px;
    padding-top: 20px;
    padding-bottom:15px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 30px;
}
.box h2{
    font-weight: normal;
    color: black;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #dddddd;
    background: #f7f7f7;
}
body{
    background:url("http://img1.gtimg.com/ent/pics/hv1/129/192/1925/125222214.jpg") no-repeat;
    400px;
    height:auto;
    overflow:hidden;
    background-size:100%;
}
#button{
     60px;
    height: 30px;
}

js23.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>10 || oUname.value.length < 6){

        oError.innerHTML="用户名必须是6-10位！";
        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>10 || oUpass.value.length<6 ){
        oError.innerHTML="用户密码6-10位！";
        return;
    }
    window.alert("登录成功！")
}

 注册面的登录代码

js23.html

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

</head>
<body>
 <div class="box">
           <h2>注册</h2>
          <div class="input_box">
              username:&nbsp&nbsp&nbsp<input id="uname" type="text" placeholder="请输入用户名">
          </div>
          <div class="input_box">
              tel:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input id="number" type="text" placeholder="请输入常用手机号">
          </div>
          <div class="input_box">
              password:&nbsp&nbsp&nbsp<input id="upass" type="password" placeholder="请输入密码">
          </div>
          <div class="input_box">
              again password:<input id="chpass" type="password" placeholder="请再次输入密码">
          </div>
          <div id="error_box" ><br></div>

          <div class="input_box">
              <button  id="button" onclick="fnLogin1()">注册</button>&nbsp&nbsp&nbsp&nbsp&nbsp
              <button  id="button"onclick="window.location.replace('login2.html')">转到登录</button>

          </div>

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

js23.css

*{
    font-family: 华文细黑;
    font-size: 20px;
    margin: 0;
    padding: 0;
    text-align: center;
}
.box{
    border: solid 1px #dddddd;
    background: #FFFFFF;
    position:absolute;
    top:42%;
    left:50%;
    margin-top: -160px;
    margin-left:-196px;
    390px;
    height:410px;

}

#error_box{

    color: red;
    font-size: 20px;

}

.input_box{
    400px;
    padding-top: 20px;
    padding-bottom:15px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 30px;
}
.box h2{
    font-weight: normal;
    color: black;
    font-size: 20px;
    line-height: 30px;
    height: 30px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #dddddd;
    background: #f7f7f7;
}
body{
    background:url("http://img1.gtimg.com/ent/pics/hv1/129/192/1925/125222214.jpg") no-repeat;
    400px;
    height:auto;
    overflow:hidden;
    background-size:100%;
}
#button{
     60px;
    height: 30px;
}

js23.js

function fnLogin1() {
    var oUname = document.getElementById("uname");
    var oNumber = document.getElementById("number");
    var oUpass = document.getElementById("upass");
    var oError = document.getElementById("error_box");
    oError.innerHTML = "<br>";
    //uname
    if (oUname.value.length == 0) {
        oError.innerHTML = "用户名不能为空！";
        return
    }
    if (oUname.value.length > 10 || oUname.value.length < 6) {

        oError.innerHTML = "用户名必须是6-10位！";
        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;
        }
    }


    //tel
    if (oNumber.value.length == 0) {
        oError.innerHTML = "手机号不能为空！";
        return
    }
    if (oNumber.value.length != 11) {
        oError.innerHTML = "手机号必须是11位！";
        return;
    } else for (var j = 0; j < oNumber.value.length; j++) {
        if ((oNumber.value.charCodeAt(j) < 48) && (oNumber.value.charCodeAt(j)) > 57) {
            oError.innerHTML = "手机号只能为数字！";
            return;
        }
    }

    //upass
    if (oUpass.value.length == 0) {
        oError.innerHTML = "密码不能为空！";
        return
    }
    if (oUpass.value.length > 10 || oUpass.value.length < 6) {
        oError.innerHTML = "用户密码6-10位！";
        return;
    }
    if (document.getElementById("upass").value != document.getElementById("chpass").value) {
        oError.innerHTML = "密码不一致";
        return
    }

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/123hyf/p/7762282.html