HTML5表單屬性和驗證方式的示例分析

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

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

了巨大的損失。

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

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

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

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

<input type=text required>

或者

<input type=text required=yes>

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

<input type=text placeholder="請輸入你的姓名">

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

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

<input type=text pattern=[ a-zA-Z0-9]>

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

<select data="http://domain/數(shù)據(jù)源文件"></select>

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

具體寫法如下：

<input type="text" name="name" autocomplete="on" >

如果希望整個表單都能夠自動完成，則可以這樣寫：

<form action=" " method=" " autocomplete="on">

如果不希望替用戶保存電子郵件地址，則可以設(shè)定autocomplete 的值為off，用來防止惡意猜想用戶信息，具體寫法如下：

<input type="email" name="email" autocomplete="off" >

(7) 步長設(shè)定屬性step。該屬性可以限制輸入的數(shù)字，step為上一個數(shù)字與下一個數(shù)字的間隔，例如：

<input type="number" max="9" min="0" step="2"/>

(8) 其他新增屬性。除了上述幾個屬性外，還有幾個新增屬性，簡要介紹如下。

? onerror。當(dāng)發(fā)生錯誤時運行腳本。

? onhaschange。當(dāng)發(fā)生變化時運行腳本。

? oncontextmenu。當(dāng)觸發(fā)上下文菜單時運行腳本。

? onformchange。當(dāng)表單改變時運行腳本。

? onforminput。當(dāng)表單獲得用戶輸入時運行腳本。

? oninput。當(dāng)元素獲得用戶輸入時運行腳本。

? oninvalid。當(dāng)元素?zé)o效時運行腳本。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5表單屬性和驗證方式的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!