溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用JS代碼實(shí)現(xiàn)登陸界面

發(fā)布時(shí)間：2022-09-27 09:31:02 來源：億速云 閱讀：158 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“怎么用JS代碼實(shí)現(xiàn)登陸界面”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用JS代碼實(shí)現(xiàn)登陸界面”吧!

代碼如下：

<!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>
    確認(rèn)密碼：<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("用戶名的長度應(yīng)在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("郵件地址應(yīng)同時(shí)包含 @ . 兩個(gè)符號(hào)");           return false;
       }       return true;
   } </script></body></html>

再給它稍微優(yōu)化一下

<!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="請(qǐng)輸入用戶名">
    <br>
    密碼：<input type="text" id="t2" value="請(qǐng)輸入密碼">
    <br>
    確認(rèn)密碼：<input type="text" id="t3" value="請(qǐng)確認(rèn)">
    <br>    
    E-mail：<input type="text" id="t4" value="請(qǐng)輸入郵件地址">
    <br>
    出生日期：<select id="year"></select>年    <select id="month"></select>月    <select id="day"></select>日    <br>
    <input type="submit" value="登陸"></form> 
  <script> 
  function $ (ElementID){       return document.getElementById(ElementID);
   }     window.onload=function (){         var formObj=$("myform");
         formObj.onsubmit=checkAll;
         year();
         month();
         day();        var name=$("t1");        var pass=$("t2");        var rpass=$("t3");        var email=$("t4");
        name.onfocus=empty;
        pass.onfocus=empty;
        rpass.onfocus=empty;
        email.onfocus=empty;
     }    function empty(){        if(this.value==this.defaultValue){            this.value="";
        }
    }     function year(){         var yearObj=$("year");         var year=new Date();           var newYear=year.getFullYear();           for(var i=1900;i<=newYear;i++){
                yearObj.options[i-1900]=new Option(i);
           }
     }     function month(){         var monthObj=$("month");         for(var i=0;i<12;i++){
             monthObj.options[i]=new Option(i+1);
         }
     }     function day(){         var dayObj=$("day");         for(var i=0;i<31;i++){
            dayObj.options[i]=new Option(i+1);
         }
     }     function checkAll(){        var uesrObj=$("t1");        var strName=uesrObj.value;        var defaultName=uesrObj.defaultValue;//獲取默認(rèn)值
        if(strName==defaultName){
            alert("用戶名為默認(rèn)值，請(qǐng)重新輸入");
            uesrObj.focus();//自動(dòng)獲取焦點(diǎn)
            return false;
        }        if(strName.length==0){
            alert("用戶名不能為空");
            uesrObj.focus();            return false;
        }        if(strName.length<4||strName.length>16){
            alert("用戶名的長度應(yīng)在4~16之間");
            uesrObj.select();//制動(dòng)獲取選中對(duì)象
            return false;
        }       var passObj=$("t2");      var strPass=passObj.value;       if(strPass==0){
        alert("密碼不能為空");
        passObj.focus();        return false;
       }       if(strPass.length<6||strPass.length>32){
             alert("為了保證您的安全，密碼長度為6位以上32位以下");
             passObj.select();             return false;
         }       var rpassObj=$("t3");       var strRpass=rpassObj.value;       if(strRpass!=strPass){
        alert("密碼與原密碼不一致");
             rpassObj.select();             return false;
       }       var emailObj=$("t4");       var strEmail=emailObj.value;       if(strEmail.length==0){
            alert("郵件地址不能為空");
            emailObj.focus();           return false;
       }       if(strEmail.indexOf("@")==-1&&strEmail.indexOf(".")==-1){//檢查是否有括號(hào)里面的符號(hào) 有的話返回 -1
        alert("郵件地址應(yīng)同時(shí)包含 @ . 兩個(gè)符號(hào)");
        emailObj.select();        return false;
       }
     } </script></body></html>

到此，相信大家對(duì)“怎么用JS代碼實(shí)現(xiàn)登陸界面”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手