表單驗證是廣大前端非常頭疼的一項事務,特別是在面對複雜表單的情況下,例如某些輸入框僅接受數字輸入,某些字段是必填,有些項又必須滿足一定輸入規則……為了提供更好的用戶體驗,這些繁瑣的需求不得不去花大量時間和代碼去滿足。在新的 HTML5 標準中,增加了十幾個表單輸入類型和特性,例如 autofocus 自動焦點,以及之前介紹過的 Placeholder 佔位符。這些貼心的特性支持大大解放了前端開發人員,我們僅需使用新的標籤元素或屬性,就可以完成過去需要大量 javascript 代碼才能完成的功能。

html5-logo

問題是,在 HTML5 尚未普及的今天,特別是國內複雜的瀏覽器市場環境下,僅使用 HTML5 來解決表單驗證這些問題實在是力不從心。如何讓頁面更有語義,讓我們的代碼更加優雅簡潔,這是個問題。

於是本文主角閃亮登場了!撒花~~它就是大名鼎鼎的 jQuery Tools 。它奉行極簡主義風格,使用標準 HTML5 語法,不需要寫額外的 js 代碼,在大部分瀏覽器都支持 HTML5 之時,直接刪除插件即可,非常方便。

猛戳這裡查看demo

1. 電子郵件輸入框

HTML5 中對 input 標籤新增了 email 類型,可以檢測輸入的內容是否符合電子郵件的書寫格式。那些不支持新類型的舊版瀏覽器也只是把它們看作一個文本框,用戶不會注意到這個變化。智能手機用戶應該知道在那些郵件地址的輸入框,會出現一個更方便的鍵盤輸入 @ 。如果你用過 iPhone 或者 android, 你懂的。

<form method="get">
    <label for="email">電子郵件:</label>
    <input id="email" name="email" type="email">
    <button> 提交 </button>
</form>
html5-form-email

html5-form-url

2. URL 輸入框

如果需要輸入網址,例如 http://www.lovelucy.info 這樣的格式,現在也能進行驗證。而在 iPhone 上網址類型輸入框會出現一個可變化的鍵盤,用戶可以很方便輸入斜線和.com,如上右圖所示。(經測試發現 Android 沒有這個變化,差距啊。。。)

<form method="get">
    <label for="url">網址:</label>
    <input id="url" name="url" type="url">
    <button> 提交 </button>
</form>

3. 數字輸入框

在過去要得到匹配的數字,你不得不使用 jQuery 來幫助驗證輸入。HTML5 增加了數字類型,還增加了一些額外的屬性:

  • Min:指定輸入框可接受的最小輸入數字。
  • Max:你猜對了,就是允許輸入的最大數字。
  • Step:屬性輸入域合法的間隔 ,默認是1。

同樣的,在智能手機上,我們會得到一個僅有數字的鍵盤,十分方便。手機上出現數字鍵盤的,應該是 type=”tel” 類型,如下圖(截圖自Android4.0)。目前還沒有瀏覽器支持對 tel 類型的輸入驗證,本插件也沒有支持。

<form method="get">
    <label for="number">年齡:</label>
    <input id="number" name="number" type="number" min="18" max="99">
    <button> 提交 </button>
</form>
html5-form-tel

html5-form-number

HTML5 還有一個新類型叫 range,輸入框變成一個滑動條。不需要別的插件,你的表單就可以使用可視化的滑動條了,這很酷吧。用戶是很懶的,用鼠標拖動當然比費力敲鍵盤方便啦。它的用法和 number 類型一樣,只是把類型設置 type=”number” 改成 type=”range” 即可。

4. 必填屬性

輸入框的內容是必須填寫的,以前是用 Javascript 來檢查。在 HTML5 中,新增了一個屬性:required,簡直太方便了。

<form method="post">
    <label for="username">用戶名: </label>
    <input id="username" name="username" type="text" placeholder="Username" required="required">
    <button> 下一步 </button>
</form>

5. 正則表達式

在 HTML5 中,我們甚至可以直接使用正則表達式。

<form method="post">
    <label for="username">用戶名: </label>  
    <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus="autofocus" required="required">
    <button type="submit"> 下一步 </button>
</form>

6. 等值輸入框

data-equals 判斷兩個輸入框值是否一致,常用於密碼框的 2 次輸入。這不是 HTML5 標準,但可以被插件支持。

<form method="get">
    <label for="password1">輸入密碼:</label>
    <input id="password1" name="password1" type="password">
    <label for="password2">再次輸入密碼:</label>
    <input id="password2" name="password2" type="password" data-equals="password1">
    <button> 提交 </button>
</form>
<script>
$.tools.validator.fn("[data-equals]", "Different value and $ 1", function(input) {
   var name = input.attr("data-equals"),
      field = this.getInputs().filter("[name=" + name + "]"); 
   return input.val() == field.val() ? true : [name]; 
});
//$.tools.validator.fn()的參數中‘$1’代表 data-equals 的值
</script>

總結

HTML5 特性支持

除了 “text”, “checkbox” 和 “radio” 之外,插件支持的新類型:

類型 描述
email 僅接受輸入一個有效的 Email 地址格式
number 接受整數或浮點小數類型輸入
url 僅接受輸入一個有效的 URL 地址格式

HTML5 的 range 和 date 類型同樣也可以獲得 jQuery Tools 插件的跨瀏覽器支持,添加 rangeinputdateinput 插件即可。同時我們還可以使用 jQuery 選擇器 :email, :number 和 :url,非常方便。

HTML5 屬性支持:

屬性 數據類型 描述
max 數字 數字類型可輸入的最大值。對number, text, date 和 range 類型都有效。
min 數字 數字類型可輸入的最小值。對number, text, date 和 range 類型都有效。
pattern 正則表達式 使用正則表達式限定可輸入的格式。例如pattern=”[a-z]” 即限定只能輸入小寫字母 a 到 z。最好使用 title 屬性對規則進行文字描述。
requried “required” 規定該表單字段必填。用法required=”required”,僅僅加 required 或 required=”true” 均無效。該屬性對 checkbox 和 select 類型也起作用。

下面一些舊的 HTML4 屬性也被插件支持,但提供增強的、更友好的用戶體驗:

屬性 類型 描述
disabled 禁用該輸入字段。輸入框無法進行輸入,同時也不會進行表單驗證。在瀏覽器中禁用的字段會顯示灰色。
maxlength 數字 限制輸入的長度,強制用戶不能輸入太多字符。這個特性繼承瀏覽器行為,插件不會做更多事情。
readonly 讓輸入字段無法編輯。與disabled不同的地方在於表單仍然會提交該字段,也會進行提交前的驗證。

自定義錯誤提示消息

<input type="number" min="10" data-message="請輸入大於10的數值!" />

更多的插件配置參數,自定義驗證類型,多國語言,Ajax 服務器端驗證等等,請參閱官方文檔

Update: jQuery Validation是另一個表單驗證的插件,它由 jQuery 官方團隊的成員 Jörn Zaefferer 開發並維護,能讓我們向輸入框添加預設的 class 來完成驗證,有空也可以關注一下。