title: 表单剧本
date: 2016-12-19 15:17
tags: JavaScript
0x00 表单基本
在 HTML 中，表单由 <form> 元夙来示意，然则在 JavaScript 中，表单对应的是 HTMLFormElement 范例，它具有的一些独占的属性和要领。
action: 吸收要求的 URL
elements: form 中一切控件的鸠合
length: form 中控件的数目
method: 要发送的 HTTP 要求范例
name: 表单的称号
reset(): 重置 form 域为默许值
submit(): 提交 form
target: 用于发送要乞降吸收相应的窗口的称号
acceptCharset: 服务器能够处置惩罚的字符集
enctype: 要求的编码范例。
查找表单
// 经由过程 ID 查找
var form = document.querySelector("#form1");
// 经由过程 document.forms 鸠合查找
var firstForm = document.forms[0] // 索引查找
var myForm = document.forms["form2"] // 取得 name 为 form2 的表单提交表单
// 通用提交表单
<input type="submit" value="Submit">
// 自定义提交表单
<button type="submit">Submit</button>
// 图象按钮
<input type="image" src="pho.gif">阻挠表单提交的默许行动
var form = document.querySelector("#myForm")
EventUtil.addHandler(form, "submit", function(event){
// 取得事宜对象
event = EventUtil.getEvent(event)
var target = EventUntil.getTarget(event)
// 阻挠默许事宜
EventUtil.preventDefault(event);
// 取得提交按钮
var btn = target.elements["submit-btn"]
// 考证表单
// do something
// 禁用提交按钮
btn.disabled = true
})为防止用户反复提交，应该在第一次提交表单今后就禁用提交按钮，或许应用
onsubmit事宜处置惩罚顺序作废后续的表单提交操纵
如上，要在第一次点击后就制止提交，只须要监听 submit 事宜，并在该事宜发作时禁用提交表单按钮即可。
表单字段
经由过程 form 的 elements 属性能够取得一切表单字段，然后能够装置索引或许 name 特征来接见它们。
假如多个表单控件都运用一个 name ，那末会放回一改 name 定名的一个 NodeList 鸠合
共有的表单字段属性
共有的表单字段属性:
disabled: 布尔值，示意当前字段是不是被禁用
form: 指向所属的 form
name: 当前字段的称号
type: 当前字段的范例
除了 <fieldset> 以外，一切的表单都有 type 属性，关于 <input> 元素，
该值等于 HTML 的 type 值。
关于<selete>元素该值以下:
<select>单选列表</select>：type 属性值
select-one<select multiple>多选列表</select>：type 属性值
select-multiple
共有的要领和事宜
每一个表单字段都有两个要领:focus() 和 blur() 要领。
另外，一切表单字段都支撑以下 3 个事宜:
blur: 字段落空核心时 触发
focus: 字段取得核心时触发
change: 关于
<input>和<textarea>元素，在它们落空核心且 value 值转变时触发；关于<select>元素，在其选项转变时触发。
0x01 文本框剧本
有两种体式格局表现文本框:<input> 的单行文本框和 <texarea> 的多行文本框。
<input type="text" size="25" maxlenth="50" value="how are you?">关于单行文本框，经由过程 size 特征能够指定文本框能够显现的字符数，经由过程 value 特征接见其内容，而maxlength则用于指定其能够接收的最大字符数。
相干于 <textarea> 要指定文本框的大小能够运用 rows 和 cols 特征。
<textarea rows="24" cols="5">who are you?</textarea>挑选文本
<input type="text"> 和 <textarea> 都支撑 select() 要领用于选中一切文本，而与此对应的是 select 事宜。
select事宜在选中文本的时刻就会触发
var textbox = form.elements['textbox']
textbox.onselect = function(){
alert(textbox.value)
}然则经由过程 select 事宜只能肯定用户什么时候挑选了文本，却不晓得用户究竟挑选了哪些文本，基于此 HTML5 添加了 selectionStart 和 selectionEnd 要领。
要取得用户在文本框中拔取的文本，能够运用以下要领:
textbox.onselect = function(){
alert(textbox.value.substring(textbox.selectionStart, textbox.selectionEnd))
}HTML5 束缚考证 API
required 必填在字段
任何标注有 required 的字段，在提交表单时都不能空着。
<input text="text" name="username" required>该属性适用于 <input>,<textarea>,<select> 字段。
plachholer 提示符
0x02 挑选框剧本
挑选框经由过程 <select> 元素和 <option> 元素建立，它们同属于 HTMLSelectElement 范例，为了轻易交互，该范例供应了以下属性:
add(newOption, relOption): 插进去新的
<option>元素，在相干项之前multiple: 布尔值，是不是许可多项挑选
options: 一切的
<option>元素鸠合remove(index): 移除给定位置的索引项
挑选框
<select>的type属性值不是select-one等于select-muitiple
为了便于接见数据，每一个 <option> 元素都有一个 HTMLOptionElement 对象，该对象具有以下属性:
index: 当前挑选项在
options鸠合中的索引selected: 布尔值，示意当前选项是不是被选中
select: 选项的文本
value: 选项的值
<select>元素的值，就是选中的<option>元素的value特征值。假如没有value特征，则是<option>元素的文本值
挑选项
关于只能挑选一项的挑选框，最简朴的体式格局就是运用 selectedIndex 属性:
var selectedOption = selectbox.options[selectbox.selectedIndex]而关于能够挑选多项的挑选框，我们须要轮回遍历挑选鸠合，然后测试每一个挑选项的 seleted 属性
function getSelectedOption(selectBox){
var result = new Array()
var option = null
for(let i=0,len = selectBox.options.length;i < len;i++){
option = selectBox.options[i]
if(option.selected){
result.push(option)
}
}
return result
}
var selectBox = document.querySelector("#selectBox")
var selectedOptions = getSelectedOption(selectBox)
// 取得一切被选中的项0x03 表单序列化
在表单对服务器发送数据之前，须要将表单中的有用数据举行格式化的编码，即表单序列化。
下面的 serialize 函数能够完成表单的序列化操纵:
function serialize(form){
let parts = [],field = null, i, len, j, optLen, option, optValue;
for(i =0, len = form.elements.length; i<len;i++){
field = form[i]
switch(field.type){
case "select-one":
case "select-multiple":
if(field.name.length){
for(j=0,optLen = field.options.length;j < optLen;j++){
option = field.options[j]
if (option.selected){
optValue = ""
if (option.hasAttribute){
optValue = option.hasAttribute("value")? option.value : option.text
} else {
optValue = option.attributes["value"].specified ? option.value : option.text
}
parts.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue))
}
}
}
break;
case undefined: //字段集
case "file": //文件输入
case "submit": //提交按钮
case "reset": //重置选项
case "button": //自定义按钮
break;
case "radio": //单选按钮
case "checkbox": //复选按钮
if (!field.checked){
break;
}
// 实行默许操纵
default:
// 不包括没有名字的字段
if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value))
}
}
}
// 对表单字段的称号和值举行 URL 编码，各字段之间运用 "&" 分开
return parts.join("&")
}在全部表单序列化的过程当中，轻微庞杂一点的就是 <select> 元素了，它能是单选框或许多选框，那末我们须要去遍历控件中的每一项。当不存在 value 特征时，运用 text 的值，我们运用了 hasAttribute() ，而在 IE 中须要运用 specified 特征。
关于单选按钮和复选按钮，须要搜检其 checked 属性书否为 false,是则退出 switch 轮回。若为 true 则将其键值对举行编码，推到 parts 数组。
