html javascript 簡單頁面追加jQuery

時間 2019-11-11

標籤 html javascript 簡單頁面追加 jquery 欄目 HTML 简体版

原文原文鏈接

對本身這兩天學習html javascript的一個簡單的小運用。如上圖所示，一個簡答的小頁面，並未實現頁面鏈接功能，只是有頁面佈局和事件處理。對姓名、密碼、郵箱的輸入格式要求，括不能爲空、格式正確、長度大於6位javascript

主要記錄下本身的思路和克服的問題：html

　　思路：頁面佈局完後，javascript 對頁面文本框事件處理。java

　　　　一丶經過window.onload() = function() {}來做爲主體，表示頁面加載完後運行函數。jquery

　　　　二丶經過document.getElementById得到dom對象。dom

　　　　三丶經過format()函數來判斷所得的值的格式符合什麼樣的條件，並返回相應的String:"above","kong","match"值eclipse

　　　　四丶姓名密碼郵箱分別作個事件函數 dom對象.onblur = function () {}函數

　　　　五丶分別將 dom對象.value 經過函數format()來判斷獲得的值，而後經過switch() {}來進行相應處理佈局

　　　　六丶處理是將輸入框的文字看做是 span 再經過 dom對象.innerHTML賦值獲得相應的改變。學習

　　解決問題和收穫：ui

　　　　一丶開始採用的是別的思路。先將若是文本爲空做爲一類函數。這樣寫的錯誤是姓名、密碼、郵箱文本框被事件處理，後面若是在寫格式正確和長度大於6位的函數又會對文本框onblur事件處理。而一個文本框只能一個相同事件處理，前面的　　　　　　　　　　會被後面的所覆蓋。因此就只能偵測到一種格式。改成以姓名、密碼、郵箱分別爲一個函數處理。

               function isNull(span,div) {
                  div.onblur = function() {
                   if (div.value == "") {
                        span.innerHTML = "<font color =red>爲空</font>"
                        //得到js對象可是不能帶js對象的屬性賦值在利用。innerHTML須要每次代入寫
                   }
                     }
                 }

                 isNull(namespan,namediv)
                 isNull(passwordspan,passworddiv)
                 isNull(emailspan,emaildiv)

　　　二丶得到dom對象的屬性別先賦下來，屬性是隨着頁面的變更而變更的，每次用dom對象.value來調用。

三丶div.onblur = function() 本身將他理解爲一個阻塞式的函數。當執行到這裏時程序會等着事件發生，若是發生了則會另開相似線程的將後面的執行而且會再會回到這裏來等待。若是沒有發生執行後面的可是也會留個線程來等待事件發生。

　　　四丶html雖然是由上而下的執行，可是在javascript中上面的函數也能夠調用下面的函數。

目標：用jQuery寫出來實現

}
})

</script>

javascript +html代碼

<html>
<head>
  <title>註冊頁面</title>
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     <meta http-equiv="description" content="this is my page">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <script type="text/javascript">
         window.onload = function() {
   var nameDiv = document.getElementById("namediv")
   var nameSpan = document.getElementById("namespan")
   /* var nameVal = nameDiv.value; */
   //不能先獲得他的value值由於隨時都在改變，因此先獲得不能用在後面
   var passwordDiv = document.getElementById("passworddiv")
   var passwordSpan = document.getElementById("passwordspan")
   var emailDiv = document.getElementById("emaildiv")
   var emailSpan = document.getElementById("emailspan")

   nameDiv.onblur = function () {
    var str = format(nameDiv.value)
    //這裏是個阻塞式程序只要發生時間就再一次玩下執行，而且再次等待
    switch(str) {
    case "kong" :
     nameSpan.innerHTML = "<font color =red>姓名不爲空</font>"
    break;
    case "above" :
     nameSpan.innerHTML = "<font color =red>正確</font>"
    break;
    default :
     nameSpan.innerHTML = "<font color =red>需超過6位</font>"
    }
   }
   //名字的


   emailDiv.onblur = function () {
    var str = format(emailDiv.value)
    //這裏是個阻塞式程序只要發生時間就再一次玩下執行，而且再次等待
    switch(str) {
    case "kong" :
     emailSpan.innerHTML = "<font color =red>不能爲空</font>"
    break;
    case "match" :
     emailSpan.innerHTML = "<font color =red>正確</font>"
    break;
    default :
     emailSpan.innerHTML = "<font color =red>輸入正確郵箱</font>"
    }
   }

   passwordDiv.onblur = function () {
    var str = format(passwordDiv.value)
    //這裏是個阻塞式程序只要發生時間就再一次玩下執行，而且再次等待
    switch(str) {
    case "kong" :
     passwordSpan.innerHTML = "<font color =red>不能爲空</font>"
    break;
    case "above" :
     passwordSpan.innerHTML = "<font color =red>正確</font>"
    break;
    default :
     passwordSpan.innerHTML = "<font color =red>大於6位密碼</font>"
    }
   }


      function format(val) {
      var email =/^(\w)+@(\w)+(\.\w+)+$/
      var len = /^(\w){6,}$/
    if(val == "") {
     return "kong"
    }

    if(email.test(val)) {
     return "match"
    }

    if(len.test(val)) {
     return "above"
    }

   }
}

