表单脚本

star - 2021-08-15 09:29:41

---

表单基础基本属性和方法

1、action
请求的url(默认值是当前url)
2、elments
表单字段的HTMLCollection
3、method
请求方式（默认值Get）
4、name
表单的名字,可以通过document.forms[name]获取form
5、reset
重置表单,会触发form的reset事件。type为rest的button、input也可以实现rest功能，触发reset事件
6、submit
手动提交表单，不会触发submit事件
7、enctype
请求的context-type

提交表单

两种方法提交表单
1、type为submit的button、input,或者type为image的input
2、调用form.submit方法

1. 表单会提交非disabled并且带有name的非button表单字段的value值
2. 多选框和复选框会以同名key提交多个value

表单字段

form的elments包含对表单中所有字段的引用，包括所有的input、textarea、button、select、fieldset元素

表单字段的公共属性

disabled
布尔值，表示字段是否启用
form
指针，指向对应的form，只读
name
字段的名字
readOnly
只读，只对input和textarea有效
tabIndex
数值，tab键切换的顺序
type
表示字段类型，诸如radio,checkbox
value
字段的值

表单字段的公共方法

1. focus
2. blur

表单字段的公共事件

1. blur
2. change
3. focus

文本框编程（input,textarea）input的基本属性

1、size
指定文本框的宽度，这个宽度以字符数来计算
2、value
文本框的值
3、maxLength
文本框的最大字符数

textarea的基本属性

1、rows
textarea的高度
2、cols
textarea的宽度
textarea不支持maxLength

选择文本

文本框元素的select()会全选文本框中的文字

select事件

当文本框中出现文字选中操作时就会触发select事件

取得选中的文本

文本框有两个属性selectionStart和selectionEnd表示选择的起点和终点

部分选中文本

文本框提供了setSelectionRange方法选择文字，提供两个参数，选择的起点和终点

HTML5约束验证Api必填字段

给表单字段添加required属性，提交时必须确认有值

输入类型

input的type支持url和email限制提交，它不会阻止用户无效的输入，只会不允许表单提交

数值范围

对于number类型的input提供min,max,step限制数值范围，
它不会阻止用户无效的输入，只会不允许表单提交

<input type="number" min="0" max="100" step="5">
//只允许输入0到100中5的倍数

输入模式

html5为text的input提供了pattern属性限制提交

<input type="text" pattern="\d+">
//只允许输入数字

pattern默认都是有^和$的

检测有效性

使用checkValidity()可以检测表单中任意给定字段是否有效，这个方法可以在所有表单元素上使用

form.elements[0].checkValidity()//检测字段是否有效
form.checkValidity()//检测整个表单是否有效

表单字段的validity属性也可以检测字段是否有效

禁用字段验证

在form上添加noValidate属性可以禁用整个form的字段验证
也可以在提交按钮上添加formnovalidate属性，指定通过该按钮的提交无需表单验证

选择框编程（select）select的基本属性和方法

1、add(newOption,relIndex)
在relIndex对应的relOption前添加newOption，relIndex是可选的，如果不传则在最后添加
2、multiple
布尔值，表示是否支持多选
3、options
选择框中的所有option元素的HTMLCollection
4、remove(index)
移除指定索引的option
5、selectedIndex
选中项的索引,多选时只返回第一个选中option的索引
6、size
选中框的可见行数
7、value
选中option的value,如果没有指定value则是option的文本
多选时只返回第一个选中的option的值

option的基本属性

1、index
选项在options集合中的索引
2、selected
选项是否选中
3、text
选项的文本
4、value
选项的值

选项处理

下面三种方法都可以修改select的value

1. 修改select的selectedIndex
2. 修改option的selected
3. 直接修改select的value

添加选项

var option = new Option("label","value")
select.add(option,undefined)//在最后面添加option

Tags 标签

formhtml5

扩展阅读