How to use JavaScript to implement delayed verification of the input box content of a form?-JS Tutorial-php.cn

How to use JavaScript to implement delayed verification of the input box content of a form?

WBOY

Release： 2023-10-24 10:31:58

Original

1264 people have browsed it

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

How to use JavaScript to implement the delayed verification function of the input box content of the form?

Foreword:
In front-end development, the form is a very common component. The user must enter the correct content in the input box to submit the form. In order to improve the user experience and reduce input errors, we can use JavaScript to implement a delayed verification function, that is, to verify whether the content in the input box meets the requirements after a certain period of time after the user inputs the content.

Idea:

Add an oninput event listener to each input box of the form.
Use the setTimeout function in the event listener to delay the execution of the verification function for a period of time.
Get the value of the input box in the verification function, verify it according to the requirements, and give the corresponding prompt information.

Code example:
The following is a sample code that uses JavaScript to implement the delayed verification function of the content of the form input box:

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

Copy after login

Explanation:

In this example, we added a simple form, including three input boxes for name, email and password.
Each input box is bound to an oninput event listener. When the user enters content in the input box, the verification function validateInput will be called.
The logic of the verification function is:
- Get the value of the current input box and remove the leading and trailing spaces.
- Get the corresponding error prompt element.
- Clear the error message.
- Use the setTimeout function to delay 500 milliseconds to execute the verification logic.
- Perform different verifications based on the id value of the input box. If the requirements are not met, the corresponding prompt information will be displayed in the error prompt element.

Conclusion:
By using JavaScript to implement the delayed verification function of the form input box content, the content in the input box can be checked within a certain period of time after the user inputs the content. Verify and give corresponding prompt information. This improves user experience and reduces input errors. The above example code provides a simple implementation that you can extend and modify according to your specific needs. Hope this article helps you!

The above is the detailed content of How to use JavaScript to implement delayed verification of the input box content of a form?. For more information, please follow other related articles on the PHP Chinese website!