HTML5針對表單方面也做了一些完善，新加入了一些驗證資料的功能，新加入了一些標籤屬性。有了這些驗證功能，就可以不用JavaScript進行驗證，即使是JavaScript被禁用了也可以毫無壓力的驗證表單了。開發人員不用JavaScript，瀏覽器會根據標記中的規則執行驗證，然後顯示適當的錯誤訊息。這些人性化的功能在支援HTML5的瀏覽器中才能有效，支援的瀏覽器有Opera 10+、Safari 5+、Chrome和Firefox 4+。
HTML5新新增的表單功能有：其他輸入類型、輸入模式、數值範圍、必填欄位、停用驗證和偵測有效性。以下我們將對這幾個功能進行詳細展開介紹。
說到輸入類型，大家很快的就會想到input標籤。只有input標籤才可以規定不同的類型。 HTML5正是在input中的type屬性加入了一些新的屬性值。這些新的屬性值不僅可以反映資料類型的信息，還可以提供一些預設的驗證功能。其中，」email」和」url」是兩個支援最多的類型，各瀏覽器也為它們增加了客製化的驗證機制。新加入的類型如下
email : 電子郵件信箱文字框，跟普通的沒什麼區別，當輸入不是郵箱的時候，驗證通不過。行動端的鍵盤會有變化
tel : 電話號碼
url :網頁的URL
㟀chrome下輸入文字後，會多出一個關閉的X
range: 特定範圍內的數值選擇器，min、max、step( 步數)
number: 只能包含數字的框 color
: 顏色選擇器datetime
: 顯示完整日期一date-local 時，不含時區
date :顯示日期
week : 顯示週
month : 顯示月
HTML5不僅新加入了一些新的輸入類型，也加入了新的屬性－patten屬性。 Patten屬性的值是正規表示式，是用來符合文字方塊中的值。在寫正規的時候要注意，開頭和結尾不用加^和$符號(假定已經有了)。這兩個符號表示輸入的值必須是從頭到尾與模式相符。小範例如下
HTML程式碼
<form action="http://www.baidu.com">
<input type="email" />
<input type="tel" />
<input type="url" />
<input type="search"/>
<input type="range" min="0" max="10" step="2" />
<input type="number"/>
<input type="color"/>
<input type="date"/>
<input type="datetime"/>
<input type="datetime-local"/>
<input type="time"/>
<input type="month"/>
<input type="week"/>
<!-- placeholder是让密码输入框拥有默认提示 -->
<input type="password" placeholder="请输入密码"/>
<input type="submit"/>
</form>登入後複製
HTML程式碼
<form action="#">
<input type="text" name="user" pattern="\d{1,9}"/>
<!-- 点击之后 会本页面提交-->
<input type="submit"/>
</form>JavaScript程式碼
JavaScript程式碼
HTML程式碼
<input type="range" min="0" max="10" step="2" id="range" />
JavaScript程式碼不自行驗證。 JavaScript中可以使用novalidate獲取，若存在則是true，反之則是false。如果提交按鈕有多個，為了指定點擊某一個提交按鈕不必驗證表單，可以在對應的按鈕上新增formnovalidate屬性。也可用JavaScript新增禁用驗證的屬性。小例子如下
HTML程式碼 在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法，如果字段的值是有效的，这份方法会返回true，否则则是false。与checkValidity()方法相比，validity属性可以告诉你很多东西。 valueMissing : 输入值为空时 typeMismatch : 控件值与预期类型不匹配 patternMismatch : 输入值不满足pattern正则 tooLong : 超过maxLength最大限制 rangeUnderflow : 验证的range最小值 rangeOverflow：验证的range最大值 stepMismatch: 验证range 的当前值 是否符合min、max及step的规则 customError： 不符合自定义验证，是否设置setCustomValidity(); 自定义验证 placeholder : 输入框提示信息 autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off autofocus : 指定表单获取输入焦点 list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id Formaction : 在submit里定义提交地址 小例子JavaScript代码 HTML5實戰與剖析之表單那些事兒就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（m.sbmmt.com）！<form action="http://blog.csdn.net/lee_magnum">
<input type="text" id="text" required/>
<input type="submit" value="跳过验证，直接提交" formnovalidate/>
</form>
<form action="http://blog.csdn.net/lee_magnum" novalidate>
<input type="text" id="text" required/>
<input type="submit" value="直接提交"/>
</form>登入後複製6、检测有效性，及新添属性和方法
if(input.validity && !input.validity.valid){
if(input.validity.valueMissing){
alert("不能为空")
}else if(input.validity.typeMismatch){
alert("控件值与预期类型不匹配");
}
}登入後複製
