這篇文章主要介紹了HTML5表單屬性和驗(yàn)證方式的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專(zhuān)注于廣宗網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供廣宗營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，廣宗網(wǎng)站制作、廣宗網(wǎng)頁(yè)設(shè)計(jì)、廣宗網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)公司服務(wù)，打造廣宗網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供廣宗網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

在HTML5的眾多變化中，表單數(shù)據(jù)合法性和有效性驗(yàn)證是極為重要的一部分。實(shí)踐證明：大量安全問(wèn)題是因?yàn)楸韱螖?shù)據(jù)沒(méi)有進(jìn)行合法性和有效性驗(yàn)證而引起的。由于表單數(shù)據(jù)沒(méi)有進(jìn)行合法和有效性驗(yàn)證而被攻擊和入侵，進(jìn)而導(dǎo)致數(shù)據(jù)泄露和安全事故，對(duì)政府、企業(yè)和個(gè)人等都造成

了巨大的損失。

同時(shí)，也有很大一部分設(shè)計(jì)師和制作人員，由于不太會(huì)編寫(xiě)瀏覽器端的數(shù)據(jù)驗(yàn)證程序，也因?yàn)楦鞣N原因不太會(huì)使用網(wǎng)上的一些框架，導(dǎo)致有些產(chǎn)品缺少對(duì)表單數(shù)據(jù)進(jìn)行合法性和有效性驗(yàn)證，留下了安全隱患。

鑒于此，HTML5在表單屬性和驗(yàn)證其合法性方面進(jìn)行了規(guī)范，大大地節(jié)省了瀏覽器端的代碼量，提高了代碼效率，也統(tǒng)一了安全問(wèn)題。雖然服務(wù)器端依然需要驗(yàn)證，但已經(jīng)有效地從兩端（客戶(hù)端和服務(wù)器端）中的一端解決了問(wèn)題。因此，我們更愿意稱(chēng)之為進(jìn)化，而不是變化。

下面我們將一一講解其重要屬性。正則表達(dá)式部分我們只作一些常用的內(nèi)容過(guò)濾介紹，有興趣的讀者可以深入研究一下。

(1) 必填項(xiàng)屬性required。防空白提交的寫(xiě)法可以是

或者

(2) 占位屬性placeholder，即還未輸入內(nèi)容的input中默認(rèn)顯示的占位字符。具體寫(xiě)法如下：

(3) 數(shù)字類(lèi)型控件提供的max、min屬性。

(4) 正則表達(dá)式屬性pattern。正則表達(dá)式判斷只能填寫(xiě)a～z、A～Z和0～9內(nèi)的字符，具體代碼如下：

(5) data屬性，可外聯(lián)數(shù)據(jù)源，例如：

(6) 自動(dòng)完成屬性autocomplete。這是一個(gè)雙向?qū)傩裕_(kāi)啟時(shí)可以幫助用戶(hù)盡快完成表單填寫(xiě)，關(guān)閉后又可以防止泄露個(gè)人隱私數(shù)據(jù)。如果希望替用戶(hù)在第二次填寫(xiě)表單時(shí)能夠快速填寫(xiě)完單，節(jié)省時(shí)間，則可以設(shè)定autocomplete 的值為on。

具體寫(xiě)法如下：

如果希望整個(gè)表單都能夠自動(dòng)完成，則可以這樣寫(xiě)：