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)