html5表单验证

html5表单验证：

https://www.bilibili.com/video/BV16K4y1Z7Gb

1-1课程介绍
2-1html5基本表单验证特性介绍
2-2html5基本表单验证特性演示
2-3label中for知识点补充
3-1html5表单约束验证API
3-2html5约束验证API之validity演示1
3-3html5约束验证API之validity演示2
3-4html5约束验证API之checkvalidity
3-5html约束验证API之setCustoValidity综合案例
4-1html5自带验证美化之伪类和选择器介绍
4-2required和optional美化表单案例
4-3valid和invalid伪类美化表单案例
4-4表单验证美化综合案例
4-5html5默认起泡修改思路
4-6html5默认起泡修改演示
5-1课程总结

1、慕课网注册界面的这个灰色的提示是html5的那个特性?

placeholder

www.haorooms.com/post/touchweb_commonquestion

2、html5表单中新增了那些类型？email, url, number, range, date(date, month, week, time, datetime,datetime-local)、search、color、tel等

3、文本框中，输入一次，下一次再输入会自动提示是哪个特性?aaaautocompleteaaaaaa

我们再来看看html5表单验证的新特性：6、html5中如何设置表单元素必填？required7、html5表单验证如何使用正则？pattern8、html5表单中设置了必填，提交表单的时候如何做到不验证？novalidate或者formnovalidate

required属性 autofocus

<input type='submit' formnovalidate=""/>
<input type='text'id='txt' pattern="^\d{5}[imooc]$"/>
document.querySelector('#txt').validity
document.querySelector('#txt')==txt  不建议
input.number step='3' ele.minstep

html5约束验证 APIhtml5的约束验证API主要有如下几个：

1、willValidate属性
2、validity属性
3、validationMessage 属性
4、checkValidity0方法
5、setCustomValidity0方法

checkValidity(方法介绍及演示如果元素没有满足它的任意约束，返回false，其他情况返回true。

setCustomValidity0方法介绍及演示设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息。

it.patternmismatch > obj.setCustomvalidity

html5自带验证美化要做出不一样的表单验证，我们需要了解一些伪类及css选择器1、:required和:optional2、:in-range和:out-of-range3、:valid和:invalid4、:read-only和:read-write

html5自带验证美化html5表单美化综合案例演示用到三个事件：1、oninput事件2、oninvalid事件3、onchange事件

html5自带验证美化-默认起泡修改我们一起来看一下各个浏览器默认起泡样式：

29– -webkit-validation-bubble 改气泡

html5自带验证美化-默认起泡修改这个默认起泡，我们有没有办法修改呢?在谷歌29之前的版本我们可以通过如下伪元素进行修改-webkit-validation-bubble但是之后废弃了，所以现在我们只能考虑其他办法了！

html5自带验证美化-默认起泡修改思路1、阻止默认气泡2、创建新的气泡

event.preventDefault 获取:invalid元素/.error-message-arr-remove

invalidityfielad[i].parentnode.inserAdjacenhtml(add tag)