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

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

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

了巨大的損失。

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

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

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

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

<input type=text required>

或者

<input type=text required=yes>

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

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

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

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

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

(5) data屬性，可外聯數據源，例如：

<select data="http://domain/數據源文件"></select>

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

具體寫法如下：

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

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

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

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

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

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

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

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

? onerror。當發生錯誤時運行腳本。

? onhaschange。當發生變化時運行腳本。

? oncontextmenu。當觸發上下文菜單時運行腳本。

? onformchange。當表單改變時運行腳本。

? onforminput。當表單獲得用戶輸入時運行腳本。

? oninput。當元素獲得用戶輸入時運行腳本。

? oninvalid。當元素無效時運行腳本。

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