Html5 表单验证

基本表单验证特性介绍

• 背景文字
  placeholder="请输入用户名"

• html5 表单中新增了以下类型

email、URL、number、range、date（date, month, week, time, datetime, datetime-local ）、search、color、tel等

• 文本矿中，输入一次，下一次再输入会自动提示的特性
  autocomplete="on/off"

• 下拉选择
  list 与 datalist

• 初始化页面后，让input自动获得焦点
  autofocus="autofocus"

• 设置表单元素必填
  required

• 表单验证使用正则
  pattern="^\d{5}[number]$"

• html5 表单中设置了必填，提交表单的时候做到不验证的特性
  novalidate(from 中设置)、formnovalidate(input 按钮中设置)

约束验证API

• willValidate 属性
  元素约束是否被符合，未符合返回false

• validity 属性
  ValidityState对象，表示当前所处验证状态
  

  validityState对象

• validationMessage 属性
  描述相关约束的失败信息

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

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

html

    
    


script

Html 5 自带验证美化

• 伪类及css选择器
  :required 和 :optional
匹配必填元素 与 选填元素
:in-range 和 :out-of-range
范围之内 与 不在范围之内（与最大值最小值对应）
:valid 和 :invalid
符合验证 与 不符合验证
:read-only 和 :read-write
匹配只读 与 只写

    
    




    

        用户名:
        
    
    

        Email: