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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登录</title>
 6     <link href="../static/css/ll.css" rel="stylesheet" type="text/css">
 7     <script src="../static/js/hl.js"></script>
 8 
 9 </head>
10 
11 <body>
12   <div><h1>武林|登录</h1></div>
13 
14     <div class="box">
15 
16         <div class="input_box">
17              姓名：<input type="text" id="uname" placeholder="敢问阁下大名">
18         </div>
19         <br>
20         <div class="input_box">
21              密码：<input type="password" id="upass" placeholder="请输入通关密码">
22         </div>
23         <br>
24         <div id="error_box"><br></div>
25         <div class="input_box">
26             <button onclick="fnLogin()">登录</button>
27 
28         </div>
29         <br>
30     </div>
31 
32 </div>
33 </body>
34 </html>

 1 function fnLogin() {
 2             var oUname = document.getElementById("uname");
 3             var oError = document.getElementById("error_box");
 4             var oUpass = document.getElementById("upass");
 5 
 6             oError.innerHTML="<br>"
 7 
 8             if(oUname.value.length<6 || oUname.value.length >12){
 9                 oError.innerHTML="用户名6-12位";
10                 return;
11             }else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
12                 oError.innerHTML="第一位只能是字母";
13                 return;
14             } else for (var i=0 ; i<oUname.value.length;i++){
15                 if (oUname.value.charCodeAt(i)<48 || (oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)|| oUname.value.charCodeAt(i)>122){
16                     oError.innerHTML="只能是字母或数字";
17                     return;
18                 }
19             }
20             if(oUpass.value.length<6 || oUpass.value.length>12){
21                 oError.innerHTML="密码6-12位";
22                 return;
23             }
24             window.alert("登录成功")
25         }

CSS：

h1{
    align:center;
    padding-right: 0;
    padding-left: 0;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 15px;
    font-family: "华文新魏";
    margin: 0;
    color: red;
    padding-top: 0;}

input_box{
    align:center;
    margin:550px;
    padding-left:550px;
    font-family: "华文新魏";
    color:red;
    }

    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:red;
    padding-top:40px;
    font-family: "华文新魏";}

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

</head>

<body>
  <div><h1>武林|注册</h1></div>

    <div class="box">

        <div class="input_box">
              请输入账号：<input id="name" type="text"placeholder="请输入用户名"><br>

        </div>
        <br>
        <div class="input_box">
          请输入密码：<input id="password" type="password"placeholder="请输入密码"><br><br>
          请确认密码：<input id="password2" type="password"placeholder="请再次输入密码"><br>
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button onclick="fnLogin()">注册</button>

        </div>
        <br>
    </div>

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

function fnLogin() {
        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("注册成功！")
             }

CSS

h1{
    align:center;
    padding-right: 0;
    padding-left: 0;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 15px;
    font-family: "华文新魏";
    margin: 0;
    color: red;
    padding-top: 0;}

input_box{
    align:center;
    margin:550px;
    padding-left:550px;
    font-family: "华文新魏";
    color:red;
    }

    body{
    padding-right:500px;
    margin-top:100px;
    padding-left:500px;
    font-size:16px;
    background:#000;
    padding-bottom:40px;
    color:red;
    padding-top:40px;
    font-family: "华文新魏";}

posted @ 2017-11-01 18:04 阿植阅读(2353) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

公告