引言:JavaScript最早被設計出來就是為了實現對註冊表單的驗證,本文簡單的介紹了JavaScript的表單操作 1.獲取表單對象的方法 1.通過表單ID獲取:document.getElementById("formId"); 2.通過表單的索引獲取:document.forms[index] ...
引言:JavaScript最早被設計出來就是為了實現對註冊表單的驗證,本文簡單的介紹了JavaScript的表單操作
1.獲取表單對象的方法
1.通過表單ID獲取:document.getElementById("formId");
2.通過表單的索引獲取:document.forms[index];
3.通過表單的name獲取:document.forms["formName"];
document.formName;
2.表單對象常用的屬性
name 獲取或設置表單的 name 屬性
action 獲取或者設置表單提交的地址
elements 獲取一個數組,包括該表單中所有的表單域
length 獲取表單的表單域的數量
method 獲取或設置表單的表單的提交方式:get(預設)、post
enctype 獲取或設置表單的編碼方式:application/x-www-form-urlencoded(預設)、multipart/form-data、text/plain
3.get方式和post方式的區別
1.get的通過URL參數會顯示在URL中,較不安全。
post的參數通過請求實體(Request body)傳輸,不會顯示在URL中,相對安全。
2.get的參數長度有限制,長度視瀏覽器而定一般在2k左右。post的長度理論上是無限的
3.GET請求會被瀏覽器主動cache(緩存),而POST不會,除非手動設置。
4.GET請求參數會被完整保留在瀏覽器歷史記錄里,而POST中的參數不會被保留。
4.enctype 編碼方式
GET請求只能進行url編碼(以“?name1=value1&name2=value2...”的方式),而POST支持多種編碼方式。
post編碼方式:
1.application/x-www-form-urlencoded(預設)以(name1=value1&name2=value2...)的方式
2.multipart/form-data
以類似於(Content-Disposition: form-data; name="name1"
"value1"
Content-Disposition: form-data; name="name2"
"value2"
)的方式
3.text/plain
以(name1=value1
name2=value2
...)的方式
5.表單對象的方法
submit():相當於單擊 submit 按鈕,表示表單提交到指定頁面
reset():相當於單擊 reset 按鈕,表示所有表單域到初始值
6.表單對象的事件
onsubmit :在表單提交之前觸發(在表單外部通過submit()提交表單不會觸發onsubmit事件)
onreset :在表單被重置之前觸發
註:讓onsubmit事件、onreset事件返回一個false就可以阻止事件的執行(阻止表單提交或重置)
如:
<form onreset="return false" onsubmit="return false"></form>
或
<form onreset="return test()" onsubmit="return test()"></form>
function test(){
return false;
}
7.表單域操作
7.1引用表單域的方法
1.document.getElementById(id);
2.form.elements[i];
3.form.elements[name];
4. form.name;
註:“form”是表單對象
7.2 表單域的常用屬性
1.disabled :使表單域不能接受用戶的操作,變為只讀
2.name :獲取或設置表單域的名稱
3.form:獲取該表單域所屬的表單
4.value:獲取或設置表單域的值
5.type :判斷表單域的類型
6.select標簽的屬性
1)selectedIndex表示當前選中的option的索引
2)options表示所有option標簽對象的一個數組
3)length表示右多少個下拉列表項
7.option標簽的屬性
1)value 就是選項的值,提交時會提交該屬性的值
2)text 就是option標簽中間文本值,類似於innerText
3)selected="selected" 表示頁面載入時預設的選項
7.3表單域的方法(A)
1.focus():使表單域獲得焦點
2. blur():使表單域失去焦點
7.4 文本域(text, password, textarea )
通過value 屬性獲取和設置文本域內容
通過defaultValue 獲得文本域的預設值。reset 方法就是調用該屬性。
7.5單選按鈕組和覆選框常用操作
通過 checked 屬性獲得選中和未選中的狀態。
通過遍歷來獲取被選中的值
7.6下拉列表的使用
1.使用 value 屬性獲取和設置下拉列表選中選項的值
2.使用 selectedIndex 屬性獲取當前被選中選項的索引
3.使用 options 屬性獲取所有選項集合
4.使用 option 對象的 value 屬性和 text 屬性, 可以讀寫這兩個屬性。
5.使用 option 對象的 selected 屬性選中該 option
8.表單驗證操作(A)
應用驗證函數的兩種常用的方法:
1. <input type="submit" onclick="return validate()"/>
2. <form onsubmit="return validate()"/>
在函數中寫驗證代碼不滿足就返回false(若返回 false,則不提交表單)