在 HTML 中設定長度驗證

1. 在 HTML 中使用 pattern 屬性設定長度驗證
2. 使用 minlength 屬性設定 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>