在 HTML 中設定長度驗證

Subodh Poudel 2023年2月19日 2022年1月2日
  1. 在 HTML 中使用 pattern 屬性設定長度驗證
  2. 使用 minlength 屬性設定 HTML 中的最小長度驗證
在 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 Poudel avatar Subodh Poudel avatar

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