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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script type="text/javascript" src="../static/js/login-register.js" ></script>
    <link rel="stylesheet" type="text/css" href="../static/css/login-register.css">
</head>
<body class="zong">
<div class="container">
    <div class="box">
                <a href="login.html" class="active">登录</a>
                  <a >*</a>
                <a href="register.html" class="active">注册</a></div>


    <div class="input_box"><br><br><br>
        Username:<input id="uname" type="text" placeholder="请输入用户名"><br><br><br><br>
        Password:<input id="upass" type="password" placeholder="请输入密码"><br><br><br></div>
        <div id="error_box"></div>
    <div><button id="login" type="submit" onclick="myLogin()">登录</button></div>
</div>
</body>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <script type="text/javascript" src="../static/js/login-register.js" ></script>
    <link rel="stylesheet" type="text/css" href="../static/css/login-register.css">
</head>
<body class="zong">
<div class="container">
    <div class="box">
                <a href="login.html" class="active">登录</a>
                 <a >*</a>
                <a href="register.html">注册</a>
            </div>
    <br><br>
    <div class="input_box">
        Username:<input id="uname" type="text" placeholder="你的昵称"><br><br>
        Telphone:<input id="utel" type="text" placeholder="手机号"><br><br>
        Password:<input id="upass" type="password" placeholder="设置密码"><br><br>
        Confirmpass:<input id="uconfirmrpass" type="password" placeholder="确认密码"><br><br></div>
        <div id="error_box"></div>
       <div><button id="register" type="submit" onclick="myRegister()">注册</button> </div>
 </div>
</body>
</html>

login-register.css

.zong {
    background-image: url(../images/2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.container {
    width: 690px;
    height:500px;
    margin: 150px auto;
    text-align: center;
    background: grey;
    border-collapse:separate ;
    border-color: #ff49b0;
    border-radius: 30px;
}
.box {
    clear: both;
    text-align: center;
    height: 45px;
    font-size: 40px;
    color: green;
    font-family: 华文楷体;
    background: grey;
    border-radius: 30px;
}
.box a:hover{
     color: #0f88eb;
     opacity: 1;
}
a:link {
    text-decoration: none;
}
a:hover {
    opacity: 1;
    text-decoration: none;
}
a:active {
    color: #0f88eb;
    border-bottom: 5px solid #ea6f5a;
}
a:visited {
    text-decoration: none;
}
div.input_box {
    width: 700px;
    float: left;
    text-align: center;
    font-size: 29px;
    color: pink;
    font-family: "华文隶书";
}
#uname {
    width: 350px;
    height: 40px;
    background-color: palegoldenrod;
    border-radius: 20px;
}
#utel{
    width: 350px;
    height: 40px;
    background-color: palegoldenrod;
    border-radius: 20px;
}
#upass {
    width: 350px;
    height: 40px;
    background-color: palegoldenrod;
    border-radius: 20px;
}

#uconfirmrpass{
    width: 350px;
    height: 40px;
    background-color: palegoldenrod;
    border-radius: 20px;
}
#login {
    width: 540px;
    height: 65px;
    color: palegreen;
    font-family: 隶书;
    font-size: 40px;
    border-radius: 200px;
    background: darkslategrey;
    padding-bottom:0px;
}
#register {
    width: 540px;
    color: palegreen;
    font-family: 隶书;
    height: 65px;
    font-size: 40px;
    border-radius: 200px;
    background: darkslategrey;
}

#error_box {
    font-family: 华文宋体;
    font-size: 20px;
    color:yellow;
}

login-register.js

function myLogin() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");
            oError.innerHTML="<br>"
            if ((oUname.value.length<6)||(oUname.value.length>20)){
                oError.innerHTML = "用户名6位必须6-20"
                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 ((oUpass.value.length<6)||(oUpass.value.length>20)) {
                oError.innerHTML = "密码必须6-20位"
               return;
        }
        window.alert("登录成功")
           }
function myRegister() {
            var oUname = document.getElementById("uname");
            var oError = document.getElementById("error_box");
            var oUpass = document.getElementById("upass");
            var oConfirm=document.getElementById("uconfirmrpass")
            var oUtel = document.getElementById("utel");
            oError.innerHTML="<br>"
            if ((oUname.value.length<6)||(oUname.value.length>20)){
                oError.innerHTML = "用户名6位必须6-20"
                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(oUtel.value.length!=11){
              oError.innerHTML = "电话号码必须为11位"
              return;
            }
            else for(var i=0;i<oUname.value.length;i++) {
                if (oUtel.value.charCodeAt(i) < 48 || oUtel.value.charCodeAt(i) > 57) {
                    oError.innerHTML = "电话号码必须为数字"
                    return;
                }
            }
           if ((oUpass.value.length<6)||(oUpass.value.length>20)) {
                oError.innerHTML = "密码必须6-20位"
               return;
        }
           else if(oConfirm.value!=oUpass.value){
                oError.innerHTML = "两次输入的密码不一致"
               return;
        }
        window.alert("注册成功")
           }

posted @ 2017-11-01 15:48 爱学习的土豆阅读(195) 评论(0) 收藏举报

yyjdxgz

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

公告