HTML5 表单 中

input 属性

autofocus 页面加载时自动获得焦点

required   非空字段输入框

placeholder 提供一种提示（hint),输入域为空时显示。

pattern 规定验证input域的模式（正则表达式）

pattern="[a-zA-Z0-9],{6,10}"

pattern="[a-zA-Z0-9],{6,16}"

pattern="^1[34578][0-9](9)$"

 

height \width 仅仅用于image的input的属性

qq注册认证

validity属性

validity属性获取表单元素的valiityState对象，该对象包括8个方面的验证结果

var validityState=dom

<script>
var form=document.querySelector('form');
var nick=document.querySelector('#nick');
var vali=nick.validty;
console.log(vali);
if(vali.valueMissing){
nick.setCustomValidity("昵称不能为空”）；
}


invalid 事件，只要发生表单的验证，所有未通过验证的表单元素都会收到一个invalid的事件
form.addEventListener(invalid',function(event{
var ekm=event.target;
var vail=elm.validity;未通过验证的对象获取
var name=elm.name;
switch(name){
case'nick';
if(vali.valueMissing){
elm.setCoustomValidity("昵称不能为空“）；
}else if（vali.patternMIsmatch){
elm.setCoustomvalidity('必须为英文');
else{
elm.setCoustomvalidity('');
}
break;

}



                                                                                        
<style>
input:valid{
}验证通过时的样式
input：invalid{
}

validityState对象

valueMissing 目的：确保表单中的值已填写 用法：将表单元素设置了required特性，则为必填项；如果必填项输入值为空，value Missing属性将返回true,否则返回false

typeMismatch 目的：保证输入值与预期类型相互匹配（url、Email等） 

patternMismatch 目的：正则是否有效