html5表单元素验证,HTML5中新表单元素及表单验证

HTML5新表单

1、input新类型

①email类型

语法：

作用 -验证是否包含"@"

问题 -验证逻辑并不完整

②url类型

语法：

作用 -提交表单时,验证是否包含"http://"

问题 -验证逻辑并不完整

③tel类型-只在移动端显示

④number类型

语法：

min - 最小值

max - 最大值

step - 步长,默认值为1

⑤range类型

语法：

min - 最小值

max - 最大值

step - 步长

value - 当前值

⑥date类型

语法：

⑦week类型

语法：

⑧month类型

语法：

⑨color类型

语法：

(10)search类型--输入搜索关键字操作的文本框

语法：

2、表单新元素

①datalist元素--定义备选项(并不显示)

配合元素使用

定义list属性-属性值等于元素的id属性值

效果和下拉列表类似

特点 -数据与结构的分离

数据 -预定义数据内容

结构 -显示在HTML页面中的元素

优点 -使用元素定义的数据,可以重复使用

②progress元素---进度条

max - 设置进度条的最大值

没有min属性-最小值为0

value - 表示当前的进度值

③meter元素--刻度

min - 最小值

max - 最大值

value - 当前值

low - 低预警值

high - 高预警值

④output元素--输出

3、表单新属性

①placeholder属性 - 提供默认提示内容

语法：

作用 -类似于value属性

区别-

value属性值：显示为黑色，确实存在文本框中

placeholder属性值：显示为灰色，类似于背景存在

②multiple属性 - 允许输入多个值

语法：

作用 -允许输入多个值

注意 -多个值之间使用","

用法 -只定义属性名,没有属性值

③autofocus属性 - 自动获取焦点

语法：

作用 -自动获取焦点

用法 -只定义属性名,没有属性值

④form 属性- 允许表单元素定义在表单之外

语法：

原本的HTML页面中定义表单元素

所有的表单元素,必须定义在

元素中

作用 -允许将表单元素定义在

元素外元素外的表单元素,使用该属性

form属性值等于

元素的id属性值

4、表单新验证

(1)验证属性

①required属性：验证当前元素值是否为空

语法：

②pattern属性:使用正则表达式验证当前元素值是否匹配

语法：

注意 -并不能验证当前元素值是否为空

③min和max属性：验证当前元素值最小值或最大值

一般适用于number、range等元素

语法：

④minlength和maxlength属性

语法：

minlength - 验证当前元素值的最小长度

输入值时,不允许输入小于指定值

提交表单时,验证元素值最小长度

注意：minlength并不是HTML5新属性

maxlength - 验证当前元素值的最大长度

输入值时,长度不能大于指定值

⑤validity属性

语法：指定元素.validity.validityState

如：Elem.validity.valid

表单验证HTML5提供一种有效状态

有效状态通过validityState对象获取到

validityState对象可通过validity属性得到

验证(有效)状态

validityState对象提供了一系列的有效状态

通过这些有效状态,进行判断

注意：所有验证状态必须配合上述的验证属性使用

作用：用来替换原本手工实现的逻辑

(2)验证状态

①valid

作用 -判断当前元素值是否正确

注意：该状态返回true,表示验证成功；该状态返回false,表示验证失败

②valueMissing

作用 -判断当前元素值是否为空

用法 -配合required属性使用

③typeMismatch

作用 -判断当前元素值的类型是否匹配

用法 -配合email、number、url等

④patternMismatch

作用 -判断当前元素值是否与指定正则表达式匹配

用法 -配合pattern属性使用

⑤tooLong

作用 -判断当前元素值的长度是否正确

用法 -配合maxlength属性

注意：使用maxlength属性后,实际不可能出现长度大于maxlength的

值 ；tooLong很难出现这种情况

⑥rangeUnderflow

作用 -判断当前元素值是否小于min属性值

用法 -配合min属性

注意 -并不能与max属性值进行比较

⑦stepMismatch

作用 -判断当前元素值是否与step设置相符

用法 -配合step使用

注意 -并不能与min或max属性值进行比较

⑧customError

用法 -配合setCustomValidity()方法

如果使用该方法,该状态返回true

setCustomValidity()方法

作用 -设置自定义的错误提示内容

存在的问题 ： 一旦使用该方法修改默认错误提示信息后

即使输入正确,错误提示依旧存在(逻辑错误)

解决：判断如果用户输入正确的话，调用该方法将信息设置为空("")

不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)