h5表单验证

1.提示语言 placeholder

　　移动端不支持：（1）<input placeholder="Date" class="textbox-n" type="text"  onfocus="(this.type="dete")" id="date"

　　       　　　　　（2）input输出框外套接div

2. html5表单中新增类型

　　email、url、number、range、date(date, month, week, time, datetime,datetime-local)、search、color、tel等

3.自动提示属性

　　autocomplete 

4.提示选择

　　list和datalist

5.自动获得焦点

　　autofocus

6.必填

　　required

7.表单验证正则

　　pattern

8.必填选项绕过验证

　　novalidate或者formnovalidate

9.label中for属性

　　使得label与后文input绑定，点击label相当于点击input

 

演示如下

 

10. 约束验证API

　　（1）willValidate

　　（2）validaty

　　（3）ValidationMessage

　　（4）checkValidaty() 方法

　　（5）setCustomValidity()方法

11.常用伪类

　　（1）:required和:optional   （:required指选择器在表单元素是必填项时设置指定样式，后者指任意没有required属性）

　　（2）:in-range和:out-of-range  （in-range对元素绑定的值在指定范围限制内时具有范围限制的元素进行样式设置。，）

　　（3）:valid和:invalid   （valid有效，即当填写的内容符合要求的时候触发）

　　（4）:read-only和:read-write  （:read-write当一个元素是可编辑元素时，可以修改其样式，read-write只针对当一个可编辑元素被赋予readonly（只读）属性时，可以修改其样式）

12. 常用属性使用

　　text-indent 属性规定文本块中首行文本的缩进

　　line-height 属性设置行间的距离

　　transition 属性是一个简写属性，用于设置四个过渡属性

• transition-property   规定设置过渡效果的 CSS 属性的名称。书写在div:hover内
• transition-duration    规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function   规定速度效果的速度曲线。
• transition-delay 定义过渡效果何时开始。

13. 常用时间应用

　　oninput   事件在用户输入时触发

　　oninvalid  输入无效时触发

　　onchange   在表单元素的内容改变时触发

参考视频 ：https://www.bilibili.com/video/BV16K4y1Z7Gb?p=15