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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

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

</head>
<body>

<div class="aa" >
    <div class="login" ><h2>LOGIN</h2></div>
    <div class="aa1" >
        Username：<input id="name" type="text"placeholder="请输入用户名"><br>
        Password：<input id="password" type="password"placeholder="请输入密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">Login</button>
         <button type="button" onclick=window.alert("是否取消登录！")>Cancel</button>


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

div{
    margin:0 auto;
    text-align:center;
    backgroup-color:blue
}
.aa{
    width:380px;
    height:230px;
    background-color: gold;

    margin-top:200px;
}
.login{
    font-size: 30px;
    color: black;
    font-family:幼圆;

}
.aa1{
    font-size:30px;
    font-weight:bold;
    color: red;
    font-family:幼圆;
 }
.aa2{
    width:150px;
    height:60px;
    boder-style:hidden;
}

.design{
    font-size:10px;
    color:yellowgreen;
}
#error_box{
    color:red;
}

function myLogin(){
            var uName=document.getElementById("name");
            var uError=document.getElementById("error_box");
            var upass = document.getElementById("password");
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>12 || uName.value.length<6){
                uError.innerHTML="Username 6-12 bits";
                return;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="The first letter cannot be numeric";
                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 bits";
                return;
            }
            window.alert("登陆成功 ！")

        }

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

</head>
<body>

<div class="aa" >
    <div class="login" ><h2>注册/Register</h2></div>
    <div class="aa1" >
        Set account：<input id="name" type="text"placeholder="请输入用户名"><br>
        Set password：<input id="password" type="password"placeholder="请输入密码"><br>
        Repeat password：<input id="password1" type="password"placeholder="请再次输入密码"><br>
        Phone number：<input id="userphone" type="text"placeholder="请输入手机号码"><br>
    </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">Submit</button>
         <button type="button" onclick=window.alert("是否取消登录！")>Cancel</button>


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

div{
    margin:0 auto;
    text-align:center;
    backgroup-color:blue
}
.aa{
    width:400px;
    height:250px;
    background-color: gold;

    margin-top:200px;
}
.login{
    font-size: 30px;
    color: black;
    font-family:幼圆;

}
.aa1{
    font-size:22px;
    font-weight:bold;
    color: red;
    font-family:幼圆;
    text-align:center;
 }
.aa2{
    width:150px;
    height:60px;
    boder-style:hidden;
}

.design{
    font-size:10px;
    color:yellowgreen;
}
#error_box{
    color:red;
}

function myLogin(){
            var uName=document.getElementById("name");
            var uError=document.getElementById("error_box");
            var upass = document.getElementById("password");
            var uphone = document.getElementById("userphone");
            var upass1 = document.getElementById("password1");
            uError.innerHTML = "<br>"
            //uname
            if(uName.value.length>12 || uName.value.length<6){
                uError.innerHTML="Username 6-12 bits";
                return;
            }else if((uName.value.charCodeAt(0)>=48)&& uName.value.charCodeAt(0)<=57){
                uError.innerHTML="The first letter cannot be numeric";
                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 bits";
                return;
            }
            if(upass.value != upass1.value){
                uError.innerHTML="The password input is inconsistent";
                return;
            }
            if(uphone.value.length>11 || uphone.value.length<11){
                uError.innerHTML="phone number at least 11";
                return;
            }
            window.alert("注册成功 ！")

        }

posted @ 2017-10-31 21:35 060王昊阅读(200) 评论(0) 收藏举报

刷新页面返回顶部

Marsk

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

公告