Borang JavaScript kosong dan tidak boleh diserahkan

Dengan perkembangan Internet, borang web telah menjadi kaedah komunikasi rangkaian yang penting Ia bukan sahaja digunakan untuk log masuk laman web, pendaftaran, mesej dan fungsi lain, tetapi juga digunakan secara meluas dalam pelbagai transaksi dalam talian, tinjauan dan maklum balas. . Untuk memastikan ketepatan dan kesempurnaan data, adalah amat penting untuk mengesahkan kesahihan borang tersebut. Artikel ini menerangkan terutamanya cara menggunakan JavaScript untuk melaksanakan fungsi yang borang itu tidak boleh diserahkan jika ia kosong.

1. Latar belakang bahawa borang tidak boleh diserahkan jika ia kosong

Data borang ialah pembawa data utama untuk komunikasi antara tapak web dan pengguna Ketepatan dan kesahihan datanya adalah berkaitan secara langsung kepada keselamatan tapak web dan fungsi perniagaan yang sepatutnya. Oleh itu, pengesahan borang adalah salah satu keperluan keselamatan paling asas dalam pembangunan laman web. Pengesahan borang pada asasnya boleh dibahagikan kepada dua kaedah: pengesahan bahagian pelayan dan pengesahan pihak pelanggan.

Pengesahan borang sisi pelayan secara amnya mengesahkan data borang sebelum menyerahkannya ke skrip latar belakang (seperti PHP, ASP, JSP, dsb. Kaedah ini secara amnya boleh mengesan kesahihan dan keselamatan data, tetapi ia memerlukan Membuat permintaan rangkaian tambahan untuk data yang dihantar akan menyebabkan overhed prestasi tertentu dan kemerosotan pengalaman pengguna.

Pengesahan pihak pelanggan secara amnya melaksanakan pengesahan borang pada klien melalui skrip JavaScript Pengguna boleh melakukan pengesahan sebelum menyerahkan borang, mengelakkan overhed permintaan rangkaian dan meningkatkan pengalaman pengguna. Walau bagaimanapun, terdapat risiko tertentu dalam pengesahan pihak pelanggan, kerana pengguna boleh melumpuhkan skrip JavaScript, mengakibatkan pengesahan tidak sah, jadi ia hanya digunakan sebagai kaedah pengesahan tambahan asas.

Dalam pengesahan pihak pelanggan, keperluan biasa ialah jika terdapat nilai nol dalam borang, ia tidak boleh diserahkan dengan jayanya. Ini boleh menghalang pengguna daripada menyerahkan data yang tidak lengkap atau salah operasi yang mengakibatkan data tidak betul. Kaedah pelaksanaan khusus diperkenalkan di bawah.

2. Proses pelaksanaan borang yang tidak boleh dihantar jika kosong

Apabila melaksanakan fungsi borang yang tidak boleh dihantar jika kosong, anda perlu memahami beberapa perkara terlebih dahulu. membentuk atribut dan kaedah dalam skrip JavaScript, yang diperkenalkan di bawah sekali.

1. Atribut borang

Terdapat beberapa atribut penting dalam borang ini boleh digunakan dalam JavaScript, terutamanya termasuk yang berikut:

(1 ) form.elements: Tatasusunan elemen borang, anda boleh mendapatkan rujukan kepada semua elemen borang.

(2) form.length: Bilangan elemen borang Bilangan elemen adalah lebih penting dalam borang pengesahan.

(3) borang.tindakan: alamat penyerahan borang.

(4) borang.kaedah: kaedah penyerahan borang, pada masa ini terdapat dua kaedah utama: GET dan POST.

2. Kaedah borang

Kaedah borang secara amnya berfungsi dalam skrip JavaScript yang beroperasi pada borang, termasuk yang berikut:

(1) submit( ): Hantar borang

(2) reset(): Tetapkan semula borang

(3) resetForm(): Tetapkan semula borang

(4) checkValidity(): Semak Kesahihan daripada borang

(5) reportValidity(): Paparkan hasil pengesahan

3. Atribut dan kaedah elemen borang

Terutamanya bentuk atribut dan kaedah elemen Ia adalah digunakan melalui rujukan untuk membentuk elemen, termasuk yang berikut:

(1) elemen.nilai: nilai elemen

(2) elemen.jenis: jenis elemen

(3) element.checked: Keadaan butang radio atau kotak semak yang ditandai

(4) element.defaultValue: Nilai lalai bagi elemen

(5) elemen. focus() : Elemen memperoleh fokus

(6) element.blur(): Elemen kehilangan fokus

Untuk melaksanakan fungsi yang borang tidak boleh diserahkan jika ia kosong, anda boleh ikuti langkah berikut dalam JavaScript.

1. Dapatkan elemen borang

Mula-mula anda perlu mendapatkan elemen borang yang perlu disahkan, gunakan form.elements.length dan form.elements[i] untuk mendapatkan nombor dan unsur bentuk yang sepadan membentuk rujukan unsur.

2. Nilai elemen borang

Lintas elemen borang dan tentukan sama ada nilai setiap elemen kosong Jika terdapat nilai nol, batalkan operasi penyerahan, jika tidak meneruskan operasi penyerahan.

Kod adalah seperti berikut:

function checkForm(form) {
    for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.value == "") {
            alert(element.name + "不能为空！");
            element.focus();
            return false;
        }
    }
    return true;
}

Dalam contoh ini, gunakan gelung for untuk melintasi semua elemen dalam bentuk, tentukan sama ada nilai setiap elemen bentuk kosong dan jika ia adalah kosong, kotak gesaan akan muncul, dan Mengembalikan nilai palsu, menunjukkan bahawa borang tidak boleh diserahkan. Jika tiada nilai nol, ia akan kembali benar, iaitu borang boleh diserahkan. Pada masa yang sama, kaedah element.focus() dipanggil untuk menjadikan fokus pengguna serta-merta kekal pada kotak input, menjadikannya lebih mudah bagi pengguna untuk membetulkan ralat.

Akhir sekali, daftarkan acara onsubmit untuk borang dan panggil fungsi checkForm().

<form id="myForm" action="submit.php" method="post" onsubmit="return checkForm(this);">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>

3. Ringkasan

JavaScript ialah bahasa skrip yang sangat penting dalam pembangunan web, dengan menggunakan JavaScript, fungsi yang kaya seperti pengesahan borang, lampiran gaya dan operasi DOM boleh direalisasikan.

Artikel ini memperkenalkan secara terperinci cara menggunakan JavaScript untuk melaksanakan fungsi bahawa borang tidak boleh diserahkan jika ia kosong. Ia terutamanya termasuk langkah-langkah mendapatkan elemen borang, merentasi elemen borang dan menilai sama ada ia kosong , mendaftarkan acara onsubmit untuk borang, dsb. Saya harap ia berguna kepada Pembangun web. Pada masa yang sama, perlu diingatkan bahawa apabila menggunakan JavaScript untuk mengesahkan borang, faktor seperti keselamatan dan pengalaman pengguna perlu dipertimbangkan dengan teliti untuk memastikan integriti dan kesahihan data.

Atas ialah kandungan terperinci Borang JavaScript kosong dan tidak boleh diserahkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!