每一個可以努力的日子,都是一份厚禮。
跨瀏覽器前端表單驗證
表單驗證是廣大前端非常頭疼的一項事務,特別是在面對複雜表單的情況下,例如某些輸入框僅接受數字輸入,某些字段是必填,有些項又必須滿足一定輸入規則……為了提供更好的用戶體驗,這些繁瑣的需求不得不去花大量時間和代碼去滿足。在新的 HTML5 標準中,增加了十幾個表單輸入類型和特性,例如 autofocus 自動焦點,以及之前介紹過的 Placeholder 佔位符。這些貼心的特性支持大大解放了前端開發人員,我們僅需使用新的標籤元素或屬性,就可以完成過去需要大量 javascript 代碼才能完成的功能。
問題是,在 HTML5 尚未普及的今天,特別是國內複雜的瀏覽器市場環境下,僅使用 HTML5 來解決表單驗證這些問題實在是力不從心。如何讓頁面更有語義,讓我們的代碼更加優雅簡潔,這是個問題。
於是本文主角閃亮登場了!撒花~~它就是大名鼎鼎的 jQuery Tools 。它奉行極簡主義風格,使用標準 HTML5 語法,不需要寫額外的 js 代碼,在大部分瀏覽器都支持 HTML5 之時,直接刪除插件即可,非常方便。
1. 電子郵件輸入框
HTML5 中對 input 標籤新增了 email 類型,可以檢測輸入的內容是否符合電子郵件的書寫格式。那些不支持新類型的舊版瀏覽器也只是把它們看作一個文本框,用戶不會注意到這個變化。智能手機用戶應該知道在那些郵件地址的輸入框,會出現一個更方便的鍵盤輸入 @ 。如果你用過 iPhone 或者 android, 你懂的。
<form method="get"> <label for="email">電子郵件:</label> <input id="email" name="email" type="email"> <button> 提交 </button> </form> |
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 還有一個新類型叫 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 地址格式 | |
number | 接受整數或浮點小數類型輸入 |
url | 僅接受輸入一個有效的 URL 地址格式 |
HTML5 的 range 和 date 類型同樣也可以獲得 jQuery Tools 插件的跨瀏覽器支持,添加 rangeinput 和 dateinput 插件即可。同時我們還可以使用 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 來完成驗證,有空也可以關注一下。
這篇文章由lovelucy於2012-08-12 18:45發表在前端開發。你可以訂閱RSS 2.0 也可以發表評論或引用到你的網站。除特殊說明外文章均為本人原創,並遵從署名-非商業性使用-相同方式共享創作協議,轉載或使用請註明作者和來源,尊重知識分享。 |
批評不自由
則讚美無意義