form表单那点事儿(下) 进阶篇

摘要：在表单提交时，浏览器会自动进行一系列的校验工作，没有通过校验的表单是无法提交到服务器的。而方法提交表单，会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时，会触发事件。

上一篇主要温习了一下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中的指定方式提交给服务器，而表单提交的字段规则是：