Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan tertunda kandungan kotak input borang?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan tertunda kandungan kotak input borang?

WBOY

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

asal

1309 orang telah melayarinya

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

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi pengesahan tertunda kandungan kotak input borang?

Kata Pengantar:
Dalam pembangunan bahagian hadapan, borang adalah komponen yang sangat biasa Pengguna mesti memasukkan kandungan yang betul dalam kotak input untuk menyerahkan borang. Untuk meningkatkan pengalaman pengguna dan mengurangkan ralat input, kami boleh menggunakan JavaScript untuk melaksanakan fungsi pengesahan tertunda, iaitu, untuk mengesahkan sama ada kandungan dalam kotak input memenuhi keperluan selepas tempoh masa tertentu selepas pengguna memasukkan kandungan .

Idea:

Tambahkan pendengar acara oninput pada setiap kotak input borang.
Gunakan fungsi setTimeout dalam pendengar acara untuk menangguhkan pelaksanaan fungsi pengesahan untuk satu tempoh masa.
Dapatkan nilai kotak input dalam fungsi pengesahan, sahkan mengikut keperluan, dan berikan maklumat segera yang sepadan.

Sampel kod:
Berikut ialah contoh kod yang menggunakan JavaScript untuk melaksanakan pengesahan tertunda kandungan kotak input borang:

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

Salin selepas log masuk

Penjelasan:

Dalam contoh ini, kami menambah borang ringkas, termasuk nama, Terdapat tiga kotak input untuk e-mel dan kata laluan.
Setiap kotak input terikat kepada pendengar acara oninput Apabila pengguna memasukkan kandungan dalam kotak input, fungsi pengesahan validateInput akan dipanggil.
Logik fungsi pengesahan ialah:
- Dapatkan nilai kotak input semasa dan keluarkan ruang hadapan dan belakang.
- Dapatkan elemen gesaan ralat yang sepadan.
- Kosongkan mesej ralat.
- Gunakan fungsi setTimeout untuk menangguhkan pelaksanaan logik pengesahan sebanyak 500 milisaat.
- Lakukan pengesahan berbeza berdasarkan nilai id kotak input. Jika keperluan tidak dipenuhi, maklumat gesaan yang sepadan akan dipaparkan dalam elemen gesaan ralat.

Kesimpulan:
Dengan menggunakan JavaScript untuk melaksanakan fungsi pengesahan tertunda kandungan kotak input borang, kandungan dalam kotak input boleh disahkan dalam tempoh masa tertentu selepas pengguna memasukkan kandungan, dan yang sepadan maklumat segera boleh diberikan. Ini meningkatkan pengalaman pengguna dan mengurangkan ralat input. Kod contoh di atas menyediakan pelaksanaan mudah yang boleh anda lanjutkan dan ubah suai mengikut keperluan khusus anda. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan tertunda kandungan kotak input borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!