Rumah  >  Artikel  >  hujung hadapan web  >  Kaedah universal terkapsul untuk mengesan kemahiran forms_javascript

Kaedah universal terkapsul untuk mengesan kemahiran forms_javascript

WBOY
WBOYasal
2016-05-16 16:18:53968semak imbas

Kesan pengesahan bahawa borang tidak boleh kosong (.notnull)

Fungsi: Apabila terdapat berbilang (termasuk satu) borang di bawah sepasang teg borang yang perlu diserahkan, gunakan js untuk menilai dengan tepat butang semasa dan elemen tersebut

Penggunaan: Cari bekas borang semasa di bawah teg borang dan berikannya class="form", dan butang hantar borang semasa diberikan class="check"
Elemen yang perlu disahkan sebagai kosong diberi class="notnull" nullmsg="xx tidak boleh kosong, dan borang yang memerlukan pertimbangan logik diberi class="need"
Jenis penghakiman diberikan class="num" (hanya boleh menjadi nombor) logicmsg segera pengesahan="XX hanya boleh menjadi nombor"

Berikan class="errorMessage" untuk memaparkan blok mesej ralat
Beri class="warn" untuk memaparkan mesej ralat
Tidak menggunakan pengaturcaraan berorientasikan objek js
Pertimbangan logik, jangan masukkan pengecam keperluan, terus berikan atribut ungkapan biasa (custom) regex="/^d$/" untuk membuat pertimbangan

Dilaksanakan secara luaran
Fungsi panggil balik butang Global.submitCallback
Global.confirmCallback mengesahkan fungsi panggil balik;
Bidang untuk penambahbaikan:
Tiada

Salin kod Kod adalah seperti berikut:

///
*/
//$(dokumen).sedia(
// fungsi () {
//        $("form").find(".notnull").bind({
//            fokus: fungsi () {
//                       jika ($(this).attr("value") == this.defaultValue) {
//                         $(this).attr("value", "");
//               }
//            },
//            kabur: fungsi () {
//                   jika ($(ini).attr("nilai") == "") {
//                                                                $(this).attr("value", this.defaultValue);
//               }
//           }
//       });
// }
//);
///*Kaedah untuk merangkum borang pengesanan universal*/
///event.srcElement: Objek sasaran yang mencetuskan acara, selalunya digunakan untuk acara onclick.
///event.fromElement: Sumber objek yang mencetuskan acara, selalunya digunakan untuk acara onmouseout dan onmouseover.
///event.toElement: Sumber sasaran yang mana tetikus bergerak selepas peristiwa dicetuskan. Ia sering digunakan untuk acara onmouseout dan onmouseover.
fungsi Global() {
var _self = ini;
}
Global.submitCallback = null;
Global.confirmCallback = null;
$(dokumen).sedia(fungsi () {
//membentuk badan
$("badan").cari(".bentuk").setiap(fungsi () {
This.onclick = fungsi (e) {
          butang var = batal;
             cuba {
                               butang = e.srcElement == null ? document.activeElement : e.srcElement;
              } tangkapan (e) {
console.log(e.message)
                        butang = document.activeElement;
            }
Jika ($(butang).is(".semak")) {
                        //makluman("serahkan")
                  var sub = (borang semak(ini) && SemakInputRex(ini) && semakpilih(ini) && semakSemak(ini));
                       jika (sub) {
// Panggil panggil balik kami, tetapi gunakan contoh kami sendiri sebagai konteks
Global.submitCallback.call(ini, [e]);
                }
                   sub kembali;
                } lain jika ($(butang).is(".confirm")) {
//alert("delete")
              var sub = confirm($(button).attr("title"));
                       jika (sub) {
Global.confirmCallback.call(ini, [e]);
                }
                   sub kembali;
              } lain {
                                                                                                                                                                                                                                                                                                                             kembali benar;
            }
}
});
/*Kesan elemen yang tidak boleh kosong dalam borang*/
Borang semak fungsi(borang) {
        var b = benar;
$(form).cari(".notnull").setiap(fungsi () {
Jika ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          melalui                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             // //alert($(this).attr("msg"))
                   $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
                     $(this).select();
                    $(ini).fokus();
                   pulangan b = palsu;
            }
});
Jika (b == benar) {
                $(form). find(".warn").text("");
                $(form).find(".errorMessage").hide();
}
         kembali b;
}
/*Senarai lungsur turun yang diperlukan dalam borang pengesanan*/
Fungsi semakpilih(borang) {
      var b = benar;
           $(form). cari(".pilih").setiap(fungsi (i) {
              var ck = $(this).find('option:selected').text();
Jika (ck.indexOf("select") > -1) {
                   $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
                     $(this).select();
                    $(ini).fokus();
                   pulangan b = palsu;
            }
});
         kembali b;
}
/*Semak kotak semak yang diperlukan dalam borang*/
Semakan fungsiDisemak(borang) {
      var b = benar;
$(form).cari(".kotak semak").setiap(fungsi (i) {
              var ck = $(this)[0].ditanda;
                jika (!ck) {
                   $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
                     $(this).select();
                    $(ini).fokus();
                   pulangan b = palsu;
            }
});
         kembali b;
}
//Semak sama ada ia sepadan dengan ungkapan biasa
Fungsi GetFlase(nilai, reg, ele) {
Jika (reg.test(value)) {
             kembali benar;
}
           $(ele). ibu bapa(".form").find(".warn").text($(ele).attr("logicmsg"));
​​​​ $(ele). ibu bapa(".form").find(".errorMessage").show();
          $(ele).fokus();
          $(ele).select();
          mengembalikan palsu; //Tidak boleh menyerahkan
}
Fungsi CheckInputRex(borang) {
      var b = benar;
          $(form). find("input[type='text']").setiap(fungsi () {
Jika (jenis ($(ini).attr("regex")) == 'rentetan') {
Jika ($.trim($(this).val()).panjang > 0 && $(this).val() != this.defaultValue) {
//Nilai bentuk semasa
                      nilai var = $(this).attr("value") || $(this).val();
                  var regx = eval($(this).attr("regex"));
                           pulangan b = GetFlase(nilai, regx, ini);
                }
            }
});
         kembali b;
}
///Semak sama ada aksara sepadan yang dimasukkan oleh pengguna adalah sah
///Kaedah ini sudah lapuk
Fungsi SemakInput(borang) {
      var b = benar;
           $(form).cari(".perlu").setiap(fungsi () {
Jika ($.trim($(this).val()).panjang > 0 && $(this).val() != this.defaultValue) {
//Nilai bentuk semasa
              nilai var = $(this).attr("nilai");
                         //Nilai id atau nilai atribut nama adalah seperti: [name="contact"]
              var name = $(this).attr("class");
                                 // Semak sama ada kandungan yang hendak dimasukkan adalah sah, seperti: Maklumat hubungan
              var len = name.split(" ");
untuk (var i = 0; i < len.length; i ) {
suis ($.trim(len[i])) {
                                                                                                                                                                                                                                                                                                                                                                                                                                                 kes "mudah alih":
                                                                                                                                                                                                                                                                                                                                                                                                                                                                         var reg = /^1d{10}$/;
Pulangan b = GetFlase(nilai, reg, ini);
rehat;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         kes "e-mel":
var reg = /^[w-] (.[w-] )*@[w-] (.[w-] ) $/;
Pulangan b = GetFlase(nilai, reg, ini);
rehat;
///Adakah kedua-dua kata laluan itu konsisten?                                                                                              kes "kata laluan":
rehat;
kes "kata laluan2":
Jika ($("#kata laluan").attr("nilai") != $("#kata laluan2").attr("nilai")) {
                                                                                                                   $(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
Pulangan b = palsu; // tidak boleh diserahkan
                                                                                                                                                        rehat;
kes "worktel":
                            sarung "hometel": //Nombor telefon rumah
                                                                                                                                                                                                                                                                                                                                                                                                                                                                           var reg = /^d{8}$/;
Pulangan b = GetFlase(nilai, reg, ini);
rehat;
                          huruf "siaran": //Poskod
                                            var reg = /^d{6}$/;
Pulangan b = GetFlase(nilai, reg, ini);
rehat;
"bonus" kes:
kes "elaun":
kes "Gaji Tetap":
var reg = /^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0 |0|[1-9]d)$/;
Pulangan b = GetFlase(nilai, reg, ini);
rehat;
"identiti" kes:
                             var reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;
Pulangan b = GetFlase(nilai, reg, ini);
                            rehat;
                        kes "ketinggian":
                            var reg = /^[1-2][0-9][0-9]$/;
                            return b = GetFlase(nilai, reg, ini);
                            rehat;
                        kes "qq":
                            var reg = /^[1-9][0-9]{4,}$/;
                            return b = GetFlase(nilai, reg, ini);
                            rehat;
                        kes "masa mula":
                        kes "masa tamat":
                            var reg = /^d{4}$/;
                            if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) {
                                kembali b;
                            }
                            $.ligerDialog.alert($(this).attr("msg"))
                            $(this).select(); //获取焦点
                            pulangan b = palsu; //不能提交
                            rehat;
                        kes "bilangan":
                            var reg = /^d $/;
                            return b = GetFlase(nilai, reg, ini);
                            rehat;
                        ///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码 护照号码 澳通行证和香港的签注.因私普通护照号码 护照号码 护照号码                                                                                                
///14/15 7 digit, G 8 digit; ///Yang biasa ialah: P. 7 digit; ///Untuk tujuan rasmi: S. 7 digit atau //S 8 digit, bermula dengan D ialah pasport diplomatik                               kes "posport": //Nombor pasport
                               var reg = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd |1[4,5]d{7})$/;
Pulangan b = GetFlase(nilai, reg, ini);
rehat;
kes "akaun bank":
                                    var reg = /^[0-9]{19}$/;
Pulangan b = GetFlase(nilai, reg, ini);
rehat;
                            } //suis
                                                    //untuk
            }
});
         kembali b;
}
///Kaedah ini telah ditamatkan
});
///Klik untuk menukar warna latar belakang
$(dokumen).sedia(fungsi () {
var inputs = $("#top>.c>input");
$(input).setiap(fungsi () {
This.onclick = fungsi () {
               document.getElementById("utama").style.backgroundColor = this.name;
                    //$("#utama").Warna latar = this.name;
}
});
});



Kod di atas ialah kaedah pengesanan bentuk universal yang dirangkumkan saya harap anda semua menyukainya
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn