Artikel ini akan memperkenalkan Anda pada cara menilai contoh kode verifikasi formulir. Sebelum memperkenalkan teks utama, saya akan memperkenalkan Anda ke plug-in.
Pendahuluan Plugin
Mari kita ambil gambar dulu:
Alamat unduhan: https://github.com/nghuuphuoc/bootstrapvalidator
Tip Penggunaan
Budaya Cina:
Setelah mengunduh plug-in, perkenalkan /js/bootstrapvalidator/language/zh_cn.js ke dalam file, yaitu, mengimplementasikan budaya Cina
Formulir Verifikasi Sebelum Diberikan:
Contoh verifikasi bentuk yang lebih kaya: http://www.jq22.com/yanshi522, langsung unggah kode:
<! Doctype html> <html> <head> <title> bootstrapValidator demo </itement> <tautan rel = "stylesheet" href = "vendor/bootstrap/css/bootstrap.css"/> <tautan rel = "stylesheet" href = "distrap/css"/BOOTST. Fontawesome CSS Jika Anda ingin menggunakan ikon umpan balik yang disediakan oleh Fontawesome-> <!-<link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/font-awesome/./css/font-awese.css"//-<font type = " src = "vendor/jQuery/jQuery -... min.js"> </script> <script type = "text/javascript" src = "vendor/bootstrap/js/bootstrap.min.js"> </script> <script = "text/Javascript" src = "dist/js/bootstrapvalidator.js"> </script> </head> <body> <div> <vet> <!-form:-> <section> <verv> <v> <h> Daftar </h> </div> <form name = "DefaultForm" Metode = "Post" Action = "Target.php"> <form form = "DefaultForm" Metode = "Post" action = "target.php"> <form iden = "DefaultForm" Metode = "post" action = "target.php"> <form> <Form ID = "DefaultForm" Method = "Post" Action = "Target.php"> <form> name = "firstName" placeholder = "nama depan"/> </div> <v> <input type = "text" name = "lastname" placeholder = "nama belakang"/> </div> </div> <veD> <label> </label> <v> <input type = "text" name = "Username"/Div> </Div> <Div> <input type "name" name = "Username" " type = "text" name = "email"/> </div> </div> <div> <label> kata sandi </label> <div> <input type = "password" name = "password"/> </div> </div> <div> <label> Kata sandi retype </label> <Div> <input type = "kata sandi =" confirmSassword " /> </div> </div> <div> <label> gender </label> <div> <label> <input type = "Radio" name = "gender" value = "jantan"/> jantan </label> </div> <viv> <label> <input type = "radio" name = "gender" value = "wanita"/female </label> </div> radio "name =" gender "value =" female "/female </label> </Div> Label =" LABEL> "LABEL>" LABEL> "LABEL>" LABEL> "LABEL>" LABEL> "LABOT>" LABOT> "LABOT>" LABOT> "LABOT>" LABOT> </LABU </Label> value = "Other"/> Lainnya </label> </div> </div> <viv> <label> ulang tahun </label> <vert> <input type = "text" name = "ulang tahun"/> (yyy/mm/dd) </div> </div> <v> <label> "LABEL" "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" LABEL "" Bahasa Inggris </LABEL> </SIV> <LABEL> <INPUT TYPE = "CHECKBOX" NAME = "Bahasa []" Value = "French"/> French </LABEL> </SIV> <SEV> <LABEL> <INPUT TYPE = "CHECKBOX" NAME = "LABUBUS []" Nilai = "Jerman"/> NAME </Label> </DIV> <DIV> <Label> <posput> "" "" "Nilai"/> NAME = "LABAB KOPBOAGES =" LABABLE "</DIV> </DIV> <DIV> <LABEL> <LABEL> <INPURSE" "NOVE =" NOVE = " Russian</label></div><div><label><input type="checkbox" name="languages[]" value="other" /> Other</label></div></div><div><label>Programming Languages</label><div><div><label><input type="checkbox" name="programs[]" value="net" /> .Net</label></div><div><label><input type="checkbox" name="programs[]" value="java" /> Java</label></div><div><label><input type="checkbox" name="programs[]" value="c" /> C/C++</label></div><div><label><input type="checkbox" name="programs[]" value="php" /> PHP</label></div><div><label><input type="checkbox" name="programs[]" value="perl" /> Perl</label></div><div><label><input type="checkbox" name="programs[]" value="ruby" /> Ruby</label></div><div><label><input type="checkbox" name="programs[]" value="python" /> Python</label></div><div><label><input type="checkbox" name="programs[]" value="python" /> Python</label></div><div><label><input type="checkbox" name="programs[]" value="javascript" /> JavaScript </LABEL> </SIV> </SIV> <DIV> <LABEL ID = "CAPTCHAOPERASI"> </LABEL> <DIV> <INPUT TYPE = "TEXT" NAME = "CAPTCHA"/> </Div> </Div> <Div> </Tipe = "Kirimkan" Nama = "tanda" Nilai "Nilai =" Masuk "> Masuk" Tombol = "KUMTOP =" KUMBIT " 2 "> Daftarkan 2 </button> <tombol type =" tombol "id =" validateBtn "> manual validasi </button> <tombol type =" tombol "id =" resetBtn "> formulir reset </button> </div> </form> </div> </section> <! Forma". CaptChafunction sederhana RandomNumber (min, max) {return math.floor (math.random () * (maks - min + 1) + min);}; $ ('#captchaoperation'). html ([randomNumber (1, 100), ' +', acak (1, 200), '=']. ')); $ ('#DefaultForm '). BootstrapValidator ({// live:' Disable ', pesan:' Nilai ini tidak valid ', umpan balik: {valid:' glyphicon glyphicon-ok ', tidak valid:' glificon glyphicon-remphicon ', validasi:' GLYPON: GLYPON GLYPHICON 'GLYFICON', GLECON: 'GLYPON: GLYPON GLYPHICON' GLYFICON ', GLYPON: GLYPON: GLYPON: GLYPON GLYPHICON' GLYPON 'GLYPOCON', GLYPON: 'GLYPON:' GLYPON GLYPHICON 'GLYPHICON: {firstName: {validators: {notempty: {pesan: 'Nama depan diperlukan dan tidak dapat kosong'}}}}, lastName: {validators: {notempty: {pesan: 'pesan terakhir' tidak ada yang kosong '}}}, noNername: {pesan:' tidak ada {pesan 'tidak ada yang kosong'}}}, {{pesan tidak ada {{pesan tidak ada. and cannot be empty'},stringLength: {min: 6,max: 30,message: 'The username must be more than 6 and less than 30 characters long'},regexp: {regexp: /^[a-zA-Z0-9_/.]+$/,message: 'The username can only consist of alphabetical, number, dot and underscore'},remote: {url: 'Remote.php', pesan: 'Nama pengguna tidak tersedia'}, berbeda: {field: 'password', pesan: 'Nama pengguna dan kata sandi tidak dapat sama dengan satu sama lain'}}, email: {validator: {email yang disetujui: {pesan: 'Input bukan alamat email yang valid'}}} {{{tidak ada pesan {{{{{{{{{{{{{{{{{{{{{{{{{tidak ada pesan yang valid: Jadilah kosong '}, identik: {field:' confirmpassword ', pesan:' Kata sandi dan konfirmasi tidak sama '}, berbeda: {field:' username ', pesan:' kata sandi tidak dapat sama dengan nama pengguna '}}}}, konfirmasi, {{validators: {notly notempty: {pesan:' Konfirmasi Konfirmasi dan Konfirmasi Konfirmasi: {{validators: {notempty: {pesan: 'Konfirmasi kata sandi dan Konfirmasi Konfirmasi dan KONFIRSED dan CANDUS DAN CANDUR: {{notpty: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{pesan {noticty {pesan: 'Kata sandi dan konfirmasi tidak sama'}, berbeda: {field: 'username', pesan: 'Kata sandi tidak bisa sama dengan nama pengguna'}}}, ulang tahun: {validator: {tanggal: {format: 'yyyy/mm/dd', pesan: 'ulang tahun tidak valid'}}}, gender/mm/dd ', pesannya: {{{{{{{{{{gender: {gender: {gender: {gender: Diperlukan '}}},' bahasa [] ': {validators: {notempty: {pesan:' Harap tentukan setidaknya satu bahasa yang dapat Anda gunakan '}}},' program [] ': {validators: {pilihan: {min: 2, max: 4, pesan:' silakan pilih 2 - 4 bahasa pemrograman Anda bagus di '{{{max: 4, pesan:' Harap pilih 2 - 4 bahasa pemrograman Anda bagus di '{{{{{{{{{{{{{{{{{{{Min: 'Jawaban yang salah', callback: function (value, validator) {var items = $ ('#captchaoperation'). Html (). Split (''), sum = parseInt (item []) + parseInt (item []); return value == sum;}}}}. {$ ('#DefaultForm'). BootstrapValidator ('Validate');}); $ ('#resetBtn'). Klik (function () {$ ('#defaultForm'). Data ('BootstrapValidator'). ResetForm (true));}); </script> </scripter ')Lihat 331 baris, klik Kirim, gunakan
$ ('#defaultForm'). BootstrapValidator ('Validate');Verifikasi bentuk pemicu
Ini jebakan yang saya temui:
Logika default dari BootstrapValidator adalah untuk memutar tombol ke atas ketika verifikasi bentuk gagal.
Namun, dalam proyek, tombol tidak ada di dalam formulir, dan dikirimkan oleh Ajax melalui pengikatan acara. Maka pertanyaannya adalah:
Proyek tidak perlu menjalankan peristiwa selanjutnya yang terikat ketika verifikasi formulir gagal. Baidu tidak dapat menemukan informasi yang relevan untuk waktu yang lama, dan akhirnya tergantung pada Google:
$ ("#yourForm"). Kirim (function (ev) {ev.preventDefault ();}); $ ("#kirim"). on ("klik", function () {var bootstrapValidator = = $ ("#yourForm"). Data ('bootstrapvalidator'); bootstrapvalidator.validate (); if (bootstrapvalidator.isvalid ()) $ ("#yourForm"). Kirim (); else return;});Di atas adalah pengetahuan yang relevan dari bentuk verifikasi bootstrapvalidator di 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!