HTML表單和約束驗證的完整指南

在本文中，我們查看HTML表單字段和HTML5提供的驗證選項。我們還將研究如何通過使用CSS和JavaScript來增強它們。

鑰匙要點

通過引入自動化許多驗證過程的新輸入類型和屬性，可以增強形式驗證，從而減少了廣泛的JavaScript。 HTML5中的約束驗證允許瀏覽器在提交之前根據指定的規則自動檢查用戶輸入，增強用戶體驗和數據完整性。

> 客戶端驗證雖然有助於捕獲常見錯誤，但必須補充服務器端驗證，以確保數據安全性和完整性。

• >自定義JavaScript輸入應在可能的情況下避免，因為它們使可訪問性複雜並可能與本機瀏覽器函數衝突。
• > CSS可用於基於其驗證狀態樣式的輸入字段，其偽級為：有效和：無效，允許對用戶輸入進行動態反饋。
> HTML5中的約束驗證API啟用HTML無法處理的自定義驗證方案，例如比較兩個字段或異步檢查，增強形式功能和用戶交互。
• >
• 什麼是約束驗證？
• 每個表單字段都有目的。而且這個目的通常受到矛盾的約束，或者規定了應該和不應將其輸入每個表單字段的規則。例如，電子郵件字段將需要有效的電子郵件地址；密碼字段可能需要某些類型的字符，並且具有最少的必需字符。文本字段可能會限制可以輸入多少個字符。
>
• >現代瀏覽器能夠檢查用戶觀察到這些約束是否存在，並在違反這些規則時警告它們。這被稱為contraint驗證。
>

>客戶端與服務器端驗證

>大多數JavaScript代碼在語言處理早期所處理的客戶端表單驗證的早期寫作。即使在今天，開發人員也花費大量時間編寫功能來檢查字段值。在現代瀏覽器中，這仍然需要嗎？可能不是

。在大多數情況下，這實際上取決於您要做的事情。

>

，但首先，這是一個很大的警告信息：

>客戶端驗證是一種良好的效果，可以防止在應用程序浪費時間和帶寬將數據發送到服務器之前的常見數據輸入錯誤。它不能替代服務器端驗證！

> 始終對數據服務器端進行消毒。並非每個請求都來自瀏覽器。即使這樣做，也無法保證瀏覽器驗證了數據。任何知道如何打開瀏覽器的開發人員工具的人也可以繞過您精心製作的HTML和JavaScript。

> html5輸入字段

html提供：

• 用於多行文本框
• 用於選項的下拉列表
• for…buttons

，但您將最常使用：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

類型屬性設置了控制類型，並且有很大的選擇：

> > type 描述 按鈕 沒有默認行為的按鈕 複選框 一個支票/勾號 顏色 彩色拾取器 日期 一年，月和一天的選擇日期 DateTime-Local 日期和時間挑選器 電子郵件 電子郵件輸入字段 文件 文件拾取器 隱 一個隱藏的字段 圖像 顯示由SRC屬性定義的圖像的按鈕 月 一個月和年度的選手 數字 一個編號輸入字段 密碼 密碼輸入字段，帶有晦澀的文字 收音機 單選按鈕 範圍 滑塊控件 重置 一個按鈕將所有表單輸入其默認值的輸入（但避免使用此），因為它很少有用） 搜尋 搜索條目字段 提交 表單提交按鈕 電話 電話號碼輸入字段 文字 文本輸入字段 時間 沒有時區的時間選擇器 URL URL輸入字段 星期 一周和年度選手 如果您省略類型屬性或不支持選項，則瀏覽器會返回文本。現代瀏覽器對所有類型都有良好的支持，但是舊瀏覽器仍將顯示一個文本輸入字段。

其他有用的屬性包括：

屬性 描述 接受 文件上傳類型 alt 圖像類型的替代文本 自動完成 用於現場自動完成的提示 自動對焦 重點字段在頁面加載上 捕獲 媒體捕獲輸入方法 檢查 檢查復選框/收音機 禁用 禁用控件（不會驗證或提交其價值） 形式 使用此ID與表格相關聯 形式 在提交和圖像按鈕上提交的URL 輸入模式 數據類型提示 列表 自動完成選項的ID 最大限度 最大值 最大長度 最大弦長 最小 最小值 最小長度 最小字符串長度 姓名 控制的名稱，提交給服務器 圖案 正則表達模式，例如一個或多個大寫字符的[A-Z] 佔位符 當字段值為空時，佔位符文字 可讀 該字段不是可編輯的，但仍將得到驗證和提交 必需的 需要該字段 尺寸 控制大小（通常在CSS中覆蓋） 拼寫檢查 設置真或錯誤的拼寫檢查 src 圖像URL 步 數字和範圍的增量值 類型 現場類型（見上文） 價值 初始值 html輸出字段

