JavaScriptのフォーム検証
HTMLフォームの検証には、JavaScriptによって行うことができます。
フォームフィールド（fnameの）が空の場合、この関数は、メッセージを警告し、提出さからフォームを防止するために、falseを返します。
JavaScriptの例
function validateForm() {
var
x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}フォームが送信されたときに関数を呼び出すことができます。
HTMLフォームの例
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form> »それを自分で試してみてください HTMLフォームのバリデーション
HTMLフォームの検証は、ブラウザによって自動的に実行することができます。
フォームフィールド場合(fname)空で、 required属性が提出されることから、このフォームを防ぎます。
HTMLフォームの例
<form action="demo_form.asp" method="post">
<input type="text" name="fname" required >
<input type="submit" value="Submit">
</form> »それを自分で試してみてください 自動HTMLフォームの検証は、Internet Explorer 9またはそれ以前のバージョンでは動作しません。
データ検証
データ検証は、コンピュータ入力は、清潔正しい、かつ有用であることを保証するプロセスです。
典型的な検証作業は、次のとおりです。
- ユーザーは、すべての必須フィールドに入力していますか？
- ユーザーが有効な日付を入力しましたか？
- ユーザーが数値フィールドにテキストを入力しましたか？
ほとんどの場合、データ検証の目的は、コンピュータアプリケーションへの正しい入力を確保することです。
検証は、多くの異なる方法で定義され、多くの異なる方法で展開することができます。
入力がサーバに送信された後、サーバ側の検証は 、ウェブサーバによって実行されます。
入力は、ウェブサーバーに送信される前に、 クライアント側の検証は 、ウェブブラウザによって行われます。
HTML制約の検証
HTML5は、 制約の検証と呼ばれる新しいHTMLの検証概念を導入しました。
HTML制約検証はに基づいています。
- 制約バリデーションHTML 入力属性
- 制約バリデーションCSS擬似セレクター
- 制約バリデーションDOMプロパティとメソッド
制約バリデーションHTML入力属性
| 属性 | 説明 |
|---|---|
| disabled | 入力要素を無効にすることを指定します |
| max | 入力要素の最大値を指定します |
| min | 入力要素の最小値を指定します |
| pattern | 入力要素の値のパターンを指定 |
| required | 入力フィールドは、要素が必要であることを指定 |
| type | input要素のタイプを指定します |
完全なリストについては、に行くHTML入力属性 。
制約の検証CSS擬似セレクター
| セレクタ | 説明 |
|---|---|
| :disabled | 指定された「無効」属性で入力要素を選択します |
| :invalid | 無効な値を持つ入力要素を選択します |
| :optional | 指定されていない「必要」属性で入力要素を選択します |
| :required | 指定された「必要」属性で入力要素を選択します |
| :valid | 有効な値を持つ入力要素を選択します |
完全なリストについては、になったCSS疑似クラス 。