HTML5表单验证课程笔记

基本表单验证特性 

placeholder  灰色提示

html5表单新增类型：email、url、number、date（date，month，week，time，datetime，datetime-local）search、color、tel等

autocomplete 文本框输入一次，下一次在输入会自动提示

list和datalist

autofocus初始化input自动聚焦

require 表单元素必填

pattern  表单验证正则

<input type = ''text'' value="sdasda" pattern="^\d{5}">

novalidate（放在form上面）或者formnovalidate （放按钮上面） 提交表单的时候不验证

html5约束验证API

willValidate属性    如果元素的约束没有被符合则值为false

validity属性           是一个ValidityState对象，表始元素当前所处的验证状态

validationMessage属性    用于描述与元素相关约束的失败信息。

checkValidity（）方法      如果元素没有满足它的任意约束，则返回false，其它情况返回true

setCustomVlidity()方法     设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

checkValidity()方法
如果元素没有满足它的任意约束，返回false，其他情况返回true

setCustomValidity()方法
设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息

 html5自带验证美化

伪类及CSS选择器

1、:required（匹配到必填的元素）和:optional（匹配到选填的元素）

2、:in-range(在范围内)和:out-of-range（不在范围内）

3、:valid（符合要求）和:invalid（不符合表单验证）

4、:read-only（只读）和 :read-write（可以写的）
三个事件：
1.oninput事件
2.oninvalid事件
3.onchange事件

 

 

 

 

html5自带验证美化-默认气泡修改

1.阻止默认气泡
form.addEventListener("invalid",function(){

        event.preventDefault();

},true)

form.addEventListener("submit",function(event){
        if(!this.checkValidity()){
                event.preventDefault();
        }

},true)
2.创建新气泡