HTML5表单及其验证
HTML表单一直都是Web的核心技术之一，有了它我们才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便我们做更复杂的应用，而不用借助其它Javascript框架，先说下表单的几个基本知识点：
表单仍是以<form>元素作为容器，我们可在其中设置基本的提交特性；
当用户提交页面时，表单仍然向服务器发送表单控件的值；
之前老版本中的表单控件，如text radio checkbox等等，都可以按原有方式使用，尽管增加了新的功能；
仍然可以使用javascript操作表单控件。
下面详细说下HTML5中表单新增功能
1.输入型控件
Input type
用途
说明
电子邮件地址文本框
?url
网页URL文本框
?number
数值的输入域
属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
range
特定值的范围的数值，以滑动条显示
属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
Date pickers
日期，时间选择器
仅Opera9+支持，包含date, month, week, time, datetime, datetime-local
search
用于搜索引擎，比如在站点顶部显示的搜索框
与普通文本框用法一样，只不过这样更语文化
color
颜色选择器
仅Opera支持
将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。
E-mail:
date:
range: number: color:
2. 表单新特性和函数
2.1 placeholder
当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。
如：
类型
作用
on
该字段无需保护，值可以被保存和恢复
off
该字段需要保护，值不可以保存
unspecified
包含<form>的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on
如：
名称
用途
用法
valueMissing
确保控件中的值已填写
将required属性设为true，
<input type="text"required="required"/>
typeMismatch
确保控件值与预期类型相匹配
<input type="email"/>
patternMismatch
根据pattern的正则表达式判断输入是否为合法格式
<input type="text" pattern="[0-9]{12}"/>
toolong
避免输入过多字符
设置maxLength，<textarea id="notes" name="notes" maxLength="100"></textarea>
rangeUnderflow
限制数值控件的最小值
设置min，<input type="number" min="0" value="20"/>
rangeOverflow
限制数值控件的最大值
设置max，<input type="number" max="100" value="20"/>
stepMismatch
确保输入值符合min,max,step的设置
设置max min step，<input type="number" min="0" max="100" step="10" value="20"/>
customError
处理应用代码明确设置能计算产生错误
例如验证两次输入的密码是否一致，等会DEMO细说
下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看：
源代码：
/></p> ????????</form>可是各个浏览器验证行为不一致，我们可能需要统一其验证行为，借助javascript我们可以统一浏览器的验证行为。
还是以上上述HTML为基础，我们为其加上相关javascript:
//自定义表单控件验证行为 ????????????var checkvalue = function(e){ ????????????????var el = e.target; ????????????????var isvalid = el.checkValidity(); ????????????????if(isvalid){ ????????????????????el.className= ""; ????????????????????el.parentElement.getElementsByTagName("label")[0].className=""; ????????????????}else{ ????????????????????el.className= "error"; ????????????????????el.parentElement.getElementsByTagName("label")[0].className="error"; ????????????????} ????????????????e.stopPropagation(); ????????????????e.preventDefault(); ????????????} ????????????//定义表单验证方法 ????????????function invalidHandler(evt) { ????????????????checkvalue(evt); ????????????} ????????????function loadDemo() { ???????????????var myform = document.getElementById("register1"); ???????????????//注册表单的oninvlid事件 ???????????????myform.addEventListener("invalid", invalidHandler, true); ????????????????for(var i=0;i< myform.elements.length-1;i++){ ????????????????????//注册表单元素的onchange事件，优化用户体验 ????????????????????myform.elements[i].addEventListener("change",checkvalue,false); ????????????????} ????????????} ????????????//在页面初始化事件（onload）时注册的自定义事件 ????????????window.addEventListener("load", loadDemo, false);最后说下输入两次密码匹配的验证，写的很简单：
<form name="passwordChange"> ????<p><label for="password1">New Password:</label> ????<input type="password" id="password1" onchange="checkPasswords()"></p> ????<p><label for="password2">Confirm Password:</label> ????<input type="password" id="password2" onchange="checkPasswords()"></p> </form> <button onclick="document.passwordChange.password1.checkValidity()">Check Validity</button>function checkPasswords() { ????????var pass1 = document.getElementById("password1"); ????????var pass2 = document.getElementById("password2"); ??????????if (pass1.value != pass2.value) ????????????pass1.setCustomValidity("两次输入的密码不匹配"); ????????else????????????pass1.setCustomValidity(""); ????}