在 HTML 中設定長度驗證
本文將介紹兩種在 HTML 表單中設定長度驗證的方法。此外,我們將討論最小和最大長度驗證。
在 HTML 中使用 pattern
屬性設定長度驗證
pattern
屬性在 HTML 的 input
標籤中定義了一個正規表示式。它將檢查表單中的輸入值並執行驗證。
我們可以將正規表示式指定為 pattern
屬性的值。我們可以將 pattern
屬性與輸入型別一起使用,例如文字、電子郵件、密碼、電話、URL、日期和搜尋。
我們還可以使用 input
標籤中的 title
屬性來理解驗證規則。我們可以指定最小和最大長度的正規表示式模式。
例如,建立一個表單並在其中編寫一個帶有 type
密碼的 input
標籤。
接下來,使用 pattern
屬性編寫正規表示式模式 .{8,}
。然後,在 title
屬性中寫入文字 minimum eight characters needed
。
最後,在標籤中寫入 required
屬性,並建立一個提交按鈕。
在這裡,我們建立了一個正規表示式,其中輸入的最小長度為 8。當我們嘗試提交長度少於八個字元的表單時,該表單將不會被提交。
title
屬性中的訊息將在這種情況下顯示。.
在正規表示式中表示除新行以外的任何字元。我們可以在逗號後新增另一個數字來設定最大長度。
required
屬性將阻止在未提供任何值時提交表單。因此,我們可以使用 pattern
屬性在 HTML 中設定長度驗證。
示例程式碼:
<form action="#">
Password<input type="password" pattern=".{8,}" title="minimum eight characters needed" required>
<input type="submit">
</form>
使用 minlength
屬性設定 HTML 中的最小長度驗證
HTML 提供了一個名為 minlength
的屬性,用於在 input
欄位中設定最小長度驗證。它適用於所有輸入型別,就像 pattern
屬性一樣。
例如,建立一個表單,然後建立一個用於輸入密碼的輸入欄位。然後,在 input
標籤中寫入 minlength
屬性,將該屬性的值設定為 8
,最後,建立一個提交按鈕。
此處,長度驗證的工作方式與第一種方法相同。當我們輸入的值少於八個字元時,將不會提交表單。
我們還可以使用 maxlength
屬性來設定最大長度。因此,我們可以使用 minlength
屬性來設定 HTML 中的最小長度驗證。
示例程式碼:
<form action="#">
Password
<input type="password" minlength="8">
<input type="submit">
</form>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn