這篇文章主要介紹“HTML5中有哪些表單驗(yàn)證方法”，在日常操作中，相信很多人在HTML5中有哪些表單驗(yàn)證方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML5中有哪些表單驗(yàn)證方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、望都ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的望都網(wǎng)站制作公司

1、valueMissing

目的：確保表單控件中的值已填寫。

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

示例：

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

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

2、typeMismatch

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

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

示例：

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

詳細(xì)說(shuō)明：特殊的表單控件類型不只是用來(lái)定制手機(jī)鍵盤， 如果瀏覽器能夠識(shí)別出來(lái)表單控件中的輸入不符合對(duì)應(yīng)的類型規(guī)則，比如email地址中沒有@符號(hào)，或者number型控件的輸入值不是有效的數(shù)字，那么瀏 覽器就會(huì)把這個(gè)控件標(biāo)記出來(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特性向開發(fā)人員提供了一種強(qiáng)大而靈活的方式來(lái)為表單的控件值設(shè)定正則表達(dá)式驗(yàn)證機(jī)制。當(dāng)為控件設(shè)置了pattern特性后，只要 輸入控件的值不符合模式規(guī)則，patternMismatch就會(huì)返回true值。從引導(dǎo)用戶和技術(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ì)在用戶輸入時(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類似，如果一個(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的要求。換句話說(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)證消息。

到此，關(guān)于“HTML5中有哪些表單驗(yàn)證方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

分享標(biāo)題：HTML5中有哪些表單驗(yàn)證方法-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article20/dispco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、Google、小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)