1. 程式人生 > >10.31

10.31

class ext ont eat inpu cnblogs rip iso button

<!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{
    width: 400px;
    height: 250px;
    padding-left:100px;
    padding-top:40px;
    background-color:yellow;
}
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;
}

  

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{
    width: 400px;
    height: 300px;
    padding-left:100px;
    padding-top:40px;
    background-color:yellow;
}
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;
}

  

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("註冊成功")
        }

  

10.31