zoukankan html css js c++ java

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" type="text/css" href="../static/css/10.31.css">
    <script src="../static/js/10.31.js"></script>
</head>
<body>
<div class="hahaha"><h2>欢迎你</h2></div>
<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 id="error-box"><br></div>
    <div class="input-box">
        <button onclick="fnLogin()">登录</button>
        <a href="">注册/Resister</a>
    </div>
</div>

</body>
</html>

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

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;

            }
        }

　　____________________________________________________________________________________________________________________________________________________________________________________________________________

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

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

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

查看全文

相关阅读:
Java基础学习笔记十 Java基础语法之final、static、匿名对象、内部类
 入门设计模式之桥梁模式
 入门设计模式之外观模式
 入门设计模式之策略
 入门设计模式之观察者
 入门设计模式之模板
 入门设计模式之原型
 入门设计模式之工厂
 几分钟几张图教你学会如何使用UML
入门设计模式之建造者

原文地址：https://www.cnblogs.com/Sun584125503/p/7760063.html