以及輸入類型，HTML5提供僅讀取輸出：

• >輸出：計算或用戶操作的文本結果
• 進度：具有值和最大屬性的進度欄
• 米：可以根據設定的值，最小，最大，低，高和最佳屬性在綠色，琥珀和紅色之間變化的比例

>輸入標籤

>字段應具有關聯的，您可以將其包裹在元素上：>

或使用for for屬性將字段的ID鏈接到標籤：>

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

標籤對於可訪問性很重要。您可能已經遇到了使用佔位符來節省屏幕空間的表格：

一旦用戶鍵入某些內容，

佔位符文本即使是一個空間也會消失。顯示標籤比強迫用戶記住該領域想要的更好！

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

>輸入行為

>字段類型和約束屬性會更改瀏覽器的輸入行為。例如，一個數字輸入顯示移動設備上的數字鍵盤。該字段可能會顯示旋轉器和鍵盤上/向下光標按下將增加並減小值。 >

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

大多數字段類型都是顯而易見的，但是有例外。例如，信用卡是數字的，但是輸入16位數字時的增量/減少旋轉器是沒有用的，而且很容易上下。最好使用標准文本類型，但將InputMode屬性設置為數字，該屬性顯示了適當的鍵盤。設置自動完整=“ cc-number”還建議任何預先配置或先前輸入的卡號。

使用正確的字段類型和自動更正提供的好處，在JavaScript中很難實現。例如，某些移動瀏覽器可以：

>通過使用攝像頭掃描卡來導入信用卡詳細信息

>導入SMS

發送的一次性編碼

>自動驗證

瀏覽器確保輸入值遵守由類型，最小，最大步驟，最小值，最大長度，模式和所需屬性定義的約束。例如：
• >試圖提交空價值會阻止表單提交，並在Chrome中顯示以下消息：>

啟發者將不允許在1到100範圍之外的值。如果您鍵入不是數字的字符串，則會出現類似的驗證消息。

所有，沒有一行JavaScript。

您可以通過以下方式停止瀏覽器驗證

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

>將Novalidate屬性添加到元素

>將formnaloalication屬性添加到提交按鈕或圖像>

創建自定義JavaScript輸入 >如果您正在編寫新的基於JavaScript的日期條目組件，請停下來遠離鍵盤！

>

>編寫自定義輸入控件很困難。您必須考慮鼠標，鍵盤，觸摸，語音，可訪問性，屏幕尺寸以及JavaScript失敗時會發生什麼。您還可以創建不同的用戶體驗。也許您的控件優於台式機，iOS和Android上的標準日期選擇器，但是陌生的UI會使某些用戶感到困惑。

開發人員選擇創建基於JavaScript的輸入的主要原因有三個主要原因。

>

1。標準控件很難樣式

> CSS樣式是有限的，通常需要黑客攻擊，例如在偽元素之後用標籤的::覆蓋輸入。情況正在改善，但質疑任何優先級的設計優先於功能的設計。 >

2。現代類型不支持舊瀏覽器

本質上，您正在編碼Internet Explorer。 IE用戶不會獲得約會選擇器，但仍然可以以yyyy-mm-dd格式輸入日期。如果您的客戶堅持使用，請僅在IE中加載polyfill。不需要負擔現代瀏覽器。

>

3。您需要一種新的輸入類型，該類型從未在

之前實施過

這些情況很少見，但始終從適當的HTML5字段開始。它們很快，甚至在腳本加載之前就可以工作。您可以根據需要逐步增強字段。例如，灑水的JavaScript可以確保日曆事件的結束日期發生在開始日期之後。

>

摘要：

>避免重新發明HTML控件！

> CSS驗證樣式

>您可以將以下偽級應用於輸入字段，以根據當前狀態進行樣式：

selector 描述 ：重點 焦點的領域 ：焦點 一個元素包含一個帶有焦點的字段（是的，它是家長選擇器！） ：焦點可見 由於鍵盤導航，元素具有重點，因此需要使用焦點戒指或更明顯 ：必需的 具有所需屬性的字段 ：選修的 沒有必需屬性的字段 ：有效的 已通過驗證的字段 ：無效的 尚未通過驗證的字段 ：用戶錄音 用戶與它進行交互後已通過驗證的字段（僅Firefox） ：用戶活躍 用戶與它進行交互後尚未通過驗證的字段（僅Firefox） ：內部 該值在數字或範圍輸入的範圍內 ：Outrange 該值超出數字或範圍輸入的範圍 ：禁用 具有禁用屬性的字段 ：啟用 沒有禁用屬性的字段 ：只讀 具有隻讀屬性的字段 ：read-write： 沒有隻讀屬性的字段 ：檢查 檢查的複選框或廣播按鈕 ：不定 不確定的複選框或無線電狀態，例如所有無線電按鈕未選中 :預設 默認提交按鈕或圖像 >您可以使用::佔位符式元素為輸入的佔位符文字設計：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

