上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。
Sign in to like and favorite skills
#form表单那点事儿(下) 进阶篇
上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。
目录：
用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单：
<form id='form0'></form> <form action="/login" method="post" target="blank" id='form1'> <input type="text" name='user_name'> <!--field 0--> <input type="email" name='user_email'> <!--field 1--> <select name='user_phone'> <!--field 2--> <option value='1'>13333333331</option> <option value='2'>13333333332</option> <option value='3'>13333333333</option> </select> <input type="text" name='form0_user_phone' form='form0'> <!--field 3--> <button type='submit' form='form0'>预览</button> <!--field 4--> <button type='submit'>提交</button> <!--field 5--> </form>
用JavaScript获取表单的属性值，或者表单字段的值，可以直接通过
elem.namealert(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); => [<input>...,...,...</button>] // 属于本表单元素个数，如果通过form属性指定到其他表单，不会算作本表单元素 console.log(form1.length); => 4 // nodelist中下标为2的表单元素 console.log(form1[1]); => <input type="email" name='user_email'> // 表单中 name='user_name' 的元素,有同名的字段则返回一个nodelst类数组 console.log(form1['user_name']); => <input type="text" name='user_name'> 或 nodelist // 获取表单全部内容,详情见下面的 “提交” 条目 jQuery('#form1').serialize(); => user_name=&user_email=&user_phone=13333333331 jQuery('#form1').serializeArray(); => [] 一个数组，里面是每个字段的键值对 new FormData(form1) => 没有返回值
表单本身的属性可以通过JavaScript赋值，比如
actionmethodtarget// 把表单提交到 "/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'inputbuttonform1.reset()select2form1.reset(); $(form1.user_phone).change();
传统的表单校验方式是通过监听的
submitinputfocusblurchange步入html5时代之后，可以仅通过html本身完成表单提交前的校验工作。方式是给表单字段加上
requiredpatternrequiredpatternform.checkValidity()比较知名的表单校验插件是 jquery-validation 。
提交表单时，表单拥有的字段会按照method中的指定方式提交给服务器，而表单提交的字段规则是：
| 表单元素 | type | 规则 |
|---|---|---|
| <input> | button | 永远不提交 |
| <input> | checkbox | 只在勾选后提交 |
| <input> | file | 永远提交，即使为空值 |
| <input> | hidden | 永远提交，即使为空值 |
| <input> | image | 永远提交，即使为空值 |
| <input> | password | 永远提交，即使为空值 |
| <input> | radio | 只在勾选后提交，如果一组Radio没有任何勾选，全部不提交。 |
| <input> | reset | 永远不提交 |
| <input> | submit | 点击哪个按钮，则提交这个按钮的值，其他的SUBMIT按钮值都不提交。 如果表单的提交行为是由JavaScript脚本触发的，则不提交任何值。 |
| <input> | text | 永远提交，即使为空值 |
| <button> | button | 永远不提交 |
| <button> | reset | 永远不提交 |
| <button> | submit | 点击哪个按钮提交表单，则提交这个按钮的值。 如果省略TYPE，IE默认为BUTTON，火狐默认SUBMIT。 |
| <select> | - | 永远提交，即使为空值。 |
| <textarea> | - | 永远提交，即使为空值。 |
规则来源 http://www.cnblogs.com/manors/archive/2010/03/11/1683727.html
GET方法提交表单，表单字段会被encodeURIComponent转换，并在url中显示出来。而post方法提交表单，会在请求body中发送表单字段键值对。
在通过JavaScript异步提交表单时，如何按照上面的规则去获取表单数据，jquery提供了
serialize()serializeArray()表单提交到服务器时，会触发
submitform.submit()form1.onsubmit = function(event){ event.preventDefault(); // 阻止默认事件，表单将不会提交到服务器 if(confirm('你真的要提交我吗~')){ this.submit(); // 点击确定后，表单会被提交 } }
###不提交空字段 通过上方的表单提交规则可以知道，很多时候，无论是否填写了值，在提交的时候，该字段都会被提交到服务器。而在执行条件筛选表单提交的时候，由于常用的是GET请求，浏览器地址栏中通常会出现一长串字符。 这对于有洁癖的用户来说是无法忍受的，所以需要在提交表单前做一点小动作，让值为空的字段不提交到服务器。
// 本段代码使用了jquery var form = $('form'), fields = form.find(':input'); form.on('submit',function(event){ event.preventDefault(); // 阻止默认事件，表单将不会提交到服务器 fields.each(function(){ if(!this.value.length) this.disabled = 'disabled'; // 含有disabled属性的表单字段将不会被提交 }); this.submit(); })
###异步提交文件 一般而言，文件提交都是同步的，因为一般的表单序列化方法，无法传输二进制的文件。而如果要实现异步上传文件的需求，主要依靠两种方式。 一种是新建一个
iframenew FormData()iframenew FormData()# 这是一个来自 MDN 的示例 // 原生JavaScript方式 var xhr = new XMLHttpRequest(); xhr.open("POST", form1.action); xhr.send(new FormData(form1)); // 使用jquery的ajax() $.ajax({ url: form1.action, type: "POST", data: new FormData(form1), processData: false, // 告诉jQuery不要去处理发送的数据 contentType: false // 告诉jQuery不要去设置Content-Type请求头 });
更多用法请参考 MDN--使用FormData对象 。