html5表单验证

基本表单验证特性介绍

• 输入灰色的提示 placeholder
• html5新增类型 email、url、number、range、date（date，month，week，time，datetime，datetime-local）、search、color、tel等
• 文本框输入一次下次自动提示 autocomplete
• 下拉框提示 list和datalist
• 初始化页面input自动获得焦点 autofocus
• 设置表单元素必填 required
• 表单验证使用正则 pattern
• 表单设置了必填，提交表单不验证 novalidate、formnovalidate

html5约束验证API

• willValidate属性

• validity属性

  ValidityState

  badInput: false //用户提供了一个浏览器不能转换的input
  customError: false //setCustomValidity()
  patternMismatch: false //pattern
  rangeOverflow: false  //max
  rangeUnderflow: false  //min
  stepMismatch: false  //step
  tooLong: false  //maxlength
  tooShort: false  //minlength
  typeMismatch: false  //不符合某种类型的，例如email、url、tel等
  valid: true
  valueMissing: false  //required
  

• validationMessage属性

• checkValidity()方法

  如果元素没有满足它的任意约束，返回false，其他情况返回true。

  <input type="email" id="emails" value="sajkljas@126.com">
  
  if(emails.checkValidity()){
  	alert("是一个邮箱")
  }else{
  	alert("不是一个邮箱")
  }
  

• setCustomValidity()方法

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

  <input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入代码">
  function checkit(obj){
  	var it=obj.validity;
  	if(true===it.valueMissing){
  		obj.setCustomValidity("不能为空！");
  	}else{
  		if(true===it.patternMismatch){
  			obj.setCustomValidity("不能为空！");
  		}else{
  			obj.setCustomValidity("")
  		}
  	}
  }
  

html5自带验证美化

• :required和:optional
• :in-range和:out-of-range
• :valid和:invalid
• :read-only和:read-write

html5默认气泡修改

思路：阻止默认气泡、创建新气泡。