大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

專注Java教育14年 全國咨詢/投訴熱線：400-8080-105
動力節點LOGO圖
始于2009，口口相傳的Java黃埔軍校
首頁 hot資訊 JS實現登陸界面

JS實現登陸界面

更新時間：2021-09-03 10:37:52 來源：動力節點 瀏覽1039次 

<!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>

再給它稍微優化一下

<!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="text" id="t2" value="請輸入密碼">
    <br>
    確認密碼：<input type="text" id="t3" value="請確認">
    <br>    
    E-mail：<input type="text" id="t4" value="請輸入郵件地址">
    <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;//獲取默認值
        if(strName==defaultName){
            alert("用戶名為默認值，請重新輸入");
            uesrObj.focus();//自動獲取焦點
            return false;
        }
        if(strName.length==0){
            alert("用戶名不能為空");
            uesrObj.focus();
            return false;
        }
        if(strName.length<4||strName.length>16){
            alert("用戶名的長度應在4~16之間");
            uesrObj.select();//制動獲取選中對象
            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){//檢查是否有括號里面的符號 有的話返回 -1
        alert("郵件地址應同時包含 @ . 兩個符號");
        emailObj.select();
        return false;
       }
     }
 </script>
</body>
</html>

以上就是動力節點小編介紹的"JS實現登陸界面"，希望對大家有幫助，想了解更多可查看JavaScript教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。

  • 男 女

提交申請后，顧問老師會電話與您溝通安排學習

免費課程推薦 >>
技術文檔推薦 >>
主站蜘蛛池模板： 欧美xxxx8888视频 | 精品久久久久久国产 | 亚洲国产系列久久精品99人人 | 四虎永久在线精品免费影视 | 欧美日韩性大片 | 国产不卡免费视频 | 黄色短视频在线播放 | 日本一级片在线观看 | 浮力影院欧美三级日本三级 | 国产精品午夜在线观看 | 涩爱tv| 国产草比| 奇米影音四色 | 国内国语一级毛片在线视频 | 男人资源站 | 玖玖玖精品视频免费播放 | 深夜福利视频在线一区 | 国产夜色| 四虎4hu永久免费视频大全 | 久久中文字幕免费视频 | 日韩欧美综合视频 | 私人影院在线免费观看 | 女人用粗大自熨喷水在线视频 | 99在线精品免费视频九九视 | 橘梨纱视频一区二区在线观看 | 国产精品一级毛片不收费 | 免费看91毛片 | 荔枝污| 亚洲伊人久久综合影院2021 | 欧美中文综合在线视频 | 久久99精品国产麻豆不卡 | 成人深夜网站 | 四虎新地址4hu 你懂的 | 国产 magnet| 欧美一级爱爱 | 美日韩中文字幕 | 一级欧美毛片成人免费视频 | 亚洲国产一区在线精选 | 九九黄色网 | 成人欧美一区二区三区黑人妖 | 国产福利一区二区精品视频 |