代码改变世界

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

2017-10-31 21:12  055李小锐  阅读(214)  评论(0)    收藏  举报

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

 

登录html

<meta charset="UTF-8">
<title>Login Form</title>

<link rel="stylesheet" href="../static/css/AA.css">
    <script src="CC.js"></script>


</head>
<body>

<div class="box" >
    <h1>Login</h1>
    <form method="post">

        <input type="text"  id="uname" placeholder="Uname" required="required">
        <input type="password"  id="upass" placeholder="password" required="required">
        <div id="error_box"><br></div>
        <div class="input_box">
        <button onclick="myLogin()" type="submit" class="btn btn-primary btn-block btn-large">登录</button><br>
        <button onclick=window.alert("是否取消登录！") type="submit" class="btn btn-primary btn-block btn-large"cancel</button>
        </div>
    </form>
</div>
</body>
</html>

登录JS

 function myLogin() {
        var oUname = document.getElementById("uname");
        var oError = document.getElementById("error_box");
        var opassword = document.getElementById("upass");

         if(oUname.value.length<6||oUname.value.length>12){
                oError.innerHTML="number of uname6-12";
                return;
            }
         else if((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0)<= 57)){
                oError.innerHTML = "first number";
               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="only letter or number";
                     return;
             }

             }
         if(opassword.value.length<6||opassword.value.length>12){
                oError.innerHTML="number of password6-12";
                return;
           }
            window.alert("登录成功！")
         }

登录 注册CSS

* {
    ms-box-sizing:border-box;
    o-box-sizing:border-box;
    box-sizing:border-box;
}

body {
    width: 100%;
    height:100%;
    background: #092756;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
.box h1 { color: #fff;
          text-shadow: 0 0 10px rgba(0,0,0,0.3);
          letter-spacing:1px;
          text-align:center;
}
input {
    width: 100%;
    margin-bottom: 10px;
    background: rgba(0,0,0,0.3);
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 4px;
}
.btn-large { padding: 9px 14px;
              font-size: 15px;
              line-height: normal;
              -webkit-border-radius: 5px;
}
.btn-primary { background-color: #4a77d4;
    border: 1px solid #3762bc;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.btn-block { width: 100%;
              display:block;
}

注册html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Form</title>

<link rel="stylesheet" href="../static/css/AA.css">
    <script src="AA.js"></script>


</head>
<body>

<div class="box" >
    <h1>用户注册</h1>
    <form method="post">

        <input type="text"  id="uname" placeholder="Uname" required="required">
        <input type="text"  id="email" placeholder="Email" required="required">
        <input type="text"  id="phone" placeholder="Phone number" required="required">
        <input type="password"  id="upass" placeholder="Password" required="required">
        <input type="password"  id="cpassword" placeholder="Confirm password" required="required">
        <div id="error_box"><br></div>
        <div class="input_box">
        <button onclick="myLogin()" type="submit" class="btn btn-primary btn-block btn-large">立即注册</button><br>
        <button onclick=window.alert("是否取消注册？") type="submit" class="btn btn-primary btn-block btn-large">cancel</button>
        </div>
    </form>
</div>
</body>
</html>

注册JS

 function myLogin() {
        var oUname = document.getElementById("uname");
        var oError = document.getElementById("error_box");
        var opassword = document.getElementById("upass");
        var ophone = document.getElementById("phone");
        var ocpassword=document.getElementById("cpassword");
         if(oUname.value.length<6||oUname.value.length>12){
                oError.innerHTML="number of uname6-12";
                return;
            }
         else if((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0)<= 57)){
                oError.innerHTML = "first number";
               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="only letter or number";
                     return;
             }
            }
         if(ophone.value.length<11||ophone.value.length>11){
                oError.innerHTML="number of phone11";
                return;
             }
         if(opassword.value.length<6||opassword.value.length>12){
                oError.innerHTML="number of password6-12";
                     return;
           }
         else if (opassword.value!=ocpassword.value){
        oError.innerHTML="cpassword error";
                return;
    }
              window.alert("注册成功")
         }