国产一区二区三区a,日韩欧美亚洲中文字幕,日本中文字幕视频久

HTML5表單信息驗證工作原理

原創(chuàng)|行業(yè)資訊|編輯：龔雪|2014-11-27 09:25:48.000|閱讀 965 次

概述：HTML5在Web開發(fā)中，是如何輕松解決表單信息驗證的？！

任何Web開發(fā)者都能向我們保證，在窗體上提交輸入的驗證需要花費大量的時間來構(gòu)建Web表單。當(dāng)涉及到填寫Web表單上的信息時，即使是最熟悉Web的用戶也可以并且都會犯錯。當(dāng)用戶點擊頁面上的提交按鈕時，可能會導(dǎo)致不完整或不準(zhǔn)確的數(shù)據(jù)被提交上去。

為了避免輸入出錯，開發(fā)者需要在加工信息前先進(jìn)行驗證。驗證是在接受輸入信息時最好的做法。把數(shù)據(jù)截止在門外越早越好。

驗證在用戶提交表單時，通過一個服務(wù)器端執(zhí)行來完成的。在這種類型的驗證里，用戶提供的數(shù)據(jù)先被提交給服務(wù)器，服務(wù)器處理之后如果判定輸入數(shù)據(jù)不正確或不完整，就會拋出一個相應(yīng)的錯誤信息。

隨著JavaScript使用的越來越多，瀏覽器已經(jīng)對通過專門的驗證庫對客戶端驗證提供支持了。HTML5背后的智囊團們意識到了Web開發(fā)者需要對表單信息驗證提供支持，然后就內(nèi)置了對驗證的支持，并引進(jìn)了在客戶端驗證的支持，以將輸入錯誤消滅于萌芽狀態(tài)。通過HTML5表單里的客戶端驗證，用戶不需要等所有的輸入都完成并提交信息給服務(wù)器后，才能分辨出哪些是出錯信息。實際上，標(biāo)記元素能指出那些信息不是必填的，這個邏輯在提交按鈕發(fā)送數(shù)據(jù)給遠(yuǎn)程服務(wù)器之前就已經(jīng)開始執(zhí)行了。

讓我們來看幾個支持客戶端驗證的屬性吧。

‘required’required屬性能被指定用于任何輸入標(biāo)記元素來注釋需要這些的地方。一個簡單的聲明如下所示：

當(dāng)上面的HTML在現(xiàn)代瀏覽器里被提出來時，你可以看到文本框有一個不同的陰影（這是我們?yōu)檎埱蟮脑刂付ǖ娘L(fēng)格）。當(dāng)用戶跳過必填字段（通過點擊它，然后并沒有輸入就到下一步），輸入框會變成周圍圍繞紅色邊框的效果樣式。

通過使用客戶端驗證必填字段，這樣的造型有助于與用戶溝通。當(dāng)表單被提交時（用戶點擊提交按鈕），HTML5驗證就開始執(zhí)行了。但這個發(fā)生時，瀏覽器開始通過必填輸入的列表來提示是否缺少要求的輸入信息。有時候并沒有必要去驗證，在這種情況下，我們可以設(shè)置窗體上的“movalidate”屬性。

例如，下面的代碼就沒有讓客戶端驗證規(guī)則啟動：