HTML で長さの検証を設定する

1. HTML で pattern 属性を使用して長さの検証を設定する
2. HTML で minlength 属性を使用して最小長の検証を設定する

この記事では、HTML フォームで長さの検証を設定する 2つの方法を紹介します。さらに、最小長と最大長の検証についても説明します。

HTML で pattern 属性を使用して長さの検証を設定する

pattern 属性は、HTML の input タグで正規表現を定義します。フォームの入力値と照合し、検証を実行します。

pattern 属性の値として正規表現を指定できます。pattern 属性は、テキスト、電子メール、パスワード、電話番号、URL、日付、検索などの入力タイプで使用できます。

input タグの title 属性を使用して、検証ルールを理解することもできます。最小長と最大長の正規表現パターンを指定できます。

たとえば、フォームを作成し、その中に type パスワードを含む input タグを書き込みます。

次に、pattern 属性を使用して正規表現パターン .{8,} を記述します。次に、title 属性に最低 8 文字必要というテキストを入力します。

最後に、タグに required 属性を書き込み、送信ボタンを作成します。

ここでは、入力の最小長が 8 である正規表現を作成しました。8 文字未満の長さのフォームを送信しようとすると、フォームは送信されません。

title 属性のメッセージは、このような状態で表示されます。正規表現の . は改行以外の任意の文字を表します。カンマの後に別の数字を追加して、最大長を設定できます。

required 属性は、値が提供されていない場合にフォームが送信されないようにします。したがって、pattern 属性を使用して HTML で長さの検証を設定できます。

サンプルコード：

<form action="#">
    Password<input type="password" pattern=".{8,}" title="minimum eight characters needed" required>
    <input type="submit">
</form>

HTML で minlength 属性を使用して最小長の検証を設定する

HTML は、input フィールドに最小長の検証を設定するための minlength と呼ばれる属性を提供します。pattern 属性と同様に、すべての入力タイプで機能します。

たとえば、フォームを作成してから、パスワードの入力フィールドを作成します。次に、input タグに minlength 属性を書き込み、属性の値を 8 に設定し、最後に送信ボタンを作成します。

ここで、長さの検証は最初の方法と同じように機能します。8 文字未満の値を入力すると、フォームは送信されません。

maxlength プロパティを使用して最大長を設定することもできます。したがって、minlength 属性を使用して、HTML で最小長の検証を設定できます。

サンプルコード：

<form action="#">
    Password
    <input type="password" minlength="8">
    <input type="submit">
</form>