摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發事件。

上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。

用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單：

  

  
  

  
      
      
      
      13333333331
      13333333332
      13333333333
    
      
    預覽  
    
    提交  
    
  

用JavaScript獲取表單的屬性值，或者表單字段的值，可以直接通過 elem.name 的方式

alert(form1.action); => "/login"
alert(form1.method); => "post"
alert(form1.user_name.value) => ""

而要獲取表單中的字段，則通過：

// 屬于本表單元素nodelist類數組，如果通過form屬性指定到其他表單，不會算作本表單元素，下面獲取到的元素是field 0，field 1，field 2，field 5
console.log(form1.elements);  => [...,...,...] 

// 屬于本表單元素個數，如果通過form屬性指定到其他表單，不會算作本表單元素
console.log(form1.length);  => 4 

// nodelist中下標為2的表單元素
console.log(form1[1]);  => 

// 表單中 name="user_name" 的元素,有同名的字段則返回一個nodelst類數組
console.log(form1["user_name"]);  =>  或 nodelist

// 獲取表單全部內容,詳情見下面的 “提交” 條目
jQuery("#form1").serialize(); => user_name=&user_email=&user_phone=13333333331
jQuery("#form1").serializeArray(); => [] 一個數組，里面是每個字段的鍵值對
new FormData(form1) => 沒有返回值

表單本身的屬性可以通過JavaScript賦值，比如 action , method , target 等。例如

// 把表單提交到 "/signIn"
form1.action = "/signIn";

// 修改表單提交方式為 "GET"
form1.method = "GET";

而給表單元素賦值，則是通過 elem.value 的方式，例如

// 將user_name的值設定為 "hello world"
form1.user_name.value = "hello world"; 

// 選中select中值為2的option
form1.user_phone.value = 2; 

可以通過html或者JavaScript的方式把表單值重置為頁面初始的樣子。
html方式為點擊 type="reset" 的 input 或 button。JavaScript的方式為 form1.reset() 。
如果表單中應用了第三方UI庫如 select2 ，重置后還需要手動觸發表單元素的change事件，以觸發第三方庫更新UI。常用的方式是：

form1.reset();
$(form1.user_phone).change();

傳統的表單校驗方式是通過監聽的 submit 事件或是表單字段的 input , focus , blur , change 事件，去觸發JavaScript中指定的校驗規則，來確定表單是提交還是拒絕提交。

步入html5時代之后，可以僅通過html本身完成表單提交前的校驗工作。方式是給表單字段加上 required 和 pattern 屬性，required 是告訴瀏覽器這個字段需要校驗，而 pattern 則指定一個正則表達式形式的校驗規則。在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。
想要手動檢查整個表單是否通過了校驗規則，可以通過 form.checkValidity() 方法，它會返回一個布爾值。

比較知名的表單校驗插件是 jquery-validation 。

提交表單時，表單擁有的字段會按照method中的指定方式提交給服務器，而表單提交的字段規則是：