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 目的：正则是否有效