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

时间：2017-11-01 20:28:12 阅读：186 评论：0 收藏：0 [点我收藏+]

标签：web ane ica false ref 输入 oct alert splay

完成登录与注册页面的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="c2.css">
    <script type="text/javascript" src="c2.js"></script>
</head>
<body>
<div class="bigbox">
<div class="box">
<h2>广州商学院欢迎你！</h2>

<div class="input_box">
账户：<input id="umane"type="text"placeholder="请输入用户名">
</div>
<div class="input_box">
密码：<input id="upass"type="password"placeholder="请输入密码">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button onclick="fnLogin()">登录</button>
<button onclick=window.alert("是否取消登录？")>取消</button></div>
</div>
</div>

</body>
</html>

function fnLogin() {
var oUname = document.getElementById("umane");
var oError = document.getElementById("error_box");
var oUpass = document.getElementById("upass")

    oError.innerHTML="<br>"
if(oUname.value.length<6 || oUname.value.length>20){
    oError.innerHTML="用户名为6-20位";
    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(oUpass.value.length<6 || oUpass.value.length>20){
   oError.innerHTML="密码为6-20位";
   return;
 }
 window.alert("登录成功！")
}

    align:center;
   }
.bigbox{
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    padding-left: 100px;
    padding-top: 50px;
    background-color:greenyellow;
    }
#input_box{
    align:center;
    margin:700px;
    padding-left:700px;
    }

#error_box{
    color: black;
    }
body{ padding-right:500px; margin-top:100px; padding-left:500px; font-size:16px; padding-bottom:40px; padding-top:40px; font-family:verdana,Arial,Helvetica,sans-serif; }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="regist.css">
<script type="text/javascript" src="regist.js"></script>
</head>
<body>
<div class="box">
<h1>注册</h1>
<div class="input-box">
用户账号：<input id="uname" type="text" placeholder="请输入用户名">
</div>
<div class="input-box">
用户密码：<input id="upass" type="password" placeholder="请输入密码">
</div>
<div class="input-box">
用户密码：<input id="upass" type="password" placeholder="请再次输入密码">
</div>
<div id="error-box"><br></div>
<div class="input-box">
<button onclick="fnLogin()">确认注册</button>
</div>
</div>
</body>
</html>

function fnLogin() {
         var oUname = document.getElementById("uname");
         var oError = document.getElementById("error-box");
         var oUpass = document.getElementById("upass");
         var isoError = true;
         oError.innerHTML = "<br>";

         if (oUname.value.length<6||oUname.value.length>20){
              oError.innerHTML="用户名要6-20位";
              isoError = false;
              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 (oUpass.value.length<6||oUpass.value.length>20){
                    oError.innerHTML="密码至少6-20位";
                     isoError = false;
                      return;

            }
              window.alert("注册成功")
        }

.box{
    width: 400px;
    height: 300px;
    padding-left:100px;
    padding-top:40px;
    background-color:greenyellow;
}
div.input-box{
    text-align: center;
    height: 33px;
    margin: 5px;
}
#uname{
    width: 180px;
    height: 26px;
}
#upass{
    width: 180px;
    height: 26px;
}
div.input-box button{
    border: 0;
    font-size: 16px;
    width: 118px;
    height: 36px;
    margin-right: 50px;
    background-color: darkgray;
}
div.input-box a{
    font-size: 16px;
    width: 118px;
    height: 36px;
    margin-right: 50px;
}
#error-box{
    font-size: 12px;
    margin: 15px;
}

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

标签：web ane ica false ref 输入 oct alert splay

原文地址：http://www.cnblogs.com/xfy1317/p/7760000.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行