Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang?

PHPz
PHPzasal
2023-10-18 08:47:041085semak imbas

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

Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang?

Dalam banyak aplikasi web, borang ialah kaedah interaksi yang paling biasa digunakan antara pengguna dan sistem. Walau bagaimanapun, kandungan yang dimasukkan oleh pengguna selalunya perlu disahkan untuk memastikan ketepatan dan kesempurnaan data. Dalam artikel ini, kita akan mempelajari cara menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang dan memberikan contoh kod khusus.

  1. Buat borang
    Pertama, kita perlu mencipta borang ringkas dalam HTML untuk menunjukkan fungsi pengesahan masa nyata. Berikut ialah contoh borang yang mengandungi nama pengguna, kata laluan dan e-mel:
<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" required>
  <br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" required>
  <br>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" required>
</form>
  1. Pilih kotak input dan tambahkan acara pengesahan
    Seterusnya, kami menggunakan JavaScript untuk memilih Kotak input ini dan menambah peristiwa pengesahan masa nyata padanya. Dengan mendengar peristiwa input atau peristiwa kehilangan fokus, kami boleh menyemak perkara yang dimasukkan pengguna dalam masa nyata.
// 选择输入框
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const emailInput = document.getElementById('email');

// 添加校验事件
usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
emailInput.addEventListener('input', validateEmail);
  1. Menulis fungsi pengesahan
    Seterusnya, kita perlu menulis fungsi pengesahan untuk menyemak kandungan kotak input. Bergantung pada peraturan pengesahan tertentu, kami boleh menggunakan ungkapan biasa atau kaedah lain untuk mengesahkan input pengguna.
function validateUsername() {
  const regex = /^[a-zA-Z0-9_-]{3,16}$/;
  const value = usernameInput.value;

  if (regex.test(value)) {
    // 校验通过
    usernameInput.classList.remove('invalid');
    usernameInput.classList.add('valid');
  } else {
    // 校验失败
    usernameInput.classList.remove('valid');
    usernameInput.classList.add('invalid');
  }
}

function validatePassword() {
  const regex = /^[a-zA-Z0-9!@#$%^&*]{6,16}$/;
  const value = passwordInput.value;

  if (regex.test(value)) {
    // 校验通过
    passwordInput.classList.remove('invalid');
    passwordInput.classList.add('valid');
  } else {
    // 校验失败
    passwordInput.classList.remove('valid');
    passwordInput.classList.add('invalid');
  }
}

function validateEmail() {
  const regex = /^[^s@]+@[^s@]+.[^s@]+$/;
  const value = emailInput.value;

  if (regex.test(value)) {
    // 校验通过
    emailInput.classList.remove('invalid');
    emailInput.classList.add('valid');
  } else {
    // 校验失败
    emailInput.classList.remove('valid');
    emailInput.classList.add('invalid');
  }
}
  1. Hasil pengesahan digayakan
    Akhir sekali, kami boleh menentukan gaya lulus pengesahan dan kegagalan pengesahan dalam fail CSS supaya pengguna dapat melihat status secara intuitif kotak input.
.valid {
  border: 1px solid green;
}

.invalid {
  border: 1px solid red;
}

Pada ketika ini, kami telah menyelesaikan langkah-langkah menggunakan JavaScript untuk melaksanakan fungsi pengesahan masa nyata kandungan kotak input borang. Apabila pengguna memasukkan dalam kotak input, kami menggunakan fungsi pengesahan untuk menyemak kandungan input dan mengemas kini gaya kotak input berdasarkan hasil pengesahan. Ini memberikan pengguna maklum balas segera yang membantu mereka mencari ralat dan membetulkannya dengan lebih cepat.

Ringkasan
Dalam artikel ini, kami mempelajari cara menggunakan JavaScript untuk melaksanakan pengesahan masa nyata kandungan kotak input borang. Dengan memilih kotak input, menambahkan peristiwa pengesahan, menulis fungsi pengesahan dan menggayakan hasil pengesahan, kami boleh menyediakan pengguna kaedah maklum balas segera untuk membantu mereka melaksanakan input borang dengan lebih baik. Ini adalah petua mudah dan praktikal yang boleh meningkatkan pengalaman pengguna dan kualiti data, dan mengurangkan kesan operasi yang salah.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn