摘要：在表單提交時(shí)，瀏覽器會(huì)自動(dòng)進(jìn)行一系列的校驗(yàn)工作，沒有通過校驗(yàn)的表單是無法提交到服務(wù)器的。而方法提交表單，會(huì)在請(qǐng)求中發(fā)送表單字段鍵值對(duì)。表單提交事件表單提交到服務(wù)器時(shí)，會(huì)觸發(fā)事件。

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

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

  

  
  

  
      
      
      
      13333333331
      13333333332
      13333333333
    
      
    預(yù)覽  
    
    提交  
    
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

傳統(tǒng)的表單校驗(yàn)方式是通過監(jiān)聽的 submit 事件或是表單字段的 input , focus , blur , change 事件，去觸發(fā)JavaScript中指定的校驗(yàn)規(guī)則，來確定表單是提交還是拒絕提交。

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

比較知名的表單校驗(yàn)插件是 jquery-validation 。

提交表單時(shí)，表單擁有的字段會(huì)按照method中的指定方式提交給服務(wù)器，而表單提交的字段規(guī)則是：