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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录页面：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../static/css/login.css" rel="stylesheet" type="text/css">
    <script src="../static/js/login.js"></script>
</head>
<body>
    <div class="box">
        <a class="one" href="login.html">登录</a>
        &nbsp;<b>·</b>&nbsp;
        <a class="one"href="register.html">注册</a>
         <div class="input_box">
             username:<input type="text" id="uname" placeholder="请输入用户名">
         </div>
         <div class="input_box">
             password:<input type="password" id="upass" placeholder="请输入密码">
         </div>
         <div id="error_box"><br></div>
         <div class="input_box">
             <button id="login" onclick="myLogin()">Login </button>


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

body{
    background-image: url(../images/login.jpg);
    width: 400px;
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
*{
    margin: 0;
    padding: 0;
    font-family: 'Yu Mincho Demibold' ;
    font-size: 20px;
}
.box{
    font-size: 35px;
    text-align: center;
    border-radius:10px;
    width: 500px;
    height: 400px;
    padding: 10px;
    border-bottom: 2px solid #ea6f5a;
    background: beige;
    position: absolute;
    left: 45%;
    top:50%;
    margin-left: -195px;
    margin-top: -160px;
}
.input_box{
    width: 350px;
    padding-top: 20px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
#uname{
    width: 300px;
    border-radius:10px;
}
#upass{
    width: 300px;
    border-radius:10px;
}
#login{
   width: 100%;
    padding: 9px 18px;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    color: #fff;
    background: dodgerblue;
    cursor: pointer;
    clear: both;
}
#error_box{
    padding-top: 20px;
    color: red;
    text-align: center;
}
a.one:link{
    text-decoration: none;
}
a.one:hover{
    padding-bottom:5px;
    border-bottom:3px solid  #FF0000;
    color: red;
    text-decoration:none;
}

function myLogin() {
        var oUname = document.getElementById("uname");
        var oPass = document.getElementById("upass");
        var oError = document.getElementById("error_box");
        oError.innerHTML = "<br>";
        if (oUname.value.length < 6 || oUname.value.length > 20) {
            oError.innerHTML = "用户名为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 (oPass.value.length < 6 || oPass.value.length > 20) {
            oError.innerHTML = "密码为6-20位。";
            return;
        }
        window.alert("登录成功！");
    }

注册页面：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="../static/css/register.css" rel="stylesheet" type="text/css">
    <script src="../static/js/register.js"></script>
</head>
<body>
    <div class="box">
        <a class="one" href="login.html">登录</a>
         &nbsp;<b>·</b>&nbsp;
        <a class="one" href="register.html">注册</a>
         <div class="input_box">
             &nbsp;&nbsp;&nbsp;用户名：<input type="text" id="uname" placeholder="请设置用户名">
         </div>
        <div class="input_box">
             &nbsp;&nbsp;&nbsp;手机号：<input type="text" id="unumber" placeholder="请输入正确的手机号" >
         </div>
         <div class="input_box">
             密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="upass" placeholder="请设置登录密码">
         </div>
        <div class="input_box">
             确定密码：<input type="password" id="uupass" placeholder="请再次输入登录密码">
         </div>
         <div id="error_box"><br></div>
         <div class="input_box">
             <button id="register" onclick="check()">register </button>
         </div>
    </div>
</body>
</html>

body{
    background-image: url(../images/login.jpg);
    width: 400px;
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}
*{
    margin: 0;
    padding: 0;
    font-family: 'Yu Mincho Demibold' ;
    font-size: 20px;
}
.box{
    font-size: 35px;
    text-align: center;
    border-radius:10px;
    width: 500px;
    height: 400px;
    padding: 10px;
    border-bottom: 2px solid #ea6f5a;
    background: beige;
    position: absolute;
    left: 45%;
    top:50%;
    margin-left: -195px;
    margin-top: -160px;
}
.input_box{
    width: 500px;
    padding-top: 15px;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
#register{
     width: 70%;
    padding: 9px 18px;
    font-size: 18px;
    border: none;
    border-radius: 10px;
    color: #fff;
    background: #42c02e;
    cursor: pointer;
    clear: both;
}
#uname{
    width: 300px;
    border-radius:10px;
}
#upass{
    width: 300px;
    border-radius:10px;
}
#unumber{
    width: 300px;
    border-radius:10px;
}
#uupass{
    width: 300px;
    border-radius:10px;
}
#error_box{
    padding-top: 20px;
    color: red;
    text-align: center;

}
a.one:link{
    text-decoration: none;
}
a.one:hover{
    padding-bottom:5px;
    border-bottom:3px solid  #FF0000;
    color: red;
    text-decoration:none;
}

function check() {
        var oUname = document.getElementById("uname");
        var oPass = document.getElementById("upass");
        var onumber = document.getElementById("unumber");
         var ooPass = document.getElementById("uupass");
        var oError = document.getElementById("error_box");
        oError.innerHTML = "<br>";
        if (oUname.value.length < 6 || oUname.value.length > 20) {
            oError.innerHTML = "用户名为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 = "用户名只能包括字母和数字";
                }
            }
         if(onumber.value.length!=11){
            oError.innerHTML="手机号必须为11位";
            return;
         }
         else for(var n=0;n<onumber.value.length;n++){
             if (onumber.value.charCodeAt(n) < 48 || onumber.value.charCodeAt(n) > 57){
                    oError.innerHTML = "手机号只能是数字";
                    return;
                }
         }
        if (oPass.value.length < 6 || ooPass.value.length > 20) {
            oError.innerHTML = "密码为6-20位。";
            return;
    }
        if (oPass.value != uupass.value) {
              alert('两次输入密码不一致');
             return;
        }
        window.alert("注册成功！");
    }

posted on 2017-11-01 13:39 087陆倩霞阅读(292) 评论(0) 收藏举报

刷新页面返回顶部

陆倩霞

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

导航

公告