網頁設計中靈活使用HTML5表單驗證技術

2016-6-16 23:57:50 | 作者：sw996 | 0個評論 | 人瀏覽

當你在網站中使用一個表單的時候，對某些字段進行驗證是必須的。如果不這樣做，有可能某些客戶信息是錯誤的，還會在你的數據庫中積累大量的垃圾數據，甚至會危害你的網站安全。表單驗證已經成為大家的一個共識。在服務器端，我們可以通過程序很容易的控制它們，在客戶端，我們通常是集成一些Javascript來實現客戶端表單的驗證。

當你在網站中使用一個表單的時候，對某些字段進行驗證是必須的。如果不這樣做，有可能某些客戶信息是錯誤的，還會在你的數據庫中積累大量的垃圾數據，甚至會危害你的網站安全。表單驗證已經成為大家的一個共識。在服務器端，我們可以通過程序很容易的控制它們，在客戶端，我們通常是集成一些Javascript來實現客戶端表單的驗證。

現在，HMTL5給我們提供了一些特性來處理大多數你需要驗證的字段。HTML5通過提供一些特殊屬性、新的input類型來實現內置的表單驗證支持，并且很容易通過CSS來控制它們的樣式。

 

下面來看一看HTML5表單驗證的基本介紹。

1、新的INPUT TYPES類型

HTML5引進了不少新的input type類型?？梢允褂盟鼈儊韯摻ńY束制定data數據的input輸入框。

下面是新的HTML5 type類型：

1.  color

2. date

3. datetime

4. datetime-local

5. email

6.  month

7. number

8. range

9.  search

10. tel

11.  time

12. url

13. week

可以像下面這樣使用它們：

<input type="email"/>                                

如果瀏覽器不支持該type類型，那么input就和普通的輸入框一樣。另外，一些input字段（例如：“email”和“tel”）可以自動打開移動手機的專門的鍵盤。

更多關于input types類型的細節，可以參考MDN wiki，點擊這里查看。

2、必填字段

通過簡單的在<input>、<select>或<textarea>上添加“required”屬性，可以將這些表單字段設置為必填字段。

<input type="checkbox" name="terms" required >                               

這里有個問題，你可以在必填字段中隨意填寫任何數據，甚至是一個空格也可以，一會我們將教你如何解決這個問題。

當你在一個email字段或url字段中設置required，瀏覽器希望得到一個正確的email或url格式，但是，形如“z@zz”的電子郵件格式也會被認為是正確的。

3、范圍限制

我們可以在number指定中設置一些限制條件如：max length 或 minimum、maximum等。要現在在input字段或textareas的文字長度，使用“maxlength”屬性。如果你想通過粘貼一個長字符串來突破限制，表單將簡單的進行字符串截斷。

<input type="text" name="name" required  maxlength="15">                                

<input type=”number”>字段使用“min”和“max”屬性來創建一個范圍。

<input type="number" name="age" min="18" required>                                

4、樣式

可以通過CSS3偽類來為表單的各種狀態提供樣式。

o :valid

o :invalid

o :required

o :optional

o :in-range

o :out-of-range

o :read-only

o :read-write

意思是說，你可以設置必填字段為一種樣式，可選字段為另一種樣式，等等...

在我們的DEMO中，我們通過“valid”和“invalid”選擇器結合“focu”偽類來在用戶使用該字段時將自動的顏色設置為紅色或綠色。

input:focus:invalid,

textarea:focus:invalid{

    border:solid 2px #F5192F;

}

 

input:focus:valid,

textarea:focus:valid{

    border:solid 2px #18E109;

    background-color:#fff;

}                                

5、工具提示（TOOLTIPS）

當你沒有正確填寫表單而點擊了提交按鈕的時候，錯誤字段上會有一個提示出現。通過設置字段的“title”屬性，我們可以在提示中顯示一些額外的信息。

注意，不同的瀏覽器顯示的提示樣式是不同的。在Chrome瀏覽器中，title屬性中的文字將出現在錯誤提示信息的下面，文字要小一號。在Firefox瀏覽器中不會顯示你定制的title信息。

<input type="text" name="name" title="Please enter your user name.">                                 

錯誤提示框和文本可以使用javascript很容易的改變，這些將在以后的教程中介紹。

模式（PATTERNS）

"pattern"屬性可以讓開發者設置一個正則表達式，瀏覽器將在表單提交前使用正則表達式來驗證表單字段。這種驗證方式顯然要比data驗證更靈活準確。

我們的DEMO中的email地址就是通過正則表達式來驗證的。

<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="example@mail.com">                                 

教程就到這里，希望這篇教程能幫助你了解HTML5表單驗證方面的知識。

本文來自: 成都百度快照優化|成都百度關鍵詞排名優化|成都SEO【思為網絡】，轉載請保留出處！歡迎發表您的評論

相關標簽：網站建設  網站用戶體驗  移動互聯網  

相關推薦

• 以精致詮釋搜索之美：百度三端搜索首頁2016-12-21 12:38:43
• 馬云：“電子商務”將消失 新五通一平將引領未來2016-10-13 22:4:19
• 月影談:寫給想成為前端工程師的同學們【轉】2016-10-13 10:50:9
• 一篇文章讀懂微信小程序(應用號)是什么，是否值得投入進來做？[轉]2016-9-22 22:27:54
• 2015年網頁設計的9大趨勢-網頁設計賞析2015-7-31 22:1:10
• 谷歌算法4.21大更新：移動體驗將影響排名2015-3-12 0:30:21
• 關于如何寫好一篇好軟文的思考2015-1-18 1:46:50
• [轉]SEO核心概念：什么是內容增益2015-1-18 1:44:57
• 【轉】字體字號對用戶體驗的影響--網站用戶體驗篇2014-10-4 23:23:24
• 4G時代要看智慧：瀏覽器的移動互聯網入口大戰2014-9-1 23:28:17