html5中表單驗(yàn)證的方式是什么

今天小編給大家分享一下html5中表單驗(yàn)證的方式是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

表單驗(yàn)證方式：1、在表單控件中將required特性設(shè)置為true；2、在表單控件上設(shè)置pattern特性，井賦予適當(dāng)?shù)钠ヅ湟?guī)則；3、在表單控件上設(shè)置maxLength特性；4、為表單控件設(shè)置min和max特性，并賦予允許的最小值和最大值。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

今天來(lái)談?wù)凥TML5的表單驗(yàn)證。在深人探討表單驗(yàn)證之前，讓我們先思考一下表單驗(yàn)證的真實(shí)含義。就其核心而言，表單驗(yàn)證是一套系統(tǒng)，它為終端用戶(hù)檢測(cè)無(wú)效的控件數(shù)據(jù)并標(biāo)記這些錯(cuò)誤。換言之，表單驗(yàn)證就是在表單提交服務(wù)器前對(duì)其進(jìn)行一系列的檢查并通知用戶(hù)糾正錯(cuò)誤。

但是真正的表單驗(yàn)證是什么？

是一種優(yōu)化。

之所以說(shuō)表單驗(yàn)證是一種優(yōu)化，是因?yàn)閮H通過(guò)表單驗(yàn)證機(jī)制不足以保證提交給服務(wù)器的表單數(shù)據(jù)是正確和有效的。另一方面，設(shè)計(jì)表單驗(yàn)證是為了讓W(xué)eb應(yīng) 用更快地拋出錯(cuò)誤。換句話(huà)說(shuō)，最好利用瀏覽器內(nèi)置的處理機(jī)制來(lái)告知用戶(hù)網(wǎng)頁(yè)內(nèi)包含無(wú)效的表單控件值。過(guò)去，數(shù)據(jù)在網(wǎng)絡(luò)上轉(zhuǎn)一圈，僅僅是為了讓服務(wù)器通知用 戶(hù)他輸入了錯(cuò)誤的數(shù)據(jù)。如果瀏覽器完全有能力讓錯(cuò)誤在離開(kāi)客戶(hù)端之前就被捕獲到，那么我們應(yīng)該利用這個(gè)優(yōu)勢(shì)。

不過(guò)，瀏覽器的表單檢查還不足以處理所有的錯(cuò)誤。

話(huà)雖如此，HTML5還是引入了八種用于驗(yàn)證表單控件的數(shù)據(jù)正確性的方法。讓我們依次了解一下，不過(guò)先要介紹一下用于反饋驗(yàn)證狀態(tài)的ValidityState對(duì)象。

在支持HTML5表單驗(yàn)證的瀏覽器中，可以通過(guò)表單控件來(lái)訪問(wèn)ValidityState對(duì)象:

var valCheck = document.myForm.myInput.validity;

這行代碼獲取了名為myInput的表單元素的ValidityState對(duì)象。對(duì)象包含了對(duì)所有八種驗(yàn)證狀態(tài)的引用，以及最終驗(yàn)證結(jié)果。

調(diào)用方式如下：

valCheck.valid

執(zhí)行完畢，我們會(huì)得到一個(gè)布爾值，它表示表單控件是否已通過(guò)了所有的驗(yàn)證約束條件?？梢园裿alid特性看做是最終驗(yàn)證結(jié)果：如果所有八個(gè)約束條件都通過(guò)了，valid特性就是true，否則，只要有一項(xiàng)約束沒(méi)通過(guò)，valid標(biāo)志都是false。

如前所述，任何表單元素都有八個(gè)可能的驗(yàn)證約束條件。每個(gè)條件在ValidityState對(duì)象中都有對(duì)應(yīng)的特性名，可以用適當(dāng)?shù)姆绞皆L問(wèn)。讓我們逐一分析，看看它們是如何與表單控件關(guān)聯(lián)的，以及如何基于ValidityState對(duì)象來(lái)對(duì)它們進(jìn)行檢查：

1、valueMissing

目的：確保表單控件中的值已填寫(xiě)。

用法：在表單控件中將required特性設(shè)置為true。

示例：

<input type="text" name="myText" required>

詳細(xì)說(shuō)明：如果表單控件設(shè)置了required特性，那么在用戶(hù)填寫(xiě)或者通過(guò)代碼調(diào)用方式填值之前，控件會(huì)一直處于無(wú)效狀態(tài)。例如，空的文本輸入框無(wú)法通過(guò)必填檢查，除非在其中輸入任意文本。輸入值為空時(shí)，valueMissing會(huì)返回true。

2、typeMismatch