上面的選擇器具有相同的特異性，因此順序可能很重要。考慮此示例：

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

>無效的輸入具有紅色文本，但僅應用於具有禁用屬性的輸入 - >，因此所有啟用的輸入均為黑色。 >瀏覽器在頁面加載上應用驗證樣式。例如，在以下代碼中，每個無效字段都會有一個紅色邊框：>

用戶在與表單交互之前，用戶面對一組艱鉅的紅色框。在第一次提交或更改值之後顯示驗證錯誤將提供更好的體驗。那就是javaScript介入…

>

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

> JavaScript和約束驗證API

約束驗證API提供表單自定義選項，可以增強標準HTML字段檢查。您可以：

>停止驗證，直到用戶與字段進行交互或提交表單

>

顯示帶有自定義樣式的錯誤消息
提供僅在HTML中不可能的自定義驗證。當您需要比較兩個輸入時，通常需要這是必要的，例如，當您輸入電子郵件地址或電話號碼時，檢查“新”和“確認”密碼字段具有相同的值，或確保一個日期是另一個日期。 >
形式驗證
>在使用API​​之前，您的代碼應通過將表單的Novalidate屬性設置為true（與添加NovAlidate屬性相同）來禁用默認驗證和錯誤消息： 然後，您可以添加事件處理程序，例如表單提交時：>
>處理程序可以使用checkVality（）或reportVality（）方法檢查整個表單是有效的，當所有表單的輸入都是有效時，它們返回true。 （區別在於checkVality（）檢查是否有任何輸入是否受到約束驗證。）

>

Mozilla Docs解釋：

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

在每個無效的字段上也觸發了無效的事件。這不會冒出氣泡：必須將處理程序添加到使用它的每個控件中。

>

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

>現在有效的表格可以產生進一步的驗證檢查。同樣，一個無效的形式可能會突出顯示無效的字段。

>

>字段驗證

單個字段具有以下約束驗證屬性：

>

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

willvalidate：如果元素是約束驗證的候選者，則返回tru

>驗證信息：驗證消息。如果字段有效，這將是一個空字符串。

vality：一個有效性的對象。當字段有效時，這具有有效的屬性集為TRUE。如果是錯誤的，則以下一個或多個屬性將是正確的：
• > >有效性狀態 描述 .badinput 瀏覽器無法理解輸入 .customerror 設置了自定義有效性消息 .patternmismatch 該值與指定的模式屬性不匹配 .rangeoverflow 該值大於最大屬性 .rangeunderflow 該值小於最小屬性 .Stepmismatch 該值不符合步驟屬性規則 .toolong 字符串長度大於最大屬性 。過短 字符串長度小於最小屬性 .typemismatch 該值不是有效的電子郵件或URL .valueMissing 所需的值是空的

單個字段具有以下約束驗證方法：

>
• > setCustomVality（消息）：為無效字段設置錯誤消息。當字段有效或字段將永遠無效時，必須傳遞一個空字符串。 >
> checkVality（）：當輸入有效時，返回true。 valid.valid屬性執行同樣的事情，但是checkVality（）也觸發了現場無效的事件，這可能很有用。
validateForm（）處理程序函數可以在每個字段中循環循環，並在必要時將無效類應用於其父元素：>

假設您的HTML定義了一個電子郵件字段：

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

