JS實現登陸介面

啵 啵 仔發表於2020-11-19
JS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 100px;
            height: 20px;
            /* float: left; */
        }
        div{
            width: 100px;
            height: 20px;
            background-color: blueviolet;
            /* float: left; */
            display: none;
        }
    </style>
     

</head>
<body>
    <form id="myform">
    登陸：<input type="text" id="t1" value="">
    <br>
    密碼：<input type="password" id="t2" value="">
    <br>
    確認密碼：<input type="password" id="t3" value="">
    <br>
    
    電子郵件：<input type="text" id="t4" value="">
    <br>
    <input type="submit" value="登陸">
</form> 
 <script>
     window.onload=function (){
         var formObj=document.getElementById("myform");
         formObj.onsubmit=checkAll;
     }
     function checkAll(){
         if(userName()&&checkPass()&&checkRpass()&&checkEmail()){
            document.write("<h2>恭喜你</h2>");
             document.write("<h2>登陸成功</h2>");
         }
      
     }

     function userName(){
         var strName=document.getElementById("t1").value;
         if(strName.length==0){
             alert("使用者名稱不能為空");
             return false;
         }
         if(strName.length<4||strName.length>16){
             alert("使用者名稱的長度應在4~16之間");
             return false;
         }
        return true;
     }

     function checkPass(){
         var pass=document.getElementById("t2").value;
         if(pass.length==0){
             alert("密碼不能為空");
             return false;
         }
         if(pass.length<6||pass.length>32){
             alert("為了保證您的安全，密碼長度為6位以上32位以下");
             return false;
         }
         return true;
     }
     function checkRpass(){
         var rpass=document.getElementById("t3").value;
         var pass=document.getElementById("t2").value;
         if(rpass!=pass){
             alert("密碼與原密碼不一致");
             return false;
         }
         return true;
     }
   function checkEmail(){
       var  email=document.getElementById("t4").value;
       if(email.length==0){
           alert("郵件地址不能為空");
           return false;
       }
       if(email.indexOf("@")==-1&&email.indexOf(".")==-1){
           alert("郵件地址應同時包含 @ . 兩個符號");
           return false;
       }
       return true;
   }




 </script>

</body>
</html>

相關文章