表单的基础知识
在Javascirpt中，表单元素<form>对应的是HTMLFormElement类型，继承了的是Element类型，有自己独有的属性和方法：
- acceptCharset:服务器能够处理的字符集
- action:接受请求的URL
- elements：表单中所有空间的集合
- enctype:请求的编码类型
- length:表单中控件的数量
- method:要发送的HTTP请求类型
- name:表单的名称
- reset():将所有表单域重置为默认值
- submit():提交表单
- target:用于发送请求和接收相应的窗口名称
取得<form>元素引用的方式
var firstForm = document.forms[0];
var myForm = document.forms["form2"];
提交表单
\<input type="submit" value="Submit Form">
\<button type="submit">Submit Form</button>
\<input type="image" src='graphic.gif'>
上面三种按钮只要存在在form表单中，那么在相应表单控件拥有焦点的情况下，按回车就可以提交表单（textarea例外），触发表单的submit事件，通常需要自定义submit事件，因此需要经常阻止表单提交来进行相应的检查。
var form = document.getElementById("myForm")
form.submit()
注意以上这种方式提交表单是，不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。
重置表单
\<input type="reset" value="reset Form">
\<button type="reset">reset Form</button>
表单字段
每个表单都有docuement属性，是表单中所有表单元素(字段)的集合，顺序与出现在标记中的顺序对应，可以按照位置和name特性来访问它们
var form = document.getElementById('form1')
var field1 = form.elements[0]
var field2 = form.elements['textbox1']
var fieldCount = form.elements.length
如果多个表单控件都在使用一个name，就会返回以该name命名的一个NodeList
- 共有的表单字段属性
- disabled:布尔值，表示当前字段是否被禁用
- form：指向当前字段所属表单的指针，只读
- name:当前字段的名称
- readOnly：表示当前字段是否只读
- tabIndex：表示当前字段切换序号
- type:当前字段的类型
- value：当前字段将被提交给服务器的值
- 共有的表单字段方法
- focus()
- blur()
- 共有的表单字段事件
- blur
- chagne:对于Input和textarea元素，在它们失去焦点且value值改变时触发，对于<select>元素，在其选项发生改变时触发
- focus
文本框脚本
- input元素的type特性设置为'text'，通过size特性，指定能够显示的字符数，通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数
- textarea可以使用rows和cols指定行和列的字符数。
选择文本
- select()方法
在文本框获得焦点时选择其所有文本是非常常见的做法，因为不用一个个地删除文本。 - 选择(select)事件
在选择了文本框中的文本时就会触发select事件。 - 取得选择的文本
HTML5为文本框添加了两个属性selectionStart和selectionEnd，
可以通过input.value.substring(input.selectionStart,input.selectionEnd)方法获得选择的文本 - 选择部分文本
textbox.setSelectionRange(start,end)
过滤输入
- 屏蔽字符
- 阻止keyPress默认事件即可屏蔽所有的输入字符
- 监听keyPress事件然后根据对应的字符编码进行判断，再决定如何响应
- 操作剪贴板
- beforeCopy
- copy
- beforecut
- cut
- berforepaste
- paste
自动切换焦点
原理是判断事件对象的value.length和maxlength是否相等来进行焦点切换
HTML5约束验证API
- 必填字段required
- 其他输入类型
- url
- ...
- 数值范围
- number
- range
- datetime
- datetime-local
- date
- month
- week
- time
上面这些类型可以指定min属性和max属性还有step属性。对应的方法有stepUp(count)和stepDowm(count)
- 输入模式
pattern属性
<input type="text" pattern = "\d+" name=count>
- 检测有效性
- checkValidity()方法
所有表单字段包括表单本身都支持checkValidity()方法，检测字段是否有效，字符的值是否有效的判断依据html5的那些约束，与pattern属性不匹配也是无效的 - validity属性
validity属性告诉你为什么字段有效或无效，包含一系列属性，每个属性会返回一个布尔值（不作列举）
- checkValidity()方法
- 禁用验证
设置novalidate属性(也是特性)可以告诉表单不进行验证
选择框脚本
选择框是通过select和option元素床架你的，为了与这个控件交互，除了所有表单共有的属性和方法外，还提供如下特殊的属性和方法：
- add(newOption,relOption)：向控件中插入新的<option>元素，其位置在相关项（relOption）之前
- multiple：布尔值，表示是否允许多项选择
- options：控件中所有<option>元素的HTMLCollection
- remove(index)：移除给定位置的选项
- selectedIndex:基于0的选中项的索引，如果没有选中项，则值为-1
- size:选择框中可见的行数，等价于HTML中的size特性
- 如果没有选中的项，则选择框的value属性保存空字符串
选择该项
var selectedOpotion = selectbox.options[selctebox.selectedIndex]
添加选项
- Js操作DOM的方法
var newOption = new Option('Option text','Option value')- 使用选择框的add()方法，若需要添加到末尾，则置第二参数为null
移除选项
- DOM的removeChild()方法
- 选择框的remove()方法，传入要移除选项的索引
- 将相应项设置为null ， selectbox.options[0] = null
表单序列化
随着Ajax的出现，表单序列化已经是很常见的一种需求
浏览器将数据发送给服务器的过程：
- 对表单字段的名称和值进行URL编码，使用和号（&）分隔
- 不发送禁用的表单字段
- 只发送勾选的复选框和单选按钮
- 不发送type为'reset'和'button'的按钮
- 多项选择框的每个选中的值单独一个条目
- 单击提交按钮提交表单也会发送提交按钮
- select元素的值，就是选中的option元素的value特性的值
serialize的源码参考高程三一书p436页
网友评论