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?

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>

2. 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);

3. 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');
  }
}

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