Baru -baru ini, ada banyak penggunaan bootstrap. Menjelajahi dokumen bootstrap, saya menemukan bahwa plug-in popover sangat cocok untuk petunjuk untuk kesalahan verifikasi formulir.
Karena sangat sering dibuat, baru-baru ini disegel dan dibuat menjadi plug-in jQuery. Melalui plug-in ini, cukup tentukan data-vaild = "memeriksa aturan" data-errmsg = "pesan kesalahan" di tag HTML. Mengapa kita perlu menulis aturan verifikasi ke dalam tag HTML? Karena saya juga menggunakannya untuk memverifikasi latar belakang (latar belakang tidak menggunakan node, saya menggunakan ASP sekarang, dan saya akan memposting artikel khusus untuk menuliskan prinsip -prinsip setelah saya menyelesaikan pekerjaan saya).
<input id = "u_exam_idnumber" name = "u_exam_idnumber" placeholder = "Harap masukkan nomor tiket penerimaan untuk ujian masuk sekolah menengah atas" data-vaild = "^/d {5,20} $" data-errmsg = "Nomor tiket penerimaan tidak benar, dan hanya dapat mengandung angka"Efek terakhir adalah sebagai berikut:
Kode plugin adalah sebagai berikut:
"Gunakan ketat";/*JQuery+Formulir Verifikasi Bootstrap oleh Miaoqiyuan.cn Prinsip: http://www.miaoqiyuan.cn/p/jQuery-boottrap-vaild demonstrasi: http://www.miaoyuan.cnos.haCyx. http://www.miaoqiyuan.cn/products/vaild/jQuery.vaild.js*/(function(jQuery) {$.Extend(ak ("vard") {if (!! $ (_ ini) .data ("vard") {if (!! Regexp ($ (_ this) .data ("vaild")); if (pola.test ($ (_ this) .val ()) ) {$ (_ this) .parent (). RemoveClass ("HAD-error"). AddClass ("HAD-SUCCESS"); $ (_ this) .popover ("Destroy") ;} else {$ (_ this) .parent (). addClass ("have-error"). RemoveClass ("have-success"); $ (_ this) .data ("toogle", "Top"). Data ("Penempatan", "Top"). Data ("Container", "Body"). Data ("Konten", $ (_ this) .data ("errmsg")). Popover ({"Trigger": "_" _). true;}}); $. fn.extend ({{vaild: function () {$ (this) .each (function (index, _this) {$ (_ this) .submit (function () {var checkResult = true; untuk (var i = 0; i <_this.length; i ++) {for i = 0; i <_this. checkResult;} return checkResult;}); for (var i = 0; i <_this.length; i ++) {$ (_ ini [i]). blur (function () {$. vaild (this);});}});}});}) (jQuery);Sangat mudah untuk dihubungi, cukup gunakan kode berikut:
<script> $ ("Form"). vaild (); </script>Ketika formulir kehilangan fokus, jika tidak legal, kesalahan akan langsung diminta. Saat mengklik Kirim, jika ada item formulir ilegal, formulir akan dicegah untuk terus mengirimkan.
Latar belakang default popover berwarna putih dan tidak dapat berfungsi sebagai peringatan. Selain itu, pengaturan bantalan terlalu besar dan menghabiskan terlalu banyak ruang. Akhirnya, sesuaikan CSS untuk mencapai efek tangkapan layar.
/*Refactor Popover*/. Popover {latar belakang:#c00; warna: #fff;}. Popover .popover-content {padding: 1px 5px;}. Popover.top> .Arrow: setelah {Border-color:#c00;}/*Refactor bootstrap kesalahan Default. Pilih {latar belakang-warna:#f2dede;}. Input has-success, .has-success textarea, .has-success select {latar belakang-color:#dff0d8}Di atas adalah plug-in popover bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!