HTML5新表单--学习笔记

input新类型

email:验证是否包含@   
search:搜索框
url: 验证是否包含http
tel: 效果只能在移动端出现
number: 数字选择 min max step
range: 范围类型 min max step value 
color: 颜色选择器
date:日期类型
week:星期类型
month:月份类型

input新类型中，date是个人最喜欢的新类型生成的日历十分简洁

表单新元素

1. datalist
   用于定义input的备选框 ，input的list的值要等于datalist的id的值；
   使用datalist元素，实现了数据与结构的分离，可重复使用。
2. progress
   进度条
   
   
   max - 设置进度条的最大值；
   min - 无，默认为0；
   value - 当前的进度值。
3. meter
   刻度
   
   
   min - 最小值；
   max - 最大值；
   value -当前值；
   low - 低预警值；
   hight - 高预警值；
4. output
   使用方法：
   
   0
   100
   +
   =

   
   

Paste_Image.png

只要修改两个input的值，就能把结果给显示出来

表单新属性 -在input中使用

1. placeholder ： 置空字符
2. multiple:允许输入多个值
   多个值使用逗号隔开，例如多个邮箱；
   只定义属性名，没有定义属性值。
3. autofocus:自动获取焦点
   只定义属性名，没有定义属性值
4. form：允许将表单元素定义在表单外
   form表单外的表单一定要写form的id

HTML5表单新验证属性 -在input中使用

1. required：验证当前元素之是否为空

   对应一个事件，该事件在元素为空时会取消冒泡，会造成onsubmit不执行

2. pattern： 使用正则表达式验证当前元素值是否匹配

   不能验证内容是否为null

3. min和max： 验证当前元素值最大值或最小值, 针对数字

   一般使用与number/range等元素

4. minlength和maxlength：验证当前元素值的最小长度和最大长度

   minlength:并不是html5的新属性

5. validity：表单验证HTML5提供一种有效状态

   有效状态通过validityState对象获取到；
   validityState对象可通过validity属性得到

HTML5表单新验证状态

验证(有效)状态-用来替换原来的判断逻辑

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

通过有效状态判断，进行判断
注意：所有验证状态必须配合上诉的验证属性使用

2. valueMissing:

判断当前元素值是否为空
配合required属性使用

3. typeMismatch

判断当前元素值得类型是否匹配
配合email/number/url等属性使用

4. patternMismatch

判断当前元素值是否匹配正则表达式
配合pattern属性使用

5. tooLong

判断当前元素值的长度是否正确
配合maxlength属性

6. rangeUnderflow

判断当前元素值是否小于min属性值
配合min

7. stepMismatch

判断当前元素值是否与step设置相同
配合step属性，并不与min和max属性值比较

8. valid

判断当前元素是否正确
返回true - 表示验证成功 ；
返回false - 表示验证失败 。

9. customError：

配合setCustomValidity()方法使用 ；
setCustomValidity("设置自定义的错误提示内容") ；
一旦使用该方法修改默认错误提示后，即使输入正确也会有提示

解决办法：
一步步判断验证状态，设置setCustomValidity("提示语")，
最后 if(html.value !=" " && html.value!=null){setCustomValidity(" ")}
剔除setCustomValidity()方法带来的影响 。