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

2016-6-16 23:57:50 | 作者：sw996 | 0個(gè)評(píng)論 | 人瀏覽

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

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

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

下面來看一看HTML5表單驗(yàn)證的基本介紹。

1、新的INPUT TYPES類型

HTML5引進(jìn)了不少新的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”）可以自動(dòng)打開移動(dòng)手機(jī)的專門的鍵盤。

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

2、必填字段

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

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

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

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

3、范圍限制

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

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

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

<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í)將自動(dòng)的顏色設(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)你沒有正確填寫表單而點(diǎn)擊了提交按鈕的時(shí)候，錯(cuò)誤字段上會(huì)有一個(gè)提示出現(xiàn)。通過設(shè)置字段的“title”屬性，我們可以在提示中顯示一些額外的信息。

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

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

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

模式（PATTERNS）

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

我們的DEMO中的email地址就是通過正則表達(dá)式來驗(yàn)證的。

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

教程就到這里，希望這篇教程能幫助你了解HTML5表單驗(yàn)證方面的知識(shí)。