HTML フォームの検証

HTML フォームの検証は、エラーが発生したデータがサーバーに送信されるのを避けるために、HTML フォーム ページのコンテンツを検査するプロセスです。このプロセスは、Web ページまたは Web アプリケーションの品質を簡単に向上させることができるため、HTML ベースの Web アプリケーションを開発する際の重要なステップです。 HTML フォームの検証を実行するには 2 つの方法があり、HTML5 組み込み機能を使用する方法と JavaScript を使用する方法です。

HTML フォームの検証

HTML フォーム検証を実行するには主に 2 つの方法があります。

• HTML5 組み込み機能の使用
• JavaScript の使用

1. HTML5 組み込み機能の使用

HTML5 は、JavaScript を使用せずにフォーム検証のこの機能を提供します。フォーム要素には検証属性が追加され、フォーム検証が自動的に有効になります。検証属性を使用すると、フォーム要素にさまざまな種類のルールを指定できます。これらを使用すると、データの長さを設定したり、データの値に制限を設定したりすることができます。

組み込みのフォーム検証要素を使用した HTML フォーム検証の簡単な例を 1 つ見てみましょう。その後、JavaScript を使用した HTML フォーム検証に進みます。

例

HTML5 検証属性を使用したフォーム検証 – この例では、必須フォーム検証タグを使用します。これにより、そのフィールドのデータの入力が必須になります。そうしないと、フォームは送信されません。以下は、同じコード スニペットと Web フォームのスタイルの一部です。

<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
</style>


<div class="formData">
<form action="#">
Name: <input type="text" name="name" required>
<input type="submit">
</form>
</div>

つまり、「名前」として入力データ フィールドが 1 つだけある、非常に単純な Web フォームがあります。 input タグ要素で必須のキーワードを使用していることに注意してください。

出力:

名前フィールドに値を入力せずにフォームを送信してみましょう。送信すると、「このフィールドに記入してください」というエラー メッセージが表示され、フォームは送信されません。

空のデータを含む出力:

したがって、エラー メッセージは私たちが追加したものではなく、HTML 自体によって提供されていることがわかります。

HTML で提供される required 属性と同様に、使用できるさまざまな form タグがあります。以下はいくつかのフォーム検証タグのリストです。

• minlength: 要素の必要な最小長を設定するために使用されます
• maxlength: 要素の必要な最大長を設定するために使用されます
• パターン: 正規表現の定義に使用されます

2. JavaScript の使用

JavaScript は、検証ルールをカスタマイズおよび設定するためのより多くの方法を提供するため、HTML フォーム検証に広く使用されています。また、HTML5 で提供されているタグの一部は、古いバージョンの Internet Explorer ではサポートされていません。 JavaScript はフォームの検証に長い間使用されています。

JavaScript フォーム検証では、基本的に、データをサーバーに送信する前にデータを検証する関数を定義します。検証ルールを達成するために必要なロジックを実装できます。 JavaScript はルールの定義に制限がないため、この点でより柔軟です。ただし、組み込みタグを使用したフォーム検証と比較して、これを実装するには JavaScript を理解する必要があります。

JavaScript を使用したフォーム検証の例を見てみましょう。 name 要素として入力を 1 つだけ使用して、同じフォームの例を実装します。

例

<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
.errorMessage {
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
}
.errorMessage.top-arrow:after {
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
}
</style>


<div class="formData">
<form name="simpleForm" action="#" onsubmit="return validateForm()">
Name: <input type="text" name="name">
<input type="submit">
</form>
<p class="errorMessage top-arrow"> </p>
</div>
<script>
function validateForm() {
var nameVal = document.forms["simpleForm"]["name"].value;
if(nameVal == null || nameVal == "") {
document.getElementsByClassName( "errorMessage" )[0].style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )[0].innerHTML = "Please Fill out this field";
return false;
} else {
return true;
}
}
</script>

前の例から、フォーム要素「name」から必須のタグを削除しました。代わりに、form 要素に onsubmit タグを 1 つ追加しました。前に述べたように、<script> を使用する検証用の関数を作成します。タグが追加されました。</script>

検証を行う validateForm() という名前の関数を作成しました。名前フィールドに入力されたデータが空白かどうかをチェックする同じルールを実装しています。これをチェックするロジックは、送信ボタンをクリックするとこの関数が呼び出され、入力された値が null か空白かどうかチェックされます。データが null または空白でない場合、関数は true を返しますが、データが空白または null の場合、エラー メッセージがユーザーに表示されます。

出力:

データを何も入力せずにフォームを送信しようとすると、画面にエラー メッセージが表示されるはずです。例からわかるように、可能な限り同じ方法でエラー メッセージを設計しました。

空のデータを含む出力:

結論 - HTML フォームの検証

クライアント側でのフォーム検証の非常に単純な例を見てきました。 HTML フォーム検証を実行するには主に 2 つの方法があります。 1 つ目は HTML5 で提供される組み込み機能を使用する方法で、2 つ目は JavaScript を使用する方法です。最初の方法を使用すると、追加のコードを記述する必要がありません。

以上がHTML フォームの検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。