Artikel ini merekomendasikan bootstrapvalidator.js yang dibuat dari Twitter. Bootstrap dibuat dari Twitter, jadi menggunakan validator asli lebih dapat dipercaya. Akan ada banyak model untuk mencari BootstrapValidator di Baidu, tetapi saya hanya merekomendasikan yang ini:
1. Lihatlah
Untuk pengantar sederhana, berikut ini hanya cek kosong.
Alamat unduhan resmi bootstrapvalidator
2. Referensi Sumber Daya
Setelah mengunduh paket sumber daya, Anda dapat melihat direktori berikut.
Kemudian perkenalkan tiga file berikut ke proyek Anda.
<tautan type = "text/css" rel = "stylesheet" href = "$ {ctx} /components/validate/css/bootstrapvalidator.css"/> <script type = "Text/JavaScript" src = "$ {ctx} /ccomponents/vcreptcript" SCRIPT/BOODSOR/CTX/CTCHOCOR/CTCRAPS/CCRIPT/CTCHOCTIONS/validents/validen type = "text/javascript" src = "$ {ctx} /components/validate/js/language/zh_cn.js"> </script>3. Nama anggota bukan konfigurasi proyek kosong
<form action="${ctx}/login" method="post" onsubmit="return validateCallback(this)"> <div> <div> <label>Account</label> <input type="text" autofocus name="username" placeholder="Please enter the member number" autocomplete="off" data-bv-notempty /> </div> </div></form>Data-BV-notempty berarti bahwa nomor anggota harus digunakan sebagai cek kosong.
Div dari kelompok formulir diperlukan, jika tidak, kesalahan "terlalu banyak rekursi" akan dilaporkan.
Saat mengirimkan formulir formulir, metode ValidAteCallback akan dieksekusi. Metode ini secara khusus diperkenalkan pada Langkah 5.
4. Aktifkan validator bootstrap setelah halaman memuat
$ (function () {// Validasi bentuk $ ("Form.Required-validate"). masing-masing (fungsi () {var $ form = $ (ini); $ form.bootstrapValidator (); // perbaiki validator bootstrap (e) {{{{{{{{{{{{{{{{{{{{{{{{{{form. });Tambahkan atribut 'class = "wajib-validasi" pada formulir formulir, dan kemudian dapatkan formulir yang sesuai melalui jQuery, dan lakukan pemuatan bootstrapvalidator default di atasnya.
Pastikan untuk memperhatikan beberapa kode yang dikomentari dalam kode di atas. Untuk detailnya, silakan merujuk ke yang berikut untuk memperbaiki bug yang dikirimkan oleh BootstrapValidator berulang kali. Konten spesifiknya adalah sebagai berikut
Bootstrapvalidator sangat indah, tetapi sering kali ada niat membunuh yang tersembunyi di bawah wajah cantik Anda. Inilah sebabnya mengapa ada bug pengiriman berulang .
Larutan:
// Validasi formulir $ ("Form.Required-Validate", $ p) .each (function () {var $ form = $ (this); $ form.bootstrapValidator (). ON ('Success.Form.bv', function (e) {// Cegah peristiwa default dari melakukan melakukan e.preventdefault ();});Atur metode ON untuk bootstrapvalidator, yang kuncinya sukses.form.bv dan nilainya adalah e.preventDefault ();.
Investigasi Bug:
Hasil Survei:
1. Ketika Anda tidak menggunakan bootstrapvalidator, tidak akan ada masalah seperti yang ditunjukkan pada gambar.
2. Hanya ketika Anda mengklik pertama kali, pengiriman akan diulangi dua kali. Kemudian, setelah masuk kembali nama pengguna, Anda akan mengirimkannya dalam satu waktu.
Bug terjadi lingkungan:
Salin kode sebagai berikut: <Form Action = "$ {ctx}/mem/login? CallbackType = Forward" Method = "POST" ONSUBMIT = "Return ValidAteCallback (ini, tabajaxDone)" type = "Login">
...
<type type = "kirim"> Kirim </button>
</form>
menggambarkan:
Ini adalah formulir formulir biasa, dengan alamat permintaan dalam tindakan, dan ada metode Onsubmit dalam formulir, yang terutama untuk memverifikasi formulir, lalu mengirim permintaan, dan akhirnya memanggil kembali metode tabajaxdone.
Analisis Bug:
1. Tidak ada masalah dengan formulir. Jika tidak ada validasi bootstrap, tidak ada masalah sama sekali.
2. Tidak ada masalah saat menggunakan jQuery Validasi sebelumnya.
3. Maka masalahnya hanya bisa terjadi pada bootstrap validasi.
4. Tidak ada masalah dengan penggunaan default bootstrap validasi, karena hanya akan diulang ketika klik pertama mengirimkan.
5. Maka ini mungkin bootstrap validasi memiliki permintaan pengiriman default.
Jika Anda melihat objek validasi lagi, Anda dapat melihat bahwa ada banyak peristiwa secara default, di antaranya bentuk yang paling mencurigakan, yang berarti dapat memicu permintaan pengiriman lagi.
Debugging bug:
// Validasi bentuk $ ("Form.Required-validate", $ p) .each (function () {var $ form = $ (this); $ form.bootstrapValidator (); // .on ('Success.Form.bv', function (e) {//// cegah pengiriman default // e.preventdefaul1. Ketika halaman dimuat untuk pertama kalinya, BootstrapValidator perlu dimuat dalam metode di atas sebelum verifikasi data front-end dapat dilakukan.
2. Anda telah melihat kode yang dikomentari, mungkin Anda bisa menebaknya, dan itulah solusinya. Itu benar, tambahkan pemrosesan acara ini untuk membentuk dan menggunakan e.preventdefault (); untuk mencegah pengiriman acara default.
5. Verifikasi item saat mengirimkan formulir
fungsi validateCallback (form, callback, confirmMSg) {yunm.debug ("Enter ke dalam bentuk validasi dan pengiriman formulir"); var $ form = $ (form); var data = $ form.data ('bootstrapvalidator'); if (data) {// komponen yang memperbaiki memori tidak memverifikasi data.validate (); if (! Data.isValid ()) {return false; }} $ .Ajax ({type: form.method || 'Post', url: $ form.attr ("Action"), data: $ form.serializeArray (), DataType: "json", cache: false, Success: callback || yunm.ajaxdone, kesalahan: yunm.Ajaxerror}; mengembalikan false;}Setelah mendapatkan formulir di ValidAtecallback, formulir dapat dikembalikan melalui metode ISVALID untuk memverifikasi apakah itu lewat.
Setelah verifikasi formulir disahkan, kirimkan formulir ke server melalui AJAX.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.