検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML フォームの検証

HTML フォームの検証

WBOY
WBOYオリジナル
2024-09-04 16:44:321301ブラウズ

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 フォームのスタイルの一部です。

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "formData" >
<form action = "#" >
Name: <input type = "text" name = "name" required>
<input type = "submit" >
</form>
</div>
</body>
</html>

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

出力:

HTML フォームの検証

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

空のデータを含む出力:

HTML フォームの検証

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

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

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

2. JavaScript の使用

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

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

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

例

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>

前の例から、フォーム要素「name」から必須のタグを削除しました。代わりに、form 要素に onsubmit タグを 1 つ追加しました。前に述べたように、