HTML5實戰與剖析之表單那些事兒

　　HTML5針對表單方面也做了一些完善，新加入了一些驗證資料的功能，新加入了一些標籤屬性。有了這些驗證功能，就可以不用JavaScript進行驗證，即使是JavaScript被禁用了也可以毫無壓力的驗證表單了。開發人員不用JavaScript，瀏覽器會根據標記中的規則執行驗證，然後顯示適當的錯誤訊息。這些人性化的功能在支援HTML5的瀏覽器中才能有效，支援的瀏覽器有Opera 10+、Safari 5+、Chrome和Firefox 4+。

　　HTML5新新增的表單功能有：其他輸入類型、輸入模式、數值範圍、必填欄位、停用驗證和偵測有效性。以下我們將對這幾個功能進行詳細展開介紹。

1、其他輸入類型

　　說到輸入類型，大家很快的就會想到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>

Chrome預覽效果

　除了”email”和”url”，HTML5還定義了另外幾個輸入元素。這幾個元素都要求填寫某種基於數字的值。但是瀏覽器對這些新添加的值相容性並不是很好。所以對這些數值類型的輸入元素，可以指定min屬性(最小的可能值)、max屬性(最大的可能值)和step屬性(從min到max的兩個刻度之間的差值)。小範例如下

HTML程式碼

<form action="#">
    <input type="text" name="user" pattern="\d{1,9}"/>
    <!-- 点击之后 会本页面提交-->
    <input type="submit"/>
</form>

JavaScript程式碼

JavaScript程式碼

是為必填項不能為空。這個屬性適用於input標籤，textarea標籤，select標籤(Opera 12+支援)。在JavaScript中透過對於的required屬性，可以偵測表單是否為必填項。

　　對於空著的必填字段，不同瀏覽器的處理方式不同。 Opera 11和Firefox 4會阻止表單提交病在相應字段下面彈出幫助框，Chrome(9之前)和Safari(5之前)則什麼都不做也不阻止表單提交。小範例如下

HTML程式碼

<input type="range" min="0" max="10" step="2" id="range" />

JavaScript程式碼不自行驗證。 JavaScript中可以使用novalidate獲取，若存在則是true，反之則是false。如果提交按鈕有多個，為了指定點擊某一個提交按鈕不必驗證表單，可以在對應的按鈕上新增formnovalidate屬性。也可用JavaScript新增禁用驗證的屬性。小例子如下

HTML程式碼

<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、检测有效性，及新添属性和方法

　　在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代码

if(input.validity && !input.validity.valid){
	if(input.validity.valueMissing){
		alert("不能为空")
	}else if(input.validity.typeMismatch){
		alert("控件值与预期类型不匹配");
	}
}

　　HTML5實戰與剖析之表單那些事兒就为大家介绍到这里，有了表单自行验证，JavaScript的工序又会变得少之又少，对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网（www.php.cn）！