/*    function isNull(span,div) {
    div.onblur = function() {
     if (div.value == "") {
          span.innerHTML = "<font color =red>爲空</font>"
          //得到js對象可是不能帶js對象的屬性賦值在利用。innerHTML須要每次代入寫
     }
       }
   }

   isNull(namespan,namediv)
   isNull(passwordspan,passworddiv)
   isNull(emailspan,emaildiv)
   //下面的阻塞式只能一個進行事件檢測。後面的會將前面的覆蓋。
   //因此設計程序的思想有錯，應該先檢測格式，再檢測事件，而不是先檢測事件
   //再檢測格式
   document.getElementById("emaildiv").onblur =function() {
    alert(1)
    var email =/^(\w)+@(\w)+(\.\w+)+$/
    if(email.test(emaildiv.value)) {
      emailspan.innerHTML = "<font color =red>爲空</font>"
    }
   }
   */

   //下面相似一個阻塞式程序，程序執行到這個時候，會分爲兩個線程，一個線程
   //繼續執行，一個線程等着重複執行
/*   namediv.onblur = function() {
    if (namediv.value == "") {
        alert(1)
         namespan.innerHTML = "<font color =red>爲空</font>"
         //得到js對象可是不能帶js對象的屬性賦值在利用。innerHTML須要每次代入寫
    } */

</script>
</head>

<body>
  <div id= top>
   <table>
    <tr>
          
     <td><image src = images/logo.png width = 100 height = 30 ></image></td>
     <td>
           
           
           
           
      <image src = images/cart.gif></image>
      <a><font>購物車</font> </a>|
      <a><font>幫助中心</font></a>|
      <a><font>個人帳戶</font></a>|
      <a><font>新用戶註冊</font></a>
     </td>
    </tr>
   </table>
  </div>
  <div id = menu>
   <table bgcolor = #1C3F09 width = 100% >
    <tr align = center>
     <td>
      <a href="http://www.baidu.com"><font color = white size = 5>文學</font></a>        <a><font color = white size = 5>生活</font></a>        <a><font color = white size = 5>計算機</font></a>        <a><font color = white size = 5>外語</font></a>        <a><font color = white size = 5>經管</font></a>        <a><font color = white size = 5>所有商品目錄</font></a>            </td>    </tr>   </table>  </div >  <div id= content>   <table width = 100% bgcolor = #B6B684>    <tr>     <td align = right>      Search<input/ type = text name= text>      <input/ type=submit name=s value= 搜索>         </td>    </tr>   </table>  </div>  <div>   <table width = 100%>     <div>      <tr>       <table width=40% align = center >        <tr>         <td>          <h1>新會員註冊</h1>          </td>        </tr>       </table>      </tr>      <form action = * method = get>       <table align = center>        <tr>          <td>姓名</td>           <td><input type = "text" name = "textname" value = "超過6位中文"                 id = "namediv" />          </td>          <td>           <span id = "namespan"><font color =red>請輸入姓名</font></span>          </td>         </tr>         <tr>          <td>密碼</td>          <td><input type = "password" name = "passwordname" id = "passworddiv"/></td>          <td>           <span id = "passwordspan"><font color =red>請輸入密碼</font></span>          </td>         </tr>         <tr>          <td>性別</td>          <td>           <input/ type = "radio" name = "sex" value = girl checked = 0>女           <input/ type = radio name = sex value = boy>男          </td>         </tr>         <tr>          <td>愛好</td>          <td>           <input/ type = "checkbox"   name = aihao value = basketball checked = 1>籃球           <input/type = "checkbox" name = aihao value = zuqiu > 足球           <input/type = "checkbox" name = aihao value = pingpang> 乒乓          </td>         </tr>         <tr>          <td> 國籍</td>          <td>           <select name = guoji size = 1>             <option value = china >中國</option>            <option value = america>美國</option>            <option value = japan>日本</option>           </select>          </td>         </tr>         <tr>          <td>郵箱</td>          <td><input/ type = text   name = mail id = emaildiv></td>          <td>           <span id = "emailspan"><font color =red>請輸入郵箱</font></span>          </td>                   </tr>         <tr>          <td>上傳頭像</td>          <td><input/ type = file name = touxiang ></td>         </tr>         <tr>          <td> 備註</td>          <td><textarea name = text ></textarea></td>         </tr>         <tr align = "center">          <td colspan = 2>           <input/ type = submit name = zhuce value = 註冊>           <input/ type = reset name = quxiao value = 取消>          </td>         </tr>         <tr align = center>          <td colspan = 2><input type = image name = xiangpian src = "img.jpg"/></td>         </tr>       </table>      </form>     </div>    </tr>   </table>  </div>  <div>   <table width=100%>    <tr>     <td rowspan=2 align = center>      <image src = "G:/myeclipse Workbench/day 01/WebRoot/html/images/logo.png"></image>     </td>     <td align =left>                                           CONTACT US     </td>    </tr>    <tr>     <td align =left>                                       copyright 2008©BookStore All Rights RESERVED     </td>    </tr>   </table>     </div> </body></html>