Bagaimana untuk menilai sama ada ia kosong dalam masa nyata dengan javascript

Dalam pembangunan web, borang ialah salah satu komponen penting dalam logik perniagaan, dan pengesahan borang ialah pertimbangan keselamatan asas. Dalam bentuk, pengesahan kotak input adalah yang paling asas dan perlu, dan menilai sama ada kandungan kotak input kosong adalah pengesahan yang paling biasa. Di sini kami akan memperkenalkan kaedah javascript untuk merealisasikan penghakiman masa nyata bahawa ia tidak kosong.

1. Pemantauan masa nyata kotak input
   Untuk mencapai kesan pertimbangan masa nyata bahawa ia tidak kosong, kita perlu memantau kotak input dalam masa nyata melalui javascript. Kita boleh mengemas kini teks dalam kotak input dalam masa nyata dengan mendengar peristiwa oninput input.

<input type="text" id="input" oninput="checkEmpty()">

Dalam kod di atas, acara oninput ditambahkan pada input Apabila peristiwa dicetuskan, fungsi bernama checkEmpty akan dipanggil untuk menentukan sama ada terdapat a nilai dalam input.

2. Sahkan nilai dalam kotak input
   Selepas memantau kotak input dalam masa nyata, kita perlu menulis checkEmpty fungsi untuk menyemak sama ada terdapat nilai dalam kotak input dan menukar kotak input mengikut sama ada terdapat gaya nilai atau maklumat segera.

function checkEmpty() {
  var inputEl = document.getElementById("input");
  if (inputEl.value.trim() == "") {
    inputEl.style.borderColor = "red";
    inputEl.nextElementSibling.innerHTML = "此项不能为空";
  } else {
    inputEl.style.borderColor = "green";
    inputEl.nextElementSibling.innerHTML = "";
  }
}

Dalam kod di atas, kami mula-mula mendapatkan objek DOM kotak input, dan kemudian menukar gaya atau maklumat gesaan kotak input dengan menentukan sama ada nilai kotak input adalah kosong. Apabila kotak input kosong, kami menetapkan warna sempadan kotak input kepada merah, dan menambah mesej gesaan "Item ini tidak boleh kosong" di belakang kotak input apabila kotak input tidak kosong, tetapkan warna sempadan kepada hijau , dan kosongkan maklumat segera.

3. Gunakan fungsi pengesahan pada semua kotak input
   Akhir sekali, kita perlu menggunakan fungsi checkEmpty pada semua kotak input yang memerlukan pengesahan. Dalam pembangunan sebenar, kami sering menandakan kotak input yang perlu disahkan dengan kelas, kemudian gunakan kaedah document.getElementsByClassName() untuk mendapatkan semua kotak input yang ditandakan dengan kelas ini, dan kemudian gelung dan panggil fungsi checkEmpty sekali lagi.

var inputs = document.getElementsByClassName("required");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("input", checkEmpty);
}

Dalam kod di atas, kami mula-mula menggunakan kaedah document.getElementsByClassName("required") untuk mendapatkan semua kotak input yang perlu disahkan, dan kemudian gunakan loop traversal untuk menambah acara oninput untuk semua kotak input Apabila peristiwa dicetuskan, fungsi checkEmpty dilaksanakan untuk pengesahan.

Ringkasan:
Melalui tiga langkah di atas, kami boleh melaksanakan pengesahan mudah berasaskan JavaScript bahawa kotak input tidak kosong dalam masa nyata. Sudah tentu, anda mungkin menghadapi keperluan pengesahan bentuk yang lebih kompleks dalam pembangunan sebenar Anda mungkin ingin menggunakan contoh di atas sebagai asas dan membuat penambahbaikan yang sesuai berdasarkan logik perniagaan.

Atas ialah kandungan terperinci Bagaimana untuk menilai sama ada ia kosong dalam masa nyata dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!