網(wǎng)頁設(shè)計中靈活使用HTML5表單驗證技術(shù)

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

當(dāng)你在網(wǎng)站中使用一個表單的時候，對某些字段進行驗證是必須的。如果不這樣做，有可能某些客戶信息是錯誤的，還會在你的數(shù)據(jù)庫中積累大量的垃圾數(shù)據(jù)，甚至?xí)：δ愕木W(wǎng)站安全。表單驗證已經(jīng)成為大家的一個共識。在服務(wù)器端，我們可以通過程序很容易的控制它們，在客戶端，我們通常是集成一些Javascript來實現(xiàn)客戶端表單的驗證。

當(dāng)你在網(wǎng)站中使用一個表單的時候，對某些字段進行驗證是必須的。如果不這樣做，有可能某些客戶信息是錯誤的，還會在你的數(shù)據(jù)庫中積累大量的垃圾數(shù)據(jù)，甚至?xí)：δ愕木W(wǎng)站安全。表單驗證已經(jīng)成為大家的一個共識。在服務(wù)器端，我們可以通過程序很容易的控制它們，在客戶端，我們通常是集成一些Javascript來實現(xiàn)客戶端表單的驗證。

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

 

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

1、新的INPUT TYPES類型

HTML5引進了不少新的input type類型。可以使用它們來創(chuàng)建結(jié)束制定data數(shù)據(jù)的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”）可以自動打開移動手機的專門的鍵盤。

更多關(guān)于input types類型的細節(jié)，可以參考MDN wiki，點擊這里查看。

2、必填字段

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

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

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

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

3、范圍限制

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

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

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

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

4、樣式

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

o :valid

o :invalid

o :required

o :optional

o :in-range

o :out-of-range

o :read-only

o :read-write

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

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

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）

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

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

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

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

模式（PATTERNS）

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

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

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

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

本文來自: 成都百度快照優(yōu)化|成都百度關(guān)鍵詞排名優(yōu)化|成都SEO【思為網(wǎng)絡(luò)】，轉(zhuǎn)載請保留出處！歡迎發(fā)表您的評論

相關(guān)標(biāo)簽：網(wǎng)站建設(shè)  網(wǎng)站用戶體驗  移動互聯(lián)網(wǎng)  

相關(guān)推薦

• 網(wǎng)頁設(shè)計之：移動用戶體驗設(shè)計之列表視圖與網(wǎng)格視圖2017-12-16 13:14:49
• 以精致詮釋搜索之美：百度三端搜索首頁2016-12-21 12:38:43
• 馬云：“電子商務(wù)”將消失 新五通一平將引領(lǐng)未來2016-10-13 22:4:19
• 月影談:寫給想成為前端工程師的同學(xué)們【轉(zhuǎn)】2016-10-13 10:50:9
• 一篇文章讀懂微信小程序(應(yīng)用號)是什么，是否值得投入進來做？[轉(zhuǎn)]2016-9-22 22:27:54
• 2015年網(wǎng)頁設(shè)計的9大趨勢-網(wǎng)頁設(shè)計賞析2015-7-31 22:1:10
• 谷歌算法4.21大更新：移動體驗將影響排名2015-3-12 0:30:21
• 關(guān)于如何寫好一篇好軟文的思考2015-1-18 1:46:50
• [轉(zhuǎn)]SEO核心概念：什么是內(nèi)容增益2015-1-18 1:44:57
• 【轉(zhuǎn)】字體字號對用戶體驗的影響--網(wǎng)站用戶體驗篇2014-10-4 23:23:24