html像pho传递表单信息,表单剧本

title: 表单剧本

date: 2016-12-19 15:17

tags: JavaScript

0x00 表单基本

在 HTML 中，表单由

元夙来示意，然则在 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 的表单

提交表单// 通用提交表单

// 自定义提交表单

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 数组。