JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装するにはどうすればよいですか?

JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装するにはどうすればよいですか?

多くの Web アプリケーションでは、フォームがユーザーとシステムの間で最も一般的に使用される対話方法です。ただし、データの正確性と完全性を保証するために、ユーザーが入力したコンテンツを検証する必要があることがよくあります。この記事では、JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装する方法を学び、具体的なコード例を示します。

1. フォームの作成
   まず、リアルタイム検証機能をデモンストレーションするために、HTML で単純なフォームを作成する必要があります。以下は、ユーザー名、パスワード、電子メール アドレスを含むフォームの例です。

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" required>
  <br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" required>
  <br>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" required>
</form>

2. 入力ボックスを選択し、検証イベントを追加します
   次に、JavaScript を使用してこれらの入力ボックスを選択し、リアルタイム検証イベントをそれらに追加します。入力イベントやフォーカス喪失イベントをリッスンすることで、ユーザーが何を入力したかをリアルタイムで確認できます。

// 选择输入框
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const emailInput = document.getElementById('email');

// 添加校验事件
usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
emailInput.addEventListener('input', validateEmail);

3. 検証関数の作成
   次に、入力ボックスの内容をチェックする検証関数を記述する必要があります。特定の検証ルールに応じて、正規表現またはその他の方法を使用してユーザー入力を検証できます。

function validateUsername() {
  const regex = /^[a-zA-Z0-9_-]{3,16}$/;
  const value = usernameInput.value;

  if (regex.test(value)) {
    // 校验通过
    usernameInput.classList.remove('invalid');
    usernameInput.classList.add('valid');
  } else {
    // 校验失败
    usernameInput.classList.remove('valid');
    usernameInput.classList.add('invalid');
  }
}

function validatePassword() {
  const regex = /^[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  const value = passwordInput.value;

  if (regex.test(value)) {
    // 校验通过
    passwordInput.classList.remove('invalid');
    passwordInput.classList.add('valid');
  } else {
    // 校验失败
    passwordInput.classList.remove('valid');
    passwordInput.classList.add('invalid');
  }
}

function validateEmail() {
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  const value = emailInput.value;

  if (regex.test(value)) {
    // 校验通过
    emailInput.classList.remove('invalid');
    emailInput.classList.add('valid');
  } else {
    // 校验失败
    emailInput.classList.remove('valid');
    emailInput.classList.add('invalid');
  }
}

4. スタイル化された検証結果
   最後に、ユーザーが入力ボックスの状態を直観的に確認できるように、CSS ファイルで検証合格と検証失敗のスタイルを定義できます。

.valid {
  border: 1px solid green;
}

.invalid {
  border: 1px solid red;
}

ここまでで、JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証機能を実装する手順が完了しました。ユーザーが入力ボックスに入力を行う際、バリデーション機能を利用して入力内容をチェックし、バリデーション結果に基づいて入力ボックスのスタイルを更新します。これにより、ユーザーは即時フィードバックを得ることができ、エラーを見つけてより迅速に修正できるようになります。

概要
この記事では、JavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装する方法を学習しました。入力ボックスを選択し、検証イベントを追加し、検証関数を記述し、検証結果をスタイル設定することにより、フォーム入力をより適切に実行できるようにする即時フィードバック方法をユーザーに提供できます。これは、ユーザー エクスペリエンスとデータの品質を向上させ、誤った操作による影響を軽減できる、シンプルで実用的なヒントです。

以上がJavaScript を使用してフォームの入力ボックスの内容のリアルタイム検証を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。