一, 表单的基础知识
1. 获取 form 元素
在 html 中, 表单是由 form 元素来表示的.
- (1)document.getElementById('formid')
- (2)document.forms[index]
2.form 特有属性和方法
(1)acceptCharset: 服务器能够处理的字符集, 等价于 HTML 中的 accept-charset 特性.
(2)action: 接受请求的 URL, 等价 HTML 的 action 特性.
(3)elements: 表单中所有控件的集合.
(4)enctype: 请求的编码类型, 等价 HTML 的 enctype 特性.
(5)length: 表单中控件的数量.
(6)method: 要发送的 http 请求类型, 通常是'get' 或'post', 等价 HTML 的 method 特性.
(7)name: 表单的名称, 等价 HTML 的 name 特性.
(8 reset(): 将所有表单域重置为默认值.
(9)submit(): 提交表单.
(10)target: 用于发送请求和接受响应的窗口名称, 等价于 HTML 的 target 特性.
3. 提交表单
(1)表单中有 type='submit' 的 input 和 button 就可以定义提交按钮, 点击提交按钮或者在表单控件有焦点时按回车键就会提交表单. 以这种方式提交表单, 浏览器会在将请求发送给服务器之前触发 submit 事件, 这样就可以验证表单或者取消表单提交(preventDefault()).
(2)form.submit()方法提交, 这种方法提交不会触发 submit 事件, 所有要再提交之前验证表单数据.
4. 重置表单
(1)使用 type='reset' 的 input 或 button 可以创建重置按钮, 单击重置按钮时, 会触发 reset 事件, 故可以取消重置操作.
(2)document.getElementById('formid').reset()方法重置, 这个方法会触发 reset 事件
二, 表单字段
1. 获取表单元素
(1)原生 DOM 方法访问
(2)通过 form.elements 这个集合访问, 这是一个有序列表可以使用索引或 name 来获取. 如果有多个相同 name 的元素, 获取一个集合.
2. 共有的表单字段属性
(1)disabled: 布尔值, 表示当前字段是否被禁用
(2)form: 指向当前字段所属表单的指针, 只读
(3)name: 字段名称
(4)readonly: 布尔值, 表示当前字段是否只读
(5)tabIndex: 表示当前字段切换的 (tab) 序号
(6)type: 当前字段类型
(7)value: 当前字段的值. 对于文件字段, 该属性只读, 包含文件在计算机中的路径.
3. 共有的表单字段方法
(1)focus(): 让元素获取焦点
(2)blur(): 让元素失去焦点
4. 共有的表单字段事件
(1)blur: 失去焦点时触发
(2)change: 对于 input 和 textarea 元素, 失去焦点且 value 值改变时触发; 对于 select 元素, 在其选项改变时触发.
(3)focus: 字段获取焦点时触发
三, 文本框脚本
1.input 和 textarea 的区别
(1)input 特性
a. size: 指定文本框中能够显示的字符数
b. maxlength: 指定文本框可以接受的最大字符数
c. value: 可以设置文本框的初始值
(2)textarea 特性
a. rows: 指定文本框的字符行数
b. cols: 指定文本框的字符列数
c. textarea 的初始值必须放在双标签中间
2. 选择文本
(1)select()方法
input 和 textarea 都支持 select()方法, 用于选择文本框中的所有文本(可用于在获取焦点时获取所有默认文本, 用户则不需要一个个的删除)
(2)select 选择事件
在选择了文本框中的文本时, 或调用了 select() 方法时, 都会触发 select 事件
(3)获取选中的文本
使用 input 或 textarea 元素的 selectionStart 和 selectionEnd 属性, 这两个属性中保存的是基于 0 的数值, 表示所选择的文本的范围.
- var textArea = document.getElementById('textArea');
- var selectStr = textArea.value.substring(textArea.selectionStart,textArea.selectionEnd);
(4)选择部分文本
所有文本框都有一个 setSelectionRange() 方法, 该方法接受两个参数: 要选中的第一个字索引和要选中的最后一个字符索引. 要看到选中的文本, 必须在调用 setSelectionRange() 方法之前或之后立即让文本框获取焦点.
四, 操作剪贴板
剪贴板事件
(1)beforecopy: 在发生复制操作前触发
(2)copy: 发生复制操作时触发
(3)beforecut: 在发生剪贴操作前触发
(4)cut: 发生剪贴操作时触发
(5)beforepaste: 在发生粘贴操作前触发
(6)paste: 发生粘贴操作时触发
五, H5 约束验证
1. 验证属性
H5 为表单元素增加了一些特定属性用以验证元素值是否符合要求.
(1)required: required 属性, 在提交表单时, 浏览器自动验证给出提示, 样式由浏览器决定.
(2)pattern: pattern 属性的值是一个正则表达式, 用于匹配文本框中的值.
(3)min/max: 最小值或最大值
(4)step: 刻度差
(5)maxlength: 最大字符长度
<input type="number" min='0' max='100' step='10' />
2. 检测有效性
(1)checkValidity(): 使用 checkValidity() 方法可以检测表单中的某个字段是否有效. 所有表单字段都有这个方法, 如果字段值有效, 这个方法返回 true, 否则返回 false. 检测整个表单是否有效, 可以在表单自身调用 checkValidity() 方法, 如果所有字段都有效返回 true, 否则返回 false.
(2)validity 属性: 表单字段的该属性是一个对象, 包含一系列属性表示字段无效的原因, 每个属性会返回一个布尔值.
a. valueMissing: 如果有 required 属性的元素没有值, 返回 true
b. patternMismatch: 如果知道的值与指定的 pattern 属性不匹配, 返回 true
c. rangeUnderflow/rangeOverflow: 如果值比最小值小或比最大值大, 返回 true
d. stepMisMatch: 如果 min 和 max 之间的步长不合理, 返回 true
e. toolong: 如果值的字符长度超过了 maxlength 指定的长度, 返回 true
3. 禁用验证
(1)novalidate: 给 form 设置该属性, 表单将不再进行验证.
(2)formnovalidate: 给提交按钮设置该属性, 表单也将不再进行验证.
六, 选择框脚本
1.select 元素的特有属性方法
(1)add(newOption,reloption): 该方法向 select 中插入新 option, 位置在 reloption 之前.
(2)options: select 中所有 option 元素的集合
(3)multiple: 布尔值, 表示是否允许多选, 等价 HTML 中的 multiple 特性
(4)remove(index): 移除指定位置的选项
(5)selectdIndex: 基于 0 的选中项的索引, 没有选中项则值为 - 1
(6)size: 选择框中可见的行数, 等价于 HTML 中的 size 特性
(7)value: 若是多选, 有多个选中项, value 取第一个选中项的值
2.option 元素的特有属性方法
(1)index: 当前选项在 options 集合中的索引
(2)selected: 布尔值, 当前选项是否被选中
(3)text: 选项的文本
(4)value: 选项值, 等价 HTML 中的 value 特性
注: 大部分属性的目的是为了方便对选项的数据的访问, 效率高.
来源: http://www.qdfuns.com/article/46690/92c8fd118dbc55aa93cd1cb552567d72.html