Comment utiliser JavaScript pour implémenter la vérification différée du contenu de la zone de saisie d'un formulaire ?-js tutoriel-php.cn

Comment utiliser JavaScript pour implémenter la vérification différée du contenu de la zone de saisie d'un formulaire ?

WBOY

Libérer： 2023-10-24 10:31:58

original

1277 Les gens l'ont consulté

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

Comment utiliser JavaScript pour implémenter la fonction de vérification différée du contenu de la zone de saisie du formulaire ?

Avant-propos :
Dans le développement front-end, le formulaire est un composant très courant. L'utilisateur doit saisir le contenu correct dans la zone de saisie pour soumettre le formulaire. Afin d'améliorer l'expérience utilisateur et de réduire les erreurs de saisie, nous pouvons utiliser JavaScript pour implémenter une fonction de vérification retardée, c'est-à-dire pour vérifier si le contenu de la zone de saisie répond aux exigences après un certain temps après que l'utilisateur a saisi le contenu. .

Idée :

Ajoutez un écouteur d'événement oninput à chaque zone de saisie du formulaire.
Utilisez la fonction setTimeout dans l'écouteur d'événements pour retarder l'exécution de la fonction de vérification pendant un certain temps.
Obtenez la valeur de la zone de saisie dans la fonction de vérification, vérifiez-la conformément aux exigences et donnez les informations d'invite correspondantes.

Exemple de code :
Ce qui suit est un exemple de code qui utilise JavaScript pour implémenter une vérification différée du contenu de la zone de saisie du formulaire :

<!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>

Copier après la connexion

Explication :

Dans cet exemple, nous avons ajouté un formulaire simple, comprenant le nom, Il y a trois zones de saisie pour l'e-mail et le mot de passe.
Chaque zone de saisie est liée à un écouteur d'événement oninput Lorsque l'utilisateur saisit du contenu dans la zone de saisie, la fonction de validation validateInput sera appelée.
La logique de la fonction de vérification est la suivante :
- Obtenir la valeur de la zone de saisie actuelle et supprimer les espaces de début et de fin.
- Obtenez l'élément d'invite d'erreur correspondant.
- Effacez le message d'erreur.
- Utilisez la fonction setTimeout pour retarder l'exécution de la logique de vérification de 500 millisecondes.
- Effectuez différentes vérifications en fonction de la valeur d'identification de la zone de saisie. Si les conditions ne sont pas remplies, les informations d'invite correspondantes seront affichées dans l'élément d'invite d'erreur.

Conclusion :
En utilisant JavaScript pour implémenter la fonction de vérification différée du contenu de la zone de saisie du formulaire, le contenu de la zone de saisie peut être vérifié dans un certain laps de temps après que l'utilisateur a saisi le contenu, et les informations d'invite correspondantes peut être donné. Cela améliore l'expérience utilisateur et réduit les erreurs de saisie. L'exemple de code ci-dessus fournit une implémentation simple que vous pouvez étendre et modifier en fonction de vos besoins spécifiques. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!