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

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

 登陆：

html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录/Login</title>
    <link rel="stylesheet"type="text/css"href="..\static\css\js23.css">
    <script src="..\static\js\js23.js"></script>
</head>
<body>
    <div class="b1" >
        <div class="s1" ><h3>用户登录/LOGIN </h3></div>
        <div class="b2" >
        户名：<input id="name" type="text"placeholder="请输入用户名"><br>
        密码：<input id="password" type="password"placeholder="请输入密码"><br>
        </div>
        <div id="error_box"><br></div>
    <div class="s2" >
         <button onclick="myLogin()">登录</button>
         <button type="button" onclick=window.alert("是否取消登录")>取消</button>
          <label for="remember_me" style="padding: 0;">Remember me?</label>
          <input type="checkbox" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me"/>
          <div class="design">
              <p>Design by ss</p>
         </div>

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

js

 

        function myLogin() {
        var oUname = document.getElementById("name")
        var oError = document.getElementById("error_box")
        var opassword = document.getElementById("password")
         oError.innerHTML="<br>"
            //oUname
         if(oUname.value.length<6||oUname.value.length>12){
                oError.innerText="用户名请输入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;
               }

         }

         //opassword
         if(opassword.value.length<6||opassword.value.length>12){
                oError.innerText="密码请输入6-12个字符内";
                return;
            }
            window.alert("登陆成功！")
             }

css

 

body
  {
  background-color:palevioletred;
  }
div{
    margin:0 auto;
    text-align:center;
    background:  top center no-repeat pink;

}
.b1{
    width:500px;
    height:250px;
    border-color:lightseagreen;
    border-width:1px;
    margin-top:100px;
}
.s1{
    font-size: 20px;
    color: lightseagreen;

}
.b2{
    text-align:center;
    font-size:16px;
    font-weight:bold;
    color:lightseagreen;
 }
.s2{
    width:150px;
    height:60px;
    boder-style: hidden;

}
.design{
    font-size:10px;
    color:black;
}

 

 

注册：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册/ENROLL</title>
    <link rel="stylesheet"type="text/css"href="..\static\css\zhuce.css">
    <script src="..\static\js\zhuce.js"></script>
</head>
<body>
    <div class="b1" >
        <div class="s1" ><h3>注册/ENROLL </h3></div>
        <div class="b2" >

            请输入账号:　<input id="name" type="text" placeholder="write down your name"><br>
            请输入密码:　<input id="password" type="password" placeholder="write down your PIN"><br>
            再输入密码:　<input id="password2" type="password2" placeholder="write down your PIN"><br>
        </div>

        <div id="error_box"><br></div>


    <div class="s2" >
         <button onclick="myLogin()">注册</button>
         <button type="button" onclick=window.alert("是否取消注册")>取消</button>
          <label for="remember_me" style="padding: 0;">Remember me?</label>
          <input type="checkbox" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me"/>
          <div class="design">
              <p>Design by ss</p>
         </div>

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

 

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>"
           //oUname
           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;
               }

           }

           //opassword
           if (opassword.value.length < 6 || opassword.value.length > 20) {
               oError.innerHTML = "密码请输入6-12个字符内";
               return;
           }
           if (opassword2.value != opassword.value) {
               oError.innerHTML = "登陆请重新输入你的密码";
               return;
           }
           window.alert("注册成功！")
       }

 

css

body
  {
  background-color:palevioletred;
  }
div{
    margin:0 auto;
    text-align:center;
    background:  top center no-repeat pink;

}
.b1{
    width:500px;
    height:250px;
    border-color:lightseagreen;
    border-width:1px;
    margin-top:100px;
}
.s1{
    font-size: 20px;
    color: lightseagreen;

}
.b2{
    text-align:center;
    font-size:16px;
    font-weight:bold;
    color:lightseagreen;
 }
.s2{
    width:150px;
    height:60px;
    boder-style: hidden;

}
.design{
    font-size:10px;
    color:black;
}

 

 

 

posted on 2017-11-01 20:06  104鲍珊珊  阅读(258)  评论(0)    收藏  举报

导航