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

时间：2017-11-01 01:13:07 阅读：143 评论：0 收藏：0 [点我收藏+]

标签：运行 link 页面 err red head func var idt

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

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

1、登陆页面

登陆html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="../static/css/1031.css" rel="stylesheet" type="text/css">
    <script src ="../static/js/1031.js"></script>
</head>
<body>
     <br>
     <div><h1 align="center">这是一个登陆页面</h1></div>
     <div class="box">
         <h2>登录</h2>


         <div class="input_box">
             登 录：<input id="uname" 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>
         </div>
     </div>

</body>
</html>

登陆js

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

      oError.innerHTML = "<br>"
       // uname
    if (oUname.value.length>20||oUname.value.length<6){
          oError.innerHTML = "name:6-20";
          return;
    }else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML = "first letter";
        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;
        }
    }
    // upass
    if (oUpass.value.length>20 || oUpass.value.length<6){
        oError.innerHTML = "password:6-20";
        return;
    }
    window.alert("登录成功！")
}

登陆css

h1{
    color: red;
}
.box{
    width: 390px;
    height: 320px;
    background-color: #e242da;
    border: solid 5px black;
    background: #ffb5e4;
    position: absolute;
    left: 50%;
    top:42%;
    margin-left: -230px;
    margin-top: -100px;
}

.box h2{
    font-weight: normal;
    color: blueviolet;
    font-size: 35px;
    line-height: 46px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #ddd;
    background: #f7f7f7;
}
.input_box{
    align:center;
    width:200px;
    padding-bottom: 20px;
    margin: auto;
    overflow: hidden;
}
body{
   align:center;
    color:red;
    padding-top:40px;
    margin-left: -60px;

    }

运行结果：

技术分享

2、注册页面

注册html

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

</head>

<body>
<div><h1 align="center">这是一个注册页面</h1></div>

<div class="flex-container">

    <div class="box">
    <h2>注册</h2>
        <div class="input_box">
            请输入账号　<input id="uname" type="text" placeholder="请输入账号">   </div><br>
        <div class="input_box">
            请输入密码　<input id="upass" type="password" placeholder="请输入密码"></div><br>
         <div class="input_box">
            再输入密码　<input id="upass1" type="password" placeholder="再输入密码"></div><br>
        <div id="error_box"><br></div>
         <div class="input_box">
            <button onclick="fnLogin()" >注册</button></div>
    </div>
</div>
</body>
</html>

注册js

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

    oError.innerHTML="<br>"

    if(oUname.value.length<6 || oUname.value.length >12){
        oError.innerHTML="name：6-12";
        return;
    }else if ((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
        oError.innerHTML="first latter";
        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>12){
        oError.innerHTML="password:6-20";
        return;
    }
    if (oUpass1.value.length<6||oUpass1.value.length>12){
        oError.innerHTML="请再输入密码";
        return;
    }
    if (oUpass1.value!=oUpass.value ) {
        oError.innerHTML = "两次输入密码不一致";
        return;
    }

    window.alert("恭喜你，注册成功！")
}

注册css

h1{
    color: red;
}
.box{
    width: 390px;
    height: 350px;
    background-color: #e242da;
    border: solid 5px black;
    background: #ffb5e4;
    position: absolute;
    left: 50%;
    top:42%;
    margin-left: -230px;
    margin-top: -100px;
}

.box h2{
    font-weight: normal;
    color: blueviolet;
    font-size: 35px;
    line-height: 46px;
    overflow: hidden;
    text-align: center;
    border-bottom: solid 1px #ddd;
    background: #f7f7f7;
}
.input_box{
    align:center;
    width:200px;
    padding-bottom: inherit;
    margin: auto;
    overflow: hidden;
}
body{
   align:center;
    color:red;
    padding-top:40px;
    margin-left: -60px;

    }

运行结果：

技术分享

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

标签：运行 link 页面 err red head func var idt

原文地址：http://www.cnblogs.com/nigongbin/p/7764378.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)

周排行