Bagaimana untuk Mengesan Acara Hantar Borang dalam JavaScript Tanpa Mengubah HTML?

Mengesan Acara Hantar Borang Tanpa Penanda HTML

Dalam JavaScript, satu tugas biasa melibatkan pengesahan borang sebelum menyerahkannya. Secara tradisinya, ini telah dicapai dengan menggunakan atribut HTML seperti onSubmit dan onClick. Walau bagaimanapun, untuk mencipta pustaka pengesahan kendiri tanpa mengubah kod HTML, anda memerlukan pendekatan yang lebih baik.

Penyelesaian terletak pada mendengar acara penyerahan borang secara asli dalam JavaScript. Begini cara anda boleh melakukannya:

<code class="javascript">var ele = /*Your Form Element*/;
if (ele.addEventListener) {
    ele.addEventListener("submit", callback, false);  //Modern browsers
} else if (ele.attachEvent) {
    ele.attachEvent('onsubmit', callback);            //Old IE
}</code>

Dalam kod ini, ele mewakili elemen borang anda dan panggil balik ialah fungsi yang anda mahu laksanakan semasa penyerahan borang.

Penyebaran Acara

Untuk memahami kod ini sepenuhnya, adalah penting untuk memahami penyebaran peristiwa. Pertimbangkan HTML berikut:

<code class="html"><form id="myForm">
    <input type="submit">
</form></code>

Apabila butang serah diklik, acara "serahkan" dicetuskan. Acara ini menggelembungkan pokok DOM, bermula dari butang dan berakhir pada elemen borang. Dengan mendengar acara serahan pada borang itu sendiri (ele.addEventListener('submit')), kami menangkap acara itu semasa ia bergerak ke atas pokok.

Mencegah Penyerahan Borang Lalai

Jika anda ingin melakukan tindakan tersuai semasa penyerahan borang (seperti pengesahan), anda boleh menghalang kelakuan penyerahan lalai penyemak imbas menggunakan preventDefault().

<code class="javascript">document.querySelector("#myForm").addEventListener("submit", function(e) {
    if (!isValid) {
        e.preventDefault();    //stop form from submitting
    }
});</code>

Dalam kod di atas, jika isValid adalah palsu , penyerahan borang dihalang.

Integrasi Perpustakaan

Semasa menggunakan JavaScript asli lebih diutamakan, sesetengah pembangun memilih perpustakaan. Begini cara anda boleh mendengar acara serah borang dengan perpustakaan popular:

• jQuery: $(ele).submit(callback);
• Prototaip : ele.observe('serahkan', panggil balik);
• MooTools: ele.addEvent('serahkan', panggil balik);

Oleh memahami penyebaran acara dan menggunakan addEventListener asli atau integrasi perpustakaan, anda boleh mendengar borang penyerahan acara dalam JavaScript dengan berkesan tanpa mengubah suai kod HTML.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Acara Hantar Borang dalam JavaScript Tanpa Mengubah HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!