Cara menulis fungsi pengesanan kemas kini bentuk generik dalam javascript

mata teras

fungsi
• dalam JavaScript mengesan kemas kini ke mana -mana bentuk dengan menerima parameter borang yang dibebankan tunggal (nod DOM atau ID rentetan borang) dan mengembalikan pelbagai nod elemen bentuk yang pengguna telah berubah. FormChanges()
Jika borang tidak dijumpai, fungsi mengembalikan null dan direka untuk bersesuaian dengan semua perpustakaan JavaScript dan berjalan di semua pelayar moden, termasuk IE6 dan IE7.
• Penggunaan sebenar fungsi
• termasuk mengingatkan pengguna bilangan kemas kini medan yang telah mereka buat, atau mengemas kini nilai tersembunyi untuk menunjukkan bahawa tiada perubahan telah dibuat, yang membolehkan kod pelayan untuk melangkau pengesahan medan dan kemas kini pangkalan data. FormChanges()

Dalam jawatan terdahulu, kami belajar bagaimana untuk memeriksa sama ada pengguna telah mengubah elemen bentuk individu. Hari ini, kami akan menggunakan maklumat ini untuk menulis kod JavaScript yang dapat mengesan sebarang kemas kini borang. Berikut adalah beberapa contoh dan pautan kod: - Kod Demo Kod -

kod javascript - fail zip untuk semua kod dan contoh FormChanges()

Langkah berjaga -jaga

Sebagai pemaju yang baik, kami akan menentukan keperluan kami sebelum menulis mana -mana kod: - Kami akan menulis fungsi

yang menerima satu parameter FormChanges() borang - node dom atau id rentetan bentuk. - Fungsi ini akan mengembalikan pelbagai nod elemen bentuk yang pengguna telah berubah. Ini membolehkan kita menentukan medan mana yang telah berubah, atau jika array kosong, ini bermakna bahawa tiada bidang telah berubah. - Jika borang tidak dijumpai, fungsi kembali NULL. - Kami tidak bergantung pada mana -mana perpustakaan JavaScript tertentu, jadi fungsi ini serasi dengan semua perpustakaan. - Ia mesti berjalan dalam semua pelayar moden, termasuk IE6 atau IE7.

FormArs () Fungsi untuk pemahaman yang mudah, berikut adalah permulaan fungsi kami:

Kami terlalu banyak memuatkan parameter borang - ia boleh menjadi elemen DOM, tetapi jika ia adalah rentetan ID, kita perlu mencari elemen dalam DOM:

function FormChanges(form) {

Jika kita tidak mempunyai nod borang, fungsi akan kembali null tanpa sebarang operasi selanjutnya:

if (typeof form == "string") form = document.getElementById(form);

Kami sekarang akan mengisytiharkan beberapa pembolehubah, yang akan kami gunakan sepanjang fungsi: -

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

adalah array elemen borang yang dikemas kini pengguna yang dikembalikan -

adalah nod elemen bentuk - changed jika elemen telah berubah, ditetapkan ke benar- n c def kita kini boleh memulakan gelung utama kita, yang memeriksa setiap elemen bentuk pada gilirannya. o pada mulanya ditetapkan kepada palsu, menunjukkan bahawa elemen yang kita periksa tidak mengubah apa -apa: ol

function FormChanges(form) {

Seterusnya, kami akan mengekstrak nama nod (input, Textarea, pilih) dan periksa dalam pernyataan Switch. Kami hanya mencari nod pilih dan tidak memilih, jadi pernyataan suis tidak diperlukan dengan ketat. Walau bagaimanapun, lebih mudah dibaca dan membolehkan kita menambah lebih banyak jenis nod apabila memperkenalkan jenis nod baru.

Perhatikan bahawa kebanyakan pelayar mengembalikan nama nod dalam huruf besar, tetapi atas sebab -sebab keselamatan kami sentiasa menukar rentetan ke huruf kecil.

if (typeof form == "string") form = document.getElementById(form);

Kenyataan kes pertama menilai senarai drop-down pemilihan. Ini adalah pemeriksaan yang paling kompleks kerana kita perlu gelung melalui semua elemen suboption untuk membandingkan sifat yang dipilih dan lalai.

Gelung juga menetapkan DEF ke pilihan terakhir dengan harta "dipilih". Sekiranya kami mempunyai kotak radio, kami membandingkan DEF dengan harta yang dipilih dari nod untuk memastikan kami berurusan dengan kes -kes di mana tiada pilihan atau elemen pilihan berganda dengan harta "dipilih" (lihat jawatan terdahulu untuk penerangan lengkap).

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

Sekarang kita perlu berurusan dengan elemen input dan teks. Ambil perhatian bahawa kes "Textarea" kami: pernyataan tidak menggunakan rehat, jadi ia akan jatuh ke dalam kes "input": kod.

Kotak semak dan butang radio bandingkan sifat yang diperiksa dan lalai mereka, sementara semua jenis lain membandingkan nilai mereka dengan DefaultValue:

var changed = [], n, c, def, o, ol, opt;

Jika nilai C adalah benar, elemen telah berubah, jadi kami menambahkannya ke array yang diubah. Gelung kini selesai:

for (var e = 0, el = form.elements.length; e < el; e++) {
    n = form.elements[e];
    c = false;

kita hanya perlu mengembalikan array yang diubah dan menamatkan fungsi:

switch (n.nodeName.toLowerCase()) {

Penggunaan contoh

Katakan kita mencipta bentuk berikut:

    // select boxes
    case "select":
        def = 0;
        for (o = 0, ol = n.options.length; o < ol; o++) {
            opt = n.options[o];
            if (opt.selected) def = o;
        }
        c = (n.selectedIndex != def);
        break;

kita boleh menyemak sama ada pengguna telah menukar mana -mana medan borang menggunakan kod berikut:

        // input / textarea
        case "textarea":
        case "input":
            switch (n.type.toLowerCase()) {
                case "checkbox":
                case "radio":
                    // checkbox / radio
                    c = (n.checked != n.defaultChecked);
                    break;
                default:
                    // standard values
                    c = (n.value != n.defaultValue);
                    break;
            }
            break;
    }

atau, jika tiada perubahan berlaku, kita boleh mengemas kini nilai "berubah" tersembunyi kepada "tidak" apabila menyerahkan borang. Ini akan membolehkan kod pelayan untuk melangkau pengesahan medan dan kemas kini pangkalan data:

    if (c) changed.push(n);
}

(nota: Menukar "ya" hingga "tidak" akan turun dengan elegan kerana pelayan akan sentiasa memproses data masuk jika JavaScript tidak tersedia.)

Saya harap anda dapati ia berguna.

(bahagian Soalan Lazim ditinggalkan di sini kerana bahagian Soalan Lazim dari teks asal tidak ada kaitan dengan fungsi kod, yang merupakan penjelasan tambahan mengenai fungsi kod dan tidak konsisten dengan matlamat pseudo-asal.

Atas ialah kandungan terperinci Cara menulis fungsi pengesanan kemas kini bentuk generik dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!