碼上快樂

相關內容    簡體    繁體

JS form表單操作大全

本文轉載自   查看原文   2020-11-17 21:07   1327 

表單是一個網站的重要組成內容，是動態網頁的一種主要的表現形式，它主要用於實現收集瀏覽者的信息或實現搜索等功能。JavaScript 對表單的處理是作為一個對象來處理的。在 JavaScript 中，根據其作用，對象主要分為 JavaScript 內置對象、DOM 對象和 BOM（瀏覽器）對象。表單屬於 DOM 對象，所以對表單對象的處理可以使用 DOM。

1. 表單對象

一個 form 對象代表一個 HTML 表單，在 HTML 頁面中由 <form> 標簽對構成。JavaScript 運行引擎會自動為每一個表單標簽建立一個表單對象。對 form 對象的操作需要使用它的屬性或方法。form 對象的常用屬性和方法分別見表 1 和表 2。

表 1：form 對象常用屬性

屬性

描述

action

設置或返回表單的 action 屬性

elements

表示包含表單中所有表單元素的數組，使用索引引用其中的元素

length

返回表單中的表單元素數目

method

設置或返回將數據發送到服務器的 HTTP 方法

name

設置或返回表單的名稱

target

設置或返回表單提交的數據所顯示的 frame 或窗口

onreset

在重置表單元素之前調用事件處理方法

onsubmit

在提交表單之前調用事件處理方法

 

表 2：form 對象常用方法

方法

描述

reset()

把表單的所有輸入元素重置為它們的默認值

submit()

提交表單


獲取表單的方式有以下幾種：

  • 通過 document 的 forms 屬性：document.forms[索引值]，索引值從 0 開 始。
  • 直接引用表單的 name 屬性：document.formName。
  • 通過表單的 ID：調用 document.getElementById() 方法。
  • 通過表單的 name 屬性：調用 document.getElementsByName() [表單索引]方法。
  • 通過表單標簽：調用 document.getElementsByTagName() [表單索引]方法。
  • 通過選擇器：調用 document.querySelectorAll() [表單索引]方法。


上述方法中，最常用的是第 2 種和第 3 種。例如：<form name="form1" id="fm"> … </form> var fm = document.form1;

//獲取表單方式：直接引用表單 name 屬性 var fm = document.getElementById("fm"); //獲取表單方式：通過 ID 獲取表單

2. 表單元素對象

在 HTML 頁面中 <form> 標簽對之間包含了用於提供給用戶輸入或選擇數據的表單元素。JavaScript 運行引擎會自動為每一個表單元素標簽建立一個表單元素對象。表單元素按使用的標簽可分為三大類：輸入元素（<input>標簽）、選擇元素（<select>標簽）和文本域元素（<textarea>標簽）。

其中輸入元素包括：文本框（text）、密碼框（password）、隱藏域（hidden）、文件域（file）、單選框（radio）、復選框（checkbox）、普通按鈕（button）、提交按鈕（submit）、重置按鈕（reset）；選擇元素包括：多項選擇列表或下拉菜單（select）、選項（option）；文本域只有 textarea 一個元素。對表單元素對象的操作需要使用它們的屬性或方法。

不同表單元素具有的屬性和方法有些相同有些不同，下面將分別按公共和私有兩方面來介紹它們的屬性和方法。

1) 表單元素的常用屬性

① 表單元素常用的公共屬性主要有以下幾個：

  • disabled：設置或返回是否禁用表單元素。注意：hidden 元素沒有 disabled 屬性。
  • id：設置或返回表單元素的 id 屬性。
  • name：設置或返回表單元素的 name 屬性。注意：option 元素沒有 name 屬性。
  • type：對輸入元素可設置或返回 type 屬性；對選擇和文本域兩類元素則只能返回 type 屬性。
  • value：設置或返回表單元素的 value 屬性。注意：select 元素沒有 value 屬性。


② text 和 password 元素具有以下幾個常用的私有屬性：

  • defaultValue：設置或返回文本框或密碼框的默認值；
  • maxLength：設置或返回文本框或密碼框中最多可輸入的字符數；
  • readOnly：設置或返回文本框或密碼框是否是只讀的；
  • size：設置或返回文本框或密碼框的尺寸（長度）。


③ textarea 元素具有以下幾個常用的私有屬性：

  • defaultValue：設置或返回文本域元素的默認值。
  • rows：設置或返回文本域元素的高度。
  • cols：設置或返回文本域元素的寬度。


④ radio 和 checkbox 元素具有以下幾個常用的私有屬性：

  • checked：設置或返回單選框或復選框的選中狀態；
  • defaultChecked：返回單選框或復選框的默認選中狀態。


⑤ select 元素具有以下幾個常用的私有屬性：

  • length：返回選擇列表中的選項數目；
  • multiple：設置或返回是否選擇多個項目；
  • selectedIndex：設置或返回選擇列表中被選項目的索引號。注意：若允許多重選擇，則僅返回第一個被選選項的索引號；
  • size：設置或返回選擇列表中的可見行數。


⑥ option 元素具有以下幾個常用的私有屬性：

  • defaultSelected：返回 selected 屬性的默認值；
  • selected：設置或返回 selected 屬性的值；
  • text：設置或返回某個選項的純文本值。

2) 表單元素常用的事件屬性

① 表單元素的公共事件屬性主要有以下兩個：

  • onblur：當表單元素失去焦點時調用事件處理函數；
  • onfocus：當表單元素獲得焦點時調用事件處理函數。


② text、password、textarea 元素具有以下兩個私有的事件屬性：

  • onSelect：當選擇了一個 input 或 textarea 中的文本時調用事件處理函數；
  • onChange：當表單元素的內容發生改變並且元素失去焦點時調用事件處理函數。


③radio、checkbox、button、submit 和 reset 表單元素具有以下一個私有的事件屬性。

  • onClick：單擊復選框、單選框、普通按鈕、提交按鈕和重置按鈕時調用事件處理函數。

3) 表單元素常用的方法

① 表單元素常用的公共方法主要有以下兩個：

  • blur()：從表單元素上移開焦點；
  • focus()：在表單元素上設置焦點。


② text 和 password 元素具有以下一個私有的方法：

  • select()：選取文本框或密碼框中的內容。


③ radio、checkbox、button、submit 和 reset 表單元素具有以下一個私有的方法：

  • click()：在表單元素上單擊鼠標左鍵。


④ select 元素具有以下兩個私有的方法：

  • add()：向選擇列表添加一個選項；
  • remove()：從選擇列表中刪除一個選項。

4) 獲取表單元素的方式

獲取表單元素的方式有以下幾種：

  • 引用表單對象的 elements 屬性：document.formName.elements[索引值]。
  • 直接引用表單元素的 name 屬性：document.formName.name。
  • 通過表單元素的 ID：調用 document.getElementById() 方法。
  • 通過表單元素的 name 屬性：調用 document.getElementsByName()[表單元素索引]方法。
  • 通過表單元素標簽：調用 document.getElementsByTagName()[表單元素索引]方法。
  • 通過選擇器：調用 document.querySelectorAll()[表單元素索引]方法。


上述方法中，第 2～6 種方法都是比較常用的方法。

下面通過例 1 來演示表單及表單元素的獲取以及它們的一些常用屬性和方法的使用。

【例 1】使用 HTML DOM 操作表單及表單元素。

1.HTML 代碼

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>使用HTML DOM操作表單及表單元素</title>
  6. <script type="text/javascript" src="js/form.js"></script>
  7. </head>
  8. <body>
  9. <h2>個人信息注冊</h2>
  10. <form id="form" name="form1">
  11. <table border="1" width="630" cellpadding="5" cellspacing="0">
  12. <tr><td>用戶名</td><td><input type="text" name="username"/></td></tr>
  13. <tr><td>密 碼</td><td><input type="password" name="psw1"/></td></tr>
  14. <tr><td>確認密碼</td><td><input type="password" name="psw2"/></td></tr>
  15. <tr><td>性 別</td><td>
  16. <input type="radio" name="gender" value="女">女
  17. <input type="radio" name="gender" value="男">男
  18. </td></tr>
  19. <tr><td>掌握的語言</td><td>
  20. <input type="checkbox" name="lang" value="中文">中文
  21. <input type="checkbox" name="lang" value="英文">英文
  22. <input type="checkbox" name="lang" value="法文">法文
  23. <input type="checkbox" name="lang" value="日文">日文
  24. </td></tr>
  25. <tr><td>個人愛好</td><td><select name="hobby" size="4" multiple="miltiple">
  26. <option value="旅游">旅游</option>
  27. <option value="運動">運動</option>
  28. <option value="閱讀">閱讀</option>
  29. <option value="上網">上網</option>
  30. <option value="游戲">游戲</option>
  31. <option value="音樂">音樂</option>
  32. </select></td></tr>
  33. <tr><td>最高學歷</td><td><select name="degree">
  34. <option value="-1">--請選擇學歷--</option>
  35. <option value="博士">博士</option>
  36. <option value="碩士">碩士</option>
  37. <option value="本科">本科</option>
  38. <option value="專科">專科</option>
  39. <option value="高中">高中</option>
  40. <option value="初中">初中</option>
  41. <option value="小學">小學</option>
  42. </select></td></tr>
  43. <tr><td>個人簡介</td><td><textarea name="info" rows="6" cols="45"></textarea>
  44. </td></tr>
  45. <tr><td colspan="2" align="center">
  46. <input type="button" value="注 冊" id="regBtn">
  47. <input type="reset" value="重 置">
  48. </td></tr>
  49. </table>
  50. </form>
  51. </body>
  52. </html>


