JavaScriptでフォームを設定する方法

Web テクノロジの発展とその応用シナリオがますます増えるにつれ、フォームは Web 開発に不可欠な要素の 1 つになりました。フォームを使用すると、ユーザーが入力したデータを収集できます。これは多くの Web アプリケーションにとって非常に重要です。ユーザーがフォームに記入して送信すると、このデータを処理する必要があります。この場合、JavaScript が重要な役割を果たします。

この記事では、JavaScript を使用してフォームを設定する方法について説明し、いくつかの一般的なヒントとテクニックを検討します。

基本的なフォーム

まず、基本的な HTML フォームを見てみましょう。以下は、単純なフォームの HTML コードです。

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" required><br><br>

  <input type="submit" value="提交">
</form>

上記のフォームには、名前、電子メール アドレス、年齢という 3 つの必須フィールドと、送信ボタンが含まれています。いずれかの項目が入力されていない場合は、プロンプト ボックスがポップアップ表示され、ユーザーに項目の入力を求めます。

フォーム値の設定

JavaScript を使用したフォームの値の設定は、次の方法で行うことができます:

document.getElementById("name").value = "John";

上記のコードは、「John」をデフォルト値として設定します。名前のために。次の方法でフォームに値を動的に設定することもできます。

document.getElementById("name").value = userName;

この場合、「userName」は、データベースや他の Web サービスからなど、他の方法で値を取得できる変数です。

フォームの値を取得する

次のコードを通じてフォームの値を取得できます:

let nameValue = document.getElementById("name").value;
let emailValue = document.getElementById("email").value;
let ageValue = document.getElementById("age").value;

ここでは、フォーム内の値が 3 つの変数に格納されています。フォームデータを加工する際に便利に利用できます。

フォーム検証

フォーム検証は、悪意のあるユーザーからの攻撃から Web サイトを保護し、フォーム データの有効性と正確性を保証する重要な部分です。

次に、一般的なフォーム検証手法の一部を示します。

1. 必須フィールドの検証: フォームでは、必須フィールドに必須の検証が必要になることがよくあります。たとえば、上の例では、名前、電子メール、年齢はすべて必須フィールドです。ユーザーが必須フィールドに入力したことを確認するために、「required」属性を使用します。ユーザーが必須フィールドに入力せずにフォームを送信すると、ブラウザーは送信が失敗する前にユーザーに警告を出します。
2. 電子メールの検証: 多くの Web アプリケーションでは、ユーザーが入力した電子メール アドレスが有効であることを確認する必要があります。電子メール アドレスを検証するには、正規表現を使用します。

電子メール アドレスを検証する JavaScript の例を次に示します。

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email);
}

上記のコードでは、電子メール アドレスの形式を検証する単純な正規表現を使用しました。

3. フォーム送信: フォームが送信リクエストを受け取ると、フォーム データを検証する必要があります。これは、送信ボタンに「onsubmit」イベントを設定することで実現できます。

以下は、検証関数をフォーム送信イベントに関連付ける JavaScript コードです:

document.getElementById("myForm").onsubmit = function() {
  if (!validateForm()) {
    return false;
  }
};

上記のコードは、フォームが送信される前に検証します。検証が失敗した場合、フォームは送信されません。

4. プロンプト メッセージ: フォーム内のデータが無効な場合、通常は問題に関するプロンプト メッセージをユーザーに表示する必要があります。これは、フォームに要素を追加することによって実現できます。たとえば、「errorText」という
   要素を追加します。

   これは、フォーム検証が失敗したときにユーザーにエラー メッセージを表示する JavaScript コードです:

   function showErrorMessage(field, message) {
     var errorText = document.createElement("div");
     errorText.className = "error";
     errorText.innerHTML = message;
     field.parentNode.insertBefore(errorText, field.nextSibling);
   }

   上記のコードでは、JavaScript を使用して というファイルを作成しました。 "errorText" の

   要素を削除し、失敗したフォーム フィールドの次の兄弟要素の前に挿入します。

   概要

   この記事では、フォームを設定する際の JavaScript の機能を簡単に紹介し、いくつかの一般的なフォーム検証手法を提案し、フォーム送信前にプロンプ​​トを検証して公開する方法について説明しました。これらのテクノロジーを使用すると、フォーム アプリケーションでより高度な対話とデータ処理を実装し、ユーザー入力データのセキュリティと有効性を確保できます。

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