日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML如何實(shí)現(xiàn)交互式表單驗(yàn)證方法

這篇文章將為大家詳細(xì)講解有關(guān)HTML如何實(shí)現(xiàn)交互式表單驗(yàn)證方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)，成都微信小程序，網(wǎng)頁設(shè)計(jì)制作，移動網(wǎng)站建設(shè)，營銷型網(wǎng)站建設(shè)幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長。

在 HTML 中創(chuàng)建表單總是有點(diǎn)復(fù)雜。你首先得將 HTML 標(biāo)記編寫正確，然后需要確保每一個(gè)表單項(xiàng)在提交之前都有一個(gè)可用的值，最后還需要在有問題時(shí)用提醒來告知用戶。

還好 HTML5 引入了一些新的特性，讓這件事情變得輕松了許多。特別是對表單控件進(jìn)行了擴(kuò)展來支持約束，從而無需使用 JavaScript， 就可以讓瀏覽器在客戶端對表單內(nèi)容進(jìn)行驗(yàn)證。

WebKit 已經(jīng)進(jìn)行了部分支持。在表單控件上使用屬性來描述約束，然后使用 JavaScript 中的 checkValidity() API 來查詢一個(gè)表單控件和整個(gè)表單輸入的有效性，這已經(jīng)成為可能。使用 ValidityState API 來了解違反了哪個(gè)約束，也是可以實(shí)現(xiàn)的。

不過, WebKit 以前并不支持 HTML 的交互式表單驗(yàn)證, 而這個(gè)會發(fā)生在表單提交時(shí) (除非在

元素上設(shè)置了 novalidate 屬性) 或者是使用 reportValidity() API 的時(shí)候。此外，我們很高興地宣布， Webkit 現(xiàn)在已經(jīng)對此進(jìn)行了支持，并且在 Safari 技術(shù)預(yù)覽版 19 也啟用了這項(xiàng)功能。有了交互式表單驗(yàn)證， WebKit 現(xiàn)在將會對表單中所有的表單控件進(jìn)行有效性檢測。如果有哪怕一個(gè)表單控件違反了約束，WebKit 就會將輸入焦點(diǎn)放到第一個(gè)上面，界面頁面滾動顯示出這個(gè)控件，然后在其旁邊顯示一個(gè)氣泡消息來對問題進(jìn)行解釋。

　驗(yàn)證的約束

　　輸入類型

有一些輸入類型本身就擁有一些內(nèi)在的約束。將 type 設(shè)置為 “email”, “number” 或者 “URL” 的話，就會自動檢查輸入的值是否是有效的電子郵件地址、數(shù)字或者 URL, 例如:

　　驗(yàn)證屬性

下面的屬性可以被用來在表單控件中描述約束:

  • required: 告訴用戶必須輸入一個(gè)值。

  • pattern=“[a-z]”: 告訴用戶必須輸入一個(gè)可以匹配給定 JavaScript 正則表達(dá)式的值。

  • minlength=x: 告訴用戶必須輸入一個(gè)至少有 x 個(gè)字符的值。

  • maxlength=y: 告訴用戶必須輸入一個(gè)至多有 x 個(gè)字符的值。

  • min=x: 告訴用戶必須輸入一個(gè)大于或者等于 x 的值。。

  • max=y: 告訴用戶必須輸入一個(gè)小于或者等于 y 的值。

  • step=x: 告訴用戶必須輸入一個(gè)在 min 的基礎(chǔ)上加上 x 的倍數(shù)的值。

　約束驗(yàn)證

約束驗(yàn)證可以用以下集中方式觸發(fā)：

  • 可以在一個(gè)表單元素或者特定的表單控件上調(diào)用 checkValidity() 。這個(gè)方法會在有約束被違反的時(shí)候返回 false。同時(shí)它也會在違反約束的元素上觸發(fā)一個(gè)叫做“invalid”的事件?？梢允褂猛ㄟ^表單控件上的“validity”屬性所暴露的 ValidityState 對象來檢查違反了哪個(gè)約束。

  • 可以在一個(gè)表單約束或者特定的表單控件上調(diào)用 reportValidity()。這樣做會觸發(fā)針對約束的交互式驗(yàn)證。此外 checkValidity(), reportValidity() 也會將輸入焦點(diǎn)放到第一個(gè)被檢查出違背了約束的元素上，并且在其旁邊顯示一個(gè)氣泡消息來對問題進(jìn)行描述。

  • 交互式表單驗(yàn)證也會在提交表單的時(shí)候發(fā)生，除非在元素上設(shè)置了“novalidate”屬性。

　自定義約束

使用 JavaScript 來做驗(yàn)證然后利用 setCustomValidity() API 的話，可以實(shí)現(xiàn)更加復(fù)雜的驗(yàn)證約束或者向校驗(yàn)出違反約束的輸入項(xiàng)提供更加有用的錯(cuò)誤消息。

JavaScript 可以通過在一個(gè)表單控件上偵聽給定的事件來觸發(fā)(例如： onchange, oninput, …) 。然后被執(zhí)行的 JavaScript 代碼可以對表單控件的數(shù)據(jù)進(jìn)行驗(yàn)證，然后使用 setCustomValidity() 來對控件的錯(cuò)誤消息進(jìn)行更新：

Feeling:

　驗(yàn)證消息氣泡提示

在進(jìn)行交互式表單驗(yàn)證的時(shí)候, 一個(gè)針對問題進(jìn)行說明的氣泡提示會顯示在第一個(gè)擁有被驗(yàn)證違反約束的數(shù)據(jù)的表單控件旁邊, 像這樣:

HTML如何實(shí)現(xiàn)交互式表單驗(yàn)證方法

針對特定的約束默認(rèn)設(shè)置了一些本地化的驗(yàn)證消息。如果你希望對驗(yàn)證消息進(jìn)行自定義, 可以考慮使用 setCustomValidity() API。注意，WebKit 對于 JavaScript 的國際化 API 也是支持的，這個(gè)能夠幫助我們對自定義的驗(yàn)證消息進(jìn)行本地化。

關(guān)于“HTML如何實(shí)現(xiàn)交互式表單驗(yàn)證方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。


本文名稱：HTML如何實(shí)現(xiàn)交互式表單驗(yàn)證方法
轉(zhuǎn)載來于：http://www.dlmjj.cn/article/jjepcc.html