html5表单无论多么强大，都不能依赖它自身的验证，服务器的验证是不可少的。html5表单的验证能更快的把结果反映给用户，增强用户体验。
input新增的type类型
tel,email,url,search,range,number,color,datetime,datetime-local,time,date,week,month。这些type类型的含义一看就明白，目前opera浏览器是支持最好。如果输入的值不符合相应类型，就会报错。
新增属性
1.required：此项为必填项。
2.placeholder：默认显示的描述或提示信息，比如placeholder="请输入账号"，默认显示这几个字，当控件获得焦点时提示字消失。
3.autocomplete：自动完成功能，值为on时无需保护字段；值为off时保护字段；如果不填值，保护与否取决浏览器，一般与On效果相同。
4.autofocus：控件默认获取焦点，每个页面只允许一个。
5.list和datalist：实现输入框获得焦点时，出现默认选项。datalist的id值设置成输入控件list的属性值即可匹配。
6.min和max：最小值和最大值，比如输入类型是number时使用。
7.step：步幅，比如range范围每次增加5，step="5"。
8.pattern：正则匹配。
9.form：把表单元素的form属性指向form的id，那么这个表单元素就可以写在页面任何位置了，不需要写在 <form></form>之间了。
10.formaction：允许一个表单提交到不同的地址，原来只允许有一个提交按钮提交到一个action。
11.formmethod：运行不同的提交按钮使用不同的方式提交，比如一个用get，一个用post。
新增表单元素和函数
output元素：和input相对，用于输出。
valueAsNumber函数：可以将字符串以数字的形式读和写。
取消自动验证
只需给不需要验证的控件加上novalidate属性即可，也可给form加上。
验证状态对象validityState
每个表单控件都有一个validityState对象，例如一个id为"inp1"的表单元素，像下面这样取得验证状态对象
var valCheck = document.getElementById('inp1').validity
获取状态对象后，可以通过访问对象的valid属性得知该控件是否通过验证，valCheck.valid返回布尔值。valid包括了8个布尔值检测，只有8个都通过了才返回true。如果关心具体什么验证通过了，什么没通过，可访问valCheck的8个属性：
1.valueMissing：必填项是否有值
2.typeMismatch：输入值与type类型是否匹配
3.patternMismatch：输入值是否与pattern属性正则匹配
4.tooLong：是否输入了过多字符（maxLength）
5.rangeUnderflow：是否小于min的值
6.rangeOverflow：是否超过max的值
7.stepMismatch：是否符合step设置
8.customError：是否通过自定义错误验证(下面会说自定义错误)
显示验证方法checkValidity()
每个控件都可以调用checkValidity()方法（包括form），它返回一个布尔值，表示是否通过验证，比如inp1.checkValidity()。其实效果和上面说到通过验证对象来确定是否通过验证一样。
自定义错误setCustomValidity方法
当默认的提示错误满足不了需求，可以通过自定义错误来提示。例如2个输入密码文本框输入不一致的时候提示“两次输入密码不一致”
if(inp1.value != inp2.value){
inp2.setCustomValidity('两次输入密码不一致');
}
未通过验证的监听事件invalid
只要有表单控件没有通过验证（无论什么时候，提交表单，或者运行checkValidity方法等），就就会触发invalid事件。比如对一个id为inp1的控件添加监听事件，
inp1.addEventListener('invalid', function(){alert('悲剧，这个没通过验证啊！')}, false)