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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

登录页面：

HTML：

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

</head>
<body>

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


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

CSS：

div{
    margin:0 auto;
    text-align:center;
}
.aa{
    width:350px;
    height:200px;
    background-color: black;

    margin-top:100px;
}
.login{
    font-size: 25px;
    color: cyan;
    font-family: 楷体;
}
.aa1{
    font-size:16px;
    font-weight:bold;
    color: cyan;
    font-family: 楷体;
 }
.aa2{
    width:100px;
    height:30px;
    boder-style:hidden;
    font-family: 楷体;
}
#error_box{
    color:cyan;
}

JS：

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

 

 注册页面：

HTML：

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

</head>
<body>

<div class="aa" >
    <div class="zhuce" ><h2>新用户注册</h2></div>
    <div class="aa1" >
          请输入账号：<input id="name" type="text"placeholder="请输入用户名"><br>
          请输入密码：<input id="password" type="password"placeholder="请输入密码"><br>
          请确认密码：<input id="password2" type="password2"placeholder="请再次输入密码"><br>
        </div>
        <div id="error_box"><br></div>
      <div class="aa2" >
         <button onclick="myLogin()">注册</button>



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

CSS：

div{
    margin:0 auto;
    text-align:center;
}
.aa{
    width:350px;
    height:200px;
    background-color: black;

    margin-top:100px;
}
.zhuce{
    font-size: 20px;
    color: cyan;
    font-family: 楷体;
}
.aa1{
    font-size:16px;
    font-weight:bold;
    color: cyan;
    font-family: 楷体;
 }
.aa2{
    width:100px;
    height:30px;
    boder-style:hidden;
    font-family: 楷体;
}
#error_box{
    color:cyan;
}

JS：

 function myLogin() {
        var oUname = document.getElementById("name")
        var oError = document.getElementById("error_box")
        var opassword = document.getElementById("password")
        var opassword2 = document.getElementById("password2")
        oError.innerHTML = "<br>"
         if(oUname.value.length<6||oUname.value.length>12){
                oError.innerHTML="用户名需为6-12位";
                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(opassword.value.length<6||opassword.value.length>12){
                oError.innerHTML="密码需为6-12位";
                return;
            }
         if(opassword2.value!=opassword.value){
             oError.innerHTML="密码不一致";
             return;
         }
            window.alert("注册成功！")
             }

 

 

posted on 2017-11-01 16:41  097吴嘉玲  阅读(177)  评论(0)    收藏  举报

导航