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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录代码：login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link href="../static/css/login2.css" rel="stylesheet" type="text/css">
    <script src="../static/js/login2.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>

登录的css样式：login.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;
    width:550px;
    height:500px;

}

#error_box{

    color: red;
    font-size: 20px;

}

.input_box{
    width:450px;
    padding-top: 20px;
    padding-bottom:15px;
    margin: 0 auto;
    overflow: hidden;
    font-size: 30px;
}
.box h2{
    font-weight: normal;
    color: black;
    font-size: 30px;
    line-height: 30px;
    height: 40px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #dddddd;
    background: #f7f7f7;
}
body{
    background:url("http://p1.so.qhimgs1.com/bdr/_240_/t010d4fb773a19d42d1.jpg") no-repeat;
    width:400px;
    height:auto;
    overflow:hidden;
    background-size:100%;
}
#button{
    width: 100px;
    height: 55px;
}

登录的js：login.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("登录成功！")
}

注册：register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link href="../static/css/login2.css" rel="stylesheet" type="text/css">
    <script src="../static/js/register.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">
              chpassword:<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>

注册的js：register.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("注册成功！")
    }

posted @ 2017-11-01 14:59 091王卡阅读(244) 评论(0) 收藏举报

刷新页面返回顶部

王卡

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

公告