>  기사  >  웹 프론트엔드  >  JavaScript를 사용하여 양식의 입력 상자 내용에 대한 지연된 확인을 구현하는 방법은 무엇입니까?

JavaScript를 사용하여 양식의 입력 상자 내용에 대한 지연된 확인을 구현하는 방법은 무엇입니까?

WBOY
WBOY원래의
2023-10-24 10:31:581275검색

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

JavaScript를 사용하여 양식의 입력 상자 내용에 대한 지연 확인 기능을 구현하는 방법은 무엇입니까?

머리말:
프런트 엔드 개발에서 양식은 매우 일반적인 구성 요소입니다. 사용자는 양식을 제출하려면 입력 상자에 올바른 내용을 입력해야 합니다. 사용자 경험을 개선하고 입력 오류를 줄이기 위해 JavaScript를 사용하여 지연 확인 기능을 구현할 수 있습니다. 즉, 사용자가 콘텐츠를 입력한 후 일정 시간이 지나면 입력 상자의 콘텐츠가 요구 사항을 충족하는지 확인합니다. .

아이디어:

  1. 양식의 각 입력 상자에 oninput 이벤트 리스너를 추가하세요.
  2. 이벤트 리스너의 setTimeout 함수를 사용하면 일정 시간 동안 검증 함수의 실행을 지연시킬 수 있습니다.
  3. 검증 기능에서 입력 상자의 값을 가져오고 요구 사항에 따라 검증한 후 해당 프롬프트 정보를 제공합니다.

코드 샘플:
다음은 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 이벤트 리스너에 바인딩되어 있습니다. 사용자가 입력 상자에 콘텐츠를 입력하면 유효성 검사 함수인 verifyInput이 호출됩니다.
  • 검증 기능의 논리는 다음과 같습니다.

    • 현재 입력 상자의 값을 가져오고 선행 및 후행 공백을 제거합니다.
    • 해당 오류 프롬프트 요소를 가져옵니다.
    • 오류 메시지를 지웁니다.
    • 검증 로직의 실행을 500밀리초 지연하려면 setTimeout 함수를 사용하세요.
    • 입력 상자의 ID 값에 따라 다양한 검증을 수행합니다. 요구 사항이 충족되지 않으면 해당 프롬프트 정보가 오류 프롬프트 요소에 표시됩니다.

결론:
JavaScript를 사용하여 양식 입력 상자 내용의 지연 확인 기능을 구현하면 사용자가 내용을 입력한 후 일정 시간 내에 입력 상자의 내용과 해당 프롬프트 정보를 확인할 수 있습니다. 주어질 수 있습니다. 이를 통해 사용자 경험이 향상되고 입력 오류가 줄어듭니다. 위의 예제 코드는 특정 요구 사항에 따라 확장하고 수정할 수 있는 간단한 구현을 제공합니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 JavaScript를 사용하여 양식의 입력 상자 내용에 대한 지연된 확인을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.