目的：保證控件值與預(yù)期類(lèi)型相匹配(如numbe、email、URL等).

用法：指定表單控件的type特性值。

示例：

<input type="email" name="myEmail">

詳細(xì)說(shuō)明：特殊的表單控件類(lèi)型不只是用來(lái)定制手機(jī)鍵盤(pán)， 如果瀏覽器能夠識(shí)別出來(lái)表單控件中的輸入不符合對(duì)應(yīng)的類(lèi)型規(guī)則，比如email地址中沒(méi)有@符號(hào)，或者number型控件的輸入值不是有效的數(shù)字，那么瀏 覽器就會(huì)把這個(gè)控件標(biāo)記出來(lái)以提示類(lèi)型不匹配。無(wú)論哪種出錯(cuò)情況，typeMismatch將返回true。

3、patternMismatch

目的：根據(jù)表單控件上設(shè)置的格式規(guī)則驗(yàn)證輸入是否為有效格式。

用法：在表單控件上設(shè)置pattern特性，井賦予適當(dāng)?shù)钠ヅ湟?guī)則。

示例：

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

詳細(xì)說(shuō)明：pattern特性向開(kāi)發(fā)人員提供了一種強(qiáng)大而靈活的方式來(lái)為表單的控件值設(shè)定正則表達(dá)式驗(yàn)證機(jī)制。當(dāng)為控件設(shè)置了pattern特性后，只要 輸入控件的值不符合模式規(guī)則，patternMismatch就會(huì)返回true值。從引導(dǎo)用戶(hù)和技術(shù)參考兩方面考慮，你應(yīng)該在包含pattern特性的表 單控件中設(shè)置title特性以說(shuō)明規(guī)則的作用。

4、tooLong

目的：避免輸入值包含過(guò)多字符。

用法：在表單控件上設(shè)置maxLength特性。

示例：

<input type="text" name="limitedText" maxLength="140">

詳細(xì)說(shuō)明：如果輸入值的長(zhǎng)度超過(guò)maxLength， tooLong特性會(huì)返回true。雖然表單控件通常會(huì)在用戶(hù)輸入時(shí)限制最大長(zhǎng)度，但在有些情況下，如通過(guò)程序設(shè)置，還是會(huì)超出最大值。

5、rangeUnderflow

目的：限制數(shù)值型控件的最小值。

用法：為表單控件設(shè)置min特性，并賦予允許的最小值。

示例：

<input type="range" name="ageCheck" min="18">

詳細(xì)說(shuō)明：在需要做數(shù)值范圍檢查的表單控件中，數(shù)值很可能會(huì)暫時(shí)低于設(shè)置的下限。此時(shí)，ValidityState的rangeUnderflow特性將返回true。

6、rangeOverflow

目的：限制數(shù)值型控件的最大值。

用法：為表單控件設(shè)置max特性，并賦予允許的最大值。

示例：

<input type="range" name="kidAgeCheck" max="12">

詳細(xì)說(shuō)明：與rangeUnderflow類(lèi)似，如果一個(gè)表單控件的值比max更大，特性將返回true。

7、stepMismatch

目的：確保輸入值符合min、max及step即設(shè)置。

用法：為表單控件設(shè)置step特性，指定數(shù)值的增量。

示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

詳細(xì)說(shuō)明：此約束條件用來(lái)保證數(shù)值符合min、max和step的要求。換句話(huà)說(shuō)，當(dāng)前值必須是最小值與step特性值的倍數(shù)之和。例如，范圍從0到100，step特性值為5，此時(shí)就不允許出現(xiàn)17，否則stepMismatch返回true值。

8、customError

目的：處理應(yīng)用代碼明確設(shè)置及計(jì)算產(chǎn)生的錯(cuò)誤。

用法：調(diào)用setCustomValidity(message)將表單控件置于customError狀態(tài)。

示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

詳細(xì)說(shuō)明：瀏覽器內(nèi)置的驗(yàn)證機(jī)制不適用時(shí)，需要顯示自定義驗(yàn)證錯(cuò)誤信息。當(dāng)輸入值不符合語(yǔ)義規(guī)則時(shí)，應(yīng)用程序代碼應(yīng)設(shè)置這些自定義驗(yàn)證消息。

自定義驗(yàn)證消息的典型用例是驗(yàn)證控件中的值是否一致。例如，密碼和密碼確認(rèn)兩個(gè)輸人框的值不匹配。只要定制了驗(yàn)證消息，控件就會(huì)處于無(wú)效狀態(tài)，并且customError返回true。要清除錯(cuò)誤，只需在控件上調(diào)用setCustomValidity("")即可。

以上就是“html5中表單驗(yàn)證的方式是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。