JavaScript フォーム

JavaScript フォーム検証

HTML フォーム検証は JavaScript で実行できます。

フォームフィールド（fname）が空の場合、この関数はメッセージを表示し、false を返してフォームの提出を防ぎます：

JavaScript インスタンス

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

フォームを提出するときにこの関数を呼び出すことができます：

HTML フォームの例

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

自分で試してみてください

JavaScript は数値入力を検証できます

JavaScript は通常、数値入力の検証に使用されます：

1 から 10 までの数字を入力してください：

自分で試してみてください

自動 HTML フォーム検証

HTML フォーム検証はブラウザによって自動的に実行できます：

フォームフィールド（fname）が空の場合、 required 属性はこのフォームの提出を阻止します：

HTML フォームの例

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

自分で試してみてください

ヒント：自動 HTML フォーム検証は、Internet Explorer 9 またはそれ以前のバージョンでは動作しません。

データ検証

データ検証は、ユーザー入力がきれい、正確、そして有用であることを確保するプロセスです。

典型的な検証タスクは：

  • ユーザーが全ての必須フィールドを入力したかどうか？
  • ユーザーが有効な日付を入力したかどうか？
  • ユーザーが数値フィールドにテキストを入力したかどうか？

大多数の場合、データ検証の目的はユーザー入力の正確性を確保することです。

検証は多くの異なる方法で定義され、多くの異なる方法で展開できます。

サーバー側の検証は、入力がサーバーに送信された後に Web サーバーによって実行されます。

入力を Web サーバーに送信する前に、クライアントの検証は Web ブラウザによって行われます。

HTML 約束検証

HTML5 は新しい HTML 規約検証の概念、即ち制約検証を導入しました。

HTML 緊張検証は以下に基づいています：

  • 制約検証 HTML input 属性
  • 制約検証 CSS 仮選択子
  • 制約検証 DOM 属性とメソッド

制約検証 HTML input 属性

属性 説明
disabled input 要素を無効にします。
max input 要素の最大値を指定します。
min input 要素の最小値を指定します。
pattern input 要素の値のパターンを指定します。
required input フィールドが必須であることを指定します。
type input 要素のタイプを指定します。

完全なリストが必要な場合は、以下を訪問してください HTML インプット 属性。

制約検証 CSS 仮選択子

選択子 説明
:disabled "disabled" 属性が指定された input 要素を選択します。
:invalid 無効な値を持つ input 要素を選択します。
:optional "required" 属性が指定されていない input 要素を選択します。
:required "required" 属性が指定された input 要素を選択します。
:valid 有効な値を持つ input 要素を選択します。

完全なリストが必要な場合は、以下を訪問してください CSS 仮選択子。