2.JavaScript 代碼（form.js）

  1. window.onload = function(){
  2. //聲明變量
  3. var sex,selDegree,infor;
  4. var hobbies = new Array(); //用於存儲選擇的愛好
  5. var langs = new Array(); //用於存儲選擇的語言
  6. var fr = document.form1;//獲取表單對象
  7. fr.username.focus();//使用表單元素的focus()方法使用戶名在頁面加載完后獲得焦點
  8. var oBtn = document.getElementById('regBtn');
  9. oBtn.onclick = function(){
  10. //判斷是否選擇了性別，以及獲取所選擇的值
  11. if(fr.gender[0].checked == true){
  12. sex = "女";
  13. }else if(fr.gender[1].checked == true){
  14. sex = "男";
  15. }
  16. //將選擇的語言存儲在langs數組中
  17. for(var i = 0; i < 4; i++){
  18. if(fr.lang[i].checked == true)
  19. langs.push(fr.lang[i].value);
  20. }
  21. //將選擇的愛好存儲到hobbies數組中
  22. for(i = 0; i < 6; i++){
  23. if(fr.hobby.options[i].selected == true)
  24. hobbies.push(fr.hobby.options[i].value);
  25. }
  26. var index = fr.degree.selectedIndex;//獲取被選中項的索引
  27. selDegree = fr.degree.options[index].value;//將選擇的學歷存儲在selDegree變量中
  28. infor = fr.info.value;
  29. var msg = "您注冊的個人信息如下：\n用戶名："+fr.username.value+"\n密碼："
  30. +fr.psw1.value+"\n性別："+sex+"\n掌握的語言有："+langs.join("、")+"\n愛好有："+
  31. hobbies.join("、")+"\n最高學歷是："+selDegree+"\n個人情況："+infor;
  32. alert(msg);
  33. };
  34. };

上述腳本代碼演示了直接通過 name 屬性來獲取表單及表單元素，以及它們的一些常用屬性和方法的使用。例如調用了 username 表單元素的 focus() 方法，使文本框在頁面加載完成后獲得焦點，這是一個提高用戶體驗的處理方法；此外通過表單元素的相關屬性演示了不同類型的表單元素值的獲取。在運行得到的表單中輸入數據，如圖 1 所示。


圖 1：在表單中輸入數據

提交后得到圖 2 所示結果。


圖 2：顯示用戶輸入的所有數據


為了減少數據無效時在客戶端和服務端之間傳輸時的網絡帶寬並降低服務器負擔，表單中的數據在提交給服務端處理之前通常需要先使用 JavaScript 進行數據的有效性校驗，即在客戶端需要校驗表單數據的有效性，以保證提交的數據符合不能為空、長度范圍、組成內容等有效性要求。在客戶端校驗表單數據的有效性通常會使用 DOM 元素的一些屬性以及正則表達式來進行。有關正則表達式的內容之后介紹。

鳴謝http://c.biancheng.net/view/8222.html


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 js 表單操作form Html form表單大全（一） 關於form與表單提交操作的一切 form表單js提交 js——form表單驗證 js重置form表單 JS 提交form表單 JS 提交form表單 js之form表單的獲取 基於JQuery的前端form表單操作
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM