JavaScript を使用してフォームの入力ボックスの内容の遅延検証を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-10-24 10:31:58

オリジナル

1283 人が閲覧しました

如何使用 JavaScript 实现表单的输入框内容延时校验功能？

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

前書き:
フロントエンド開発では、フォームは非常に一般的なコンポーネントであり、ユーザーはフォームを送信するために入力ボックスに正しい内容を入力する必要があります。ユーザーエクスペリエンスを向上させ、入力エラーを減らすために、JavaScriptを使用して遅延検証機能を実装できます。つまり、ユーザーがコンテンツを入力してから一定時間後に入力ボックスのコンテンツが要件を満たしているかどうかを検証します。。

アイデア:

oninput イベントリスナーをフォームの各入力ボックスに追加します。
イベントリスナーで setTimeout 関数を使用して、検証関数の実行を一定期間遅延させます。
検証関数の入力ボックスの値を取得し、要件に従って検証し、対応するプロンプト情報を提供します。

コード例:
次は、JavaScript を使用してフォーム入力ボックスの内容の遅延検証機能を実装するサンプルコードです:

<!DOCTYPE html>
<html>
<head>
  <title>表单输入框内容延时校验</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" oninput="validateInput(this)">
    <span id="name-error" class="error"></span>
    <br><br>
  
    <label for="email">邮箱：</label>
    <input type="email" id="email" oninput="validateInput(this)">
    <span id="email-error" class="error"></span>
    <br><br>
  
    <label for="password">密码：</label>
    <input type="password" id="password" oninput="validateInput(this)">
    <span id="password-error" class="error"></span>
    <br><br>
  
    <input type="submit" value="提交">
  </form>

  <script>
    // 校验输入框内容的函数
    function validateInput(input) {
      // 获取当前输入框的值
      var value = input.value.trim();

      // 获取对应的错误提示元素
      var errorElement = document.getElementById(input.id + "-error");

      // 清空错误提示
      errorElement.textContent = "";

      // 延时校验，500毫秒后执行
      setTimeout(function() {
        // 校验姓名
        if (input.id === "name") {
          if (value === "") {
            errorElement.textContent = "请输入姓名";
          } else if (value.length < 2 || value.length > 20) {
            errorElement.textContent = "姓名长度必须为2-20个字符";
          }
        }

        // 校验邮箱
        if (input.id === "email") {
          if (value === "") {
            errorElement.textContent = "请输入邮箱";
          } else if (!/^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/.test(value)) {
            errorElement.textContent = "请输入正确的邮箱格式";
          }
        }

        // 校验密码
        if (input.id === "password") {
          if (value === "") {
            errorElement.textContent = "请输入密码";
          } else if (value.length < 6 || value.length > 20) {
            errorElement.textContent = "密码长度必须为6-20个字符";
          }
        }
      }, 500);
    }
  </script>
</body>
</html>

ログイン後にコピー

説明:

この例では、名前、電子メール、パスワードの 3 つの入力ボックスを含む単純なフォームを追加しました。
各入力ボックスは oninput イベントリスナーにバインドされており、ユーザーが入力ボックスに内容を入力すると、検証関数 validateInput が呼び出されます。
検証関数のロジックは次のとおりです:
- 現在の入力ボックスの値を取得し、先頭と末尾のスペースを削除します。
- 対応するエラープロンプト要素を取得します。
- エラーメッセージを消去します。
- setTimeout 関数を使用して、検証ロジックの実行を 500 ミリ秒遅らせます。
- 入力ボックスの ID 値に基づいて、さまざまな検証を実行します。要件が満たされていない場合は、対応するプロンプト情報がエラープロンプト要素に表示されます。

結論:
JavaScriptを使用してフォーム入力ボックスの内容の遅延検証機能を実装することで、入力ボックスの内容を一定期間内に確認することができます。ユーザーがコンテンツを入力してから時間が経過し、対応するプロンプト情報を確認して提供します。これにより、ユーザーエクスペリエンスが向上し、入力エラーが減少します。上記のコード例は、特定のニーズに応じて拡張および変更できる単純な実装を提供します。この記事がお役に立てば幸いです!

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