當未指定電子郵件或無效時，該腳本將無效類應用於
。提交表單時，CSS可以顯示或隱藏驗證消息：
創建自定義表單驗證器
<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>
>以下演示顯示了需要用戶名以及電子郵件地址，電話號碼或兩者兼而有之的示例聯繫表
<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>
看到筆 約束驗證API示例by sitepoint（@sitepoint） 在Codepen上。
>使用名為FormValidate的通用表單驗證類實現。實例化對象時會傳遞表單元素。可以設置可選的第二個參數：
當用戶與之交互時， tay驗證每個字段
false（默認值）在第一個提交之後驗證所有字段（此後發生字段級驗證）
>
>
formvalidate對象監視以下兩個：
• >
  • focusOut事件，然後檢查單個字段
  • 表格提交事件，然後檢查每個字段

  >均調用.ValidateField（field）方法，該方法檢查字段是否通過標準約束驗證。當它這樣做時，分配給該字段的任何自定義驗證功能依次執行。所有人都必須返回正確才能有效。

  >

  >無效的字段將無效的類應用於該字段的父元素，該類別使用CSS顯示紅色幫助消息。

  >最後，當整個表單有效時，對象調用自定義提交功能：>

  或者，您可以使用標準AddeventListener來處理表單提交事件，因為FormValidate會在表單無效時防止進一步的處理程序運行。

  形成技巧

  <span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
  </span>

  表格是所有Web應用程序的基礎，開發人員花費大量時間來操縱用戶輸入。約束驗證得到很好的支持：瀏覽器可以處理大多數檢查並顯示適當的輸入選項。

  >建議：
  在可能的情況下，請使用標準HTML輸入類型。設置最小，最大，步驟，最小值，最大值，模式，必需，輸入模式和自動完成屬性。

  >

  如有必要，請使用一些JavaScript啟用自定義驗證和消息。

  對於更複雜的字段，逐漸增強了標準輸入。

  最後：
  • >忘記Internet Explorer！
  • >
  >除非您的客戶主要是用戶，否則無需實施您自己的後備驗證功能。所有HTML5輸入字段都在IE中工作，但可能需要更多的用戶工作。 （例如，IE不會檢測到您何時輸入無效的電子郵件地址。）您仍然必須驗證服務器上的數據，因此請考慮使用該數據作為IE錯誤檢查的基礎。
  • > HTML表格和約束驗證的常見問題（FAQ）
  >
  html形式驗證的重要性是什麼？它確保用戶輸入表單的數據在發送到服務器之前符合某些標準。這不僅可以維持數據的完整性，還通過提供有關輸入數據的正確性的立即反饋來增強用戶體驗。沒有表單驗證，就有可能會收到不正確，不完整甚至惡意數據的風險，這些數據可能導致各種問題，包括數據損壞，安全漏洞和系統崩潰。

  > HTML5如何改進形式驗證？

  html5引入了幾個新的形式元素和屬性，這些元素和屬性使形式驗證變得更加容易，更有效。例如，它提供了新的輸入類型，例如電子郵件，URL和數字，它們會根據類型自動驗證輸入數據。它還介紹了所需的新屬性，模式和最小/最大屬性，使您可以在輸入數據上指定各種約束。此外，HTML5提供了一個內置驗證API，使您能夠使用JavaScript執行自定義驗證。

  我可以在沒有JavaScript的情況下執行表單驗證嗎？

  是的，您可以使用HTML5執行基本表單驗證獨自的。 HTML5提供了幾種新的輸入類型和屬性，使您可以在輸入數據上指定各種約束。例如，您可以使用所需的屬性來強制執行字段，以執行特定格式的模式屬性以及為數值輸入設置範圍的最小/最大屬性。但是，對於更複雜的驗證，您仍然需要使用JavaScript。錯誤消息。您可以使用有效狀態對象的setCustomVality方法為字段設置自定義錯誤消息。此方法採用一個字符串參數，當字段無效時，該參數將成為字段的驗證消息。您可以響應無效事件調用此方法，該事件是在字段失敗驗證時觸發的。

  >

  >如何禁用html5 form驗證？

  >您可以通過添加添加html5表單驗證來禁用html5 form驗證Novalidate屬性屬於表單元素。當存在此屬性時，瀏覽器將在提交時對錶格進行任何驗證。如果您要在服務器端或使用自定義JavaScript上處理驗證，這可能很有用。
  如何在html5？
  中驗證多個字段，不提供構建 - 在一起驗證多個字段的方法中。但是，您可以使用JavaScript實現此目標。您可以編寫自定義驗證功能，該功能檢查多個字段的值，並在不符合所需標準的情況下設置自定義有效性消息。您可以根據表單的提交事件或字段的輸入/更改事件來調用此功能。
  >如何根據html5？ >

  >如何在html5？

  html5中執行異步驗證。但是，您可以使用JavaScript實現此目標。您可以編寫執行異步操作（例如AJAX請求）的自定義驗證功能，並根據結果設置自定義有效性消息。您可以根據字段的輸入/更改事件或表單的提交事件來調用此功能。

  >

  >如何在HTML5表單驗證中樣式？ HTML5形式驗證中的消息由瀏覽器確定，不能使用CSS直接設計。但是，您可以使用JavaScript創建自定義錯誤消息，並根據需要進行樣式。您可以使用驗證API來確定字段何時無效並相應地顯示自定義錯誤消息。

  >如何測試HTML表單的驗證？

  >您可以測試驗證的驗證通過將各種類型的數據輸入到字段中並試圖提交表格，一種HTML表單。您應該使用有效數據和無效數據進行測試，以確保在所有情況下驗證都能正常工作。您也可以使用自動測試工具或庫來執行更全面的測試。

以上是HTML表單和約束驗證的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！