title: 表单剧本
date: 2016-12-19 15:17
tags: JavaScript
0x00 表单基本
在 HTML 中,表单由
元夙来示意,然则在 JavaScript 中,表单对应的是 HTMLFormElement 范例,它具有的一些独占的属性和要领。action: 吸收要求的 URLelements: 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 的表单
提交表单// 通用提交表单
// 自定义提交表单
Submit
// 图象按钮
阻挠表单提交的默许行动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: 当前字段的范例
除了
以外,一切的表单都有 type 属性,关于 元素,该值等于 HTML 的 type 值。
关于元素该值以下:单选列表:type 属性值 select-one
多选列表:type 属性值 select-multiple
共有的要领和事宜
每一个表单字段都有两个要领:focus() 和 blur() 要领。
另外,一切表单字段都支撑以下 3 个事宜:blur: 字段落空核心时 触发
focus: 字段取得核心时触发
change: 关于 和 元素,在它们落空核心且 value 值转变时触发;关于 元素,在其选项转变时触发。
0x01 文本框剧本
有两种体式格局表现文本框: 的单行文本框和 的多行文本框。
关于单行文本框,经由过程 size 特征能够指定文本框能够显现的字符数,经由过程 value 特征接见其内容,而maxlength则用于指定其能够接收的最大字符数。
相干于 要指定文本框的大小能够运用 rows 和 cols 特征。who are you?
挑选文本
和 都支撑 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 的字段,在提交表单时都不能空着。
该属性适用于 ,, 字段。
plachholer 提示符
0x02 挑选框剧本
挑选框经由过程 元素和 元素建立,它们同属于 HTMLSelectElement 范例,为了轻易交互,该范例供应了以下属性:add(newOption, relOption): 插进去新的 元素,在相干项之前
multiple: 布尔值,是不是许可多项挑选
options: 一切的 元素鸠合
remove(index): 移除给定位置的索引项挑选框 的 type 属性值不是 select-one 等于 select-muitiple
为了便于接见数据,每一个 元素都有一个 HTMLOptionElement 对象,该对象具有以下属性:index: 当前挑选项在 options 鸠合中的索引
selected: 布尔值,示意当前选项是不是被选中
select: 选项的文本
value: 选项的值 元素的值,就是选中的 元素的 value 特征值。假如没有 value 特征,则是 元素的文本值
挑选项
关于只能挑选一项的挑选框,最简朴的体式格局就是运用 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
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("&")
}
在全部表单序列化的过程当中,轻微庞杂一点的就是 元素了,它能是单选框或许多选框,那末我们须要去遍历控件中的每一项。当不存在 value 特征时,运用 text 的值,我们运用了 hasAttribute() ,而在 IE 中须要运用 specified 特征。
关于单选按钮和复选按钮,须要搜检其 checked 属性书否为 false,是则退出 switch 轮回。若为 true 则将其键值对举行编码,推到 parts 数组。