Pengesahan medan sisi pelanggan ialah sesuatu yang perlu ada pada setiap borang, tidak ada keraguan mengenainya. Pertama, pengguna tidak perlu menunggu dan membazirkan sarafnya. Kedua, anda menunjukkan bahawa anda mengambil berat tentang pelawat anda. Adalah sangat baik untuk pelawat mengetahui terlebih dahulu apa yang dia lakukan salah.
Dalam tutorial ini, kita akan belajar cara menulis pengesahan borang jQuery dalam masa nyata. Jika anda ingin melihat apa yang anda boleh buat, anda boleh klik DEMO dan lihat.
Apa yang akan kita pelajari hari ini?
Bagaimanakah kita melaksanakan pengesahan jquery? Terdapat banyak cara untuk mencapai ini, berikut adalah yang paling biasa:
Kami boleh mencipta teg SPAN (yang akan mengandungi maklumat pengesahan) di sebelah medan input, dan memberikannya ID khusus yang akan kami gunakan untuk mengaksesnya.
Kami boleh membungkus setiap medan dalam teg P, di dalamnya kami mencipta SPAN yang akan mengandungi maklumat tentang pengesahan medan.
Anda juga boleh membungkus medan P dengan tag, di dalamnya anda boleh "belajar" SPAN (dengan cepat menggunakan jquery).
Ini semua akan berfungsi, tetapi tidak cara yang paling baik pelaksanaan. kenapa? Kerana terdapat terlalu banyak kod HTML tambahan dalam borang input yang kami tidak perlukan. Mesti diperhatikan.
Kami akan melakukannya seperti yang saya lakukan untuk diri saya sendiri. Pada pendapat saya, ini adalah penyelesaian yang paling betul, walaupun tiada siapa yang melakukan ini. Sejujurnya, saya tidak pernah melihat orang lain melakukan ini ... jika anda tahu, tulis saya komen di akhir pelajaran.
Apa yang kita akan lakukan? Kami akan menulis bentuk mudah, cantik dan bersih kod semantik, tanpa tag yang tidak perlu.
Memandangkan orang ramai mengisi setiap medan secara individu, kami boleh menjejaki dan mengesahkannya dengan segera: - Tentukan kedudukannya di tingkap (sudut kiri atas)
- Tentukan lebarnya
- Dengan cara ini kita akan tahu di mana penghujungnya.
- Mari tambahkan maklumat pengesahan dalam blok DIV dengan ID tertentu, di sebelah kanan medan tertentu. Kami juga akan menetapkan kelas yang sepadan .betul atau .tidak betul.
Nota: ini juga boleh diterima untuk orang yang tidak menggunakan JavaScript dalam penyemak imbas mereka. Ini akan disahkan pada bahagian pelayan.
Struktur projek Kami perlu membuat tiga fail:
index.html
style.css
validate.js
Kami akan melihat semuanya langkah demi langkah... mula-mula kod HTML, kemudian yang perlu gaya CSS, nanti kita akan fokus pada skrip pengesahan borang jQuery utama.
Menulis HTML Mari kita pecahkan semuanya...
Langkah 1 - buat HTML asas kod Untuk bermula, buat fail index.html dan tampal kod asas ini ke dalamnya. Anda boleh melihat bahawa kami menyertakan fail jQuery di bawah, sebelum validation.js, yang mengandungi skrip pengesahan kami.
Langkah 2 - cipta bentuk yang dibahagikan kepada tiga bahagian Kami akan membuat borang tiga bahagian untuk melihat cara mengesahkan medan input dan penyemak yang berbeza. Untuk bahagian kami menggunakan FIELDSET dan LABEL, untuk tajuk setiap bahagian:
Maklumat peribadi (nama pengguna, hari lahir, jantina, kenderaan).
E-mel (medan input e-mel pengguna).
Tentang saya ( maklumat ringkas tentang pengguna). Pengesahan Borang Masa Nyata Menggunakan Maklumat Peribadi jQuery E-mel Mengenai Anda Langkah 3 - tambah medan dan butang sahkan Bagus, sekarang mari kita buat beberapa medan input untuk borang kita. Untuk pelajaran kami, kami secara khusus memilih beberapa bidang yang berbeza:
- Tiga medan INPUT(nama pengguna, tarikh lahir, alamat e-mel).
- Butang RADIO untuk memilih jantina.
- KOTAK SEMAK untuk kenderaan pengguna.
- TEXTAREA untuk maklumat pengguna.
- BUTTON untuk butang "Sahkan".
Kami akan membungkus setiap LABLE dan medan input dalam teg P untuk memisahkannya ke dalam blok yang berasingan. Sekarang milik anda fail akhir index.html akan kelihatan seperti ini:
Pengesahan Borang Masa Nyata Menggunakan Maklumat Peribadi jQuery
Nama penuh:
Hari lahir (hh-mm-yyyy):
Saya: Lelaki Perempuan
Saya memiliki: kereta kapal terbang kapal basikal
E-mel e-mel ( [e-mel dilindungi]):
Tentang awak Beritahu kami sedikit tentang diri anda:
serahkan
Ini mungkin kelihatan sedikit menakutkan, tetapi itu kerana terdapat banyak medan input dalam borang kami. Sebenarnya, tidak ada yang rumit di sini. Simpan fail anda dan lihat dalam penyemak imbas anda untuk melihat apa yang berlaku. Sekarang mari kita hias sedikit...
Menambah CSS Memandangkan penggayaan CSS bukan topik utama tutorial hari ini, kami tidak akan memikirkannya. Kami hanya memerlukan kod CSS ini untuk menjadikan borang kelihatan bagus dan semua blok perlu disediakan.
Buat fail style.css dan tampal kod di bawah ke dalamnya. Kini borang dengan pengesahan jquery masa hadapan kelihatan hebat. bukan?
Badan ( latar belakang: #efefef; jidar: 0; padding: 0; sempadan: tiada; penjajaran teks: tengah; fon: biasa 13px Georgia, "Times New Roman", Times, serif; warna: #222; ) #content ( lebar: 500px; margin: 0 auto; margin-bawah: 25px; padding: 0; text-align: left; ) set medan ( margin-top: 25px; padding: 15px; border: 1px solid #d1d1d1; -webkit-border- jejari: 7px; -moz-border-radius: 7px; jejari sempadan: 7px; ) lagenda set medan ( fon: biasa 30px Verdana, Arial, Helvetica, sans-serif; bayangan teks: 0 1px 1px #fff; jarak huruf : -1px; color: #273953; ) input, textarea ( padding: 3px; ) label ( cursor: pointer; ) .block ( paparan: block; ) kecil ( letter-spacing: 1px; font-size: 11px; font- gaya: condong; warna: #9e9e9e; ) .info ( penjajaran teks: kiri; padding: 5px; saiz fon: 11px; warna: #fff; kedudukan: mutlak; paparan: tiada; -jejari sempadan-webkit: 5px ; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: -1px 1px 2px #a9a9a9; -moz-box-shadow: -1px 1px 2px #a9a9a9; bayang-kotak: -1px 1px 2px #a9a9a9; ) .ralat ( latar belakang: #f60000; sempadan: 3px pepejal #d50000; ) .betul ( latar belakang: #56d800; sempadan: 3px pepejal #008000; ) .salah ( font-weight: bold; warna: #e90000; ) .normal ( font-weight: normal; color: #222; ) #send ( background: #3f5a81; width: 100%; border: 5px solid #0F1620; font: bold 30px Verdana, sans-serif; color: #fafafa; text- bayang: 1px 1px 1px #0F1620; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; ) #send:hover (latar belakang: #4d76b1; sempadan: 5px pepejal #253750; warna: #fff; ) #send:active ( text-indent: -10px; )
Menulis pengesahan borang jQuery Ini adalah bahagian yang paling menarik dan menarik dalam pelajaran. Tetapi pertama, kita perlu memikirkan dan menerangkan perkara utama kerja kita. Anda perlu merancang segala-galanya.
Sedang merancang Sebelum menulis, tanya diri anda tiga soalan:
Apa yang kita perlukan daripada skrip ini?
Bagaimana kita mahu melakukan ini?
Bagaimanakah kita akan mencapai ini?
Ini jelas, kami mahu skrip mengesahkan borang. Tetapi bagaimana? Kami mahu ia melakukan ini dalam masa nyata (apabila pengguna selesai mengisi medan input) dan apabila butang "Sahkan" diklik. Oleh itu, kita perlu menulis beberapa fungsi: secara berasingan untuk setiap medan input dan untuk semua borang (yang akan dipanggil apabila butang "Sahkan" diklik).
Untuk mengelakkan pengulangan kod, kita perlu mencipta objek JavaScript untuk ini.
Apa yang kita perlukan untuk ini? Objek JS dalam kes kami akan dipanggil jVal, ia akan mengandungi kaedah berikut:
- jVal.fullName
- jVal.birthDate
- jVal.jantina
- jVal.kenderaan
- jVal.email
- jVal.tentang
Pembolehubah yang akan mengandungi status ralat semasa- jVal.errors. Dan kaedah yang menyemak sama ada sebarang ralat wujud dan mengesahkan penyerahan borang atau menolaknya. Jika sebarang ralat ditemui, ia mengarahkan pengguna ke permulaan borang, di mana dia boleh mengisi semua medan dengan betul.
Kaedah ini dipanggil - jVal.sendIt
Sekarang kita boleh mula membangun skrip jQuery pengesahan borang. Sebaik sahaja kita menulis kaedah pertama, maka semuanya akan menjadi lebih mudah dan lebih cepat.
Jom mulakan kerja Asas kod adalah mudah, benar-benar semua kod jquery akan terkandung dalam sintaks ini:
$(dokumen).sedia(fungsi())( jVal = ( ); ));
Pengesahan Medan Nama Pengguna Kaedah pertama kami akan memproses medan "nama pengguna". Tampalkannya di dalam objek jVal, seperti yang ditunjukkan dalam contoh:
Var jVal = ( "Nama Penuh" : function() ( ) );
Sekarang mari kita tulis beberapa baris kod di dalam kaedah. Hanya tampalkannya dan kami akan melihat maksudnya seterusnya:
$("badan").append(""); var nameInfo = $("#nameInfo"); var ele = $("#nama penuh"); var pos = ele.offset();
Baris 1: Kami menambah blok DIV pada dokumen. Maklumat kelas, memberikan beberapa gaya kepada blok, yang ditakrifkan dalam fail style.css, juga menjadikannya tidak kelihatan menggunakan display:none; Cari ID, ini adalah untuk mempunyai akses pantas ke blok ini dan memanipulasinya dengan menggunakan jQuery. Blok DIV ini akan mengandungi maklumat pengesahan medan.
Baris 3: Kami menulis panggilan ke blok ini dalam pembolehubah, kerana kami akan menggunakannya sejumlah besar sekali.
Baris 4: Sama seperti dalam kes sebelumnya, kami merekodkan sambungan ke medan nama penuh dalam pembolehubah. Kami juga akan menggunakannya berkali-kali.
Fungsi jQuery offset() mengembalikan kedudukan semasa elemen berbanding dokumen. Dikembalikan sebagai objek yang mengandungi sifat atas dan kiri. Kami menggunakan fungsi ini pada ele untuk menentukan kedudukan medan input.
Sekarang mari tambah beberapa baris lagi...
NameInfo.css(( atas: pos.top-3, kiri: pos.left+ele.width()+15 ));
Seperti yang anda lihat, kami mula beroperasi dengan gaya blok nameInfo. Secara khusus, kami menetapkan kedudukannya di sebelah kanan medan input. Untuk melakukan ini, kami mengalihkannya ke atas 3 piksel (baris kod ke-2), dan mengalihkannya 15 piksel ke kanan medan (baris kod ke-3).
Kami telah menulis 50% daripada kaedah pertama, kami akan membawanya ke penghujung. Sudah tiba masanya untuk menentukan sejauh mana pengguna memasukkan data dengan betul dan mengambil tindakan...
Jika(ele.val().panjang< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
Nampak tak sedap? Tiada apa yang perlu ditakutkan...
Baris 1: Kami menyemak bahawa nama yang dimasukkan oleh pengguna tidak kurang daripada 6 aksara.
Baris 2: Tetapkan pembolehubah jVal.errors kepada benar kerana kami telah menentukan bahawa nama pengguna terlalu pendek. Kami akan menggunakan ini lebih lanjut.
Baris 3: Kami mula beroperasi dengan elemen nameInfo kami (di mana kami memaparkan maklumat). Mula-mula, kami mengalih keluar kelas dengan betul dan menetapkan ralat kelas. Seterusnya kami memasukkan kandungan ke dalam elemen nameInfo, ini adalah maklumat yang nama mestilah lebih panjang daripada 6 aksara. Dan akhirnya, kami membuat mesej kami kelihatan kepada pengguna.
Baris 4: Kami mula memanipulasi elemen ele kami (borang input nama pengguna). Kami mengalih keluar kelas biasa dan menetapkannya kepada salah.
Baris 5: Jika nama pengguna cukup panjang, maka...
Baris 6: Kami mula memanipulasi elemen nameInfo. Jika ralat kelas diberikan, kami mengeluarkannya dan menetapkan kelas dengan betul. Kami memasukkan "burung" ke dalam untuk memahami bahawa semuanya OK. Dan paparkan mesej untuk pengguna.
Baris 7: Kami beroperasi dengan elemen ele. Kami mengalih keluar kelas yang salah, jika ia digunakan, dan menggunakan kelas biasa.
Kami telah mencipta kaedah pengesahan pertama kami! Sudah tiba masanya untuk mengujinya. Kami perlu memastikan bahawa kaedah kami akan dipanggil apabila pengguna selesai memasukkan nama mereka. Untuk melaksanakan ini, kita perlu melampirkan acara pada tindakan. Kami akan menggunakan fungsi change(). Tampalkan kod contoh di bawah, di bawah objek jVal:
$("#fullname").change(jVal.fullName);
Apakah maksud ini pada bahasa manusia: Jika pengguna menukar nilai medan "Nama penuh" dan kemudian selesai dengannya, kaedah Nama penuh dipanggil, yang mengesahkan medan itu.
Fail validate.js anda kini harus mengandungi kod berikut:
< 6) {
jVal.errors = true;
nameInfo.removeClass("correct").addClass("error").html("← at least 6 characters").show();
ele.removeClass("normal").addClass("wrong");
} else {
nameInfo.removeClass("error").addClass("correct").html("√").show();
ele.removeClass("wrong").addClass("normal");
}
}
};
// bind jVal.fullName function to "Full name" form field
$("#fullname").change(jVal.fullName);
});
Pengesahan medan tarikh lahir Sekarang semuanya akan berjalan lebih cepat. Kami hanya perlu membuat salinan kaedahNama penuh dan membuat beberapa perubahan.
Sekarang, salin kaedah Nama penuh, tampalkannya di bawah dan namakan semula tarikh lahir. Dan buat perubahan berikut:
- Di mana sahaja nameInfo muncul, gantikannya dengan birthInfo
- Daripada #nama penuh, gunakan #hari lahir untuk pembolehubah ele
- Tampal templat ini ekspresi biasa di bawah ialah ungkapan birthInfo.css() :
var patt = /^(2)\-(2)\-(4)$/i; - Ungkapan if() lama kami hendaklah:
jika(!patt.test(ele.val())) - Mesej untuk medan ini ialah: taipkan tarikh dalam format yang betul
Beginilah rupa kaedah tarikh lahir selepas membuat perubahan ini:
"Tarikh Lahir" : fungsi ()( $("badan").append(""); var birthInfo = $("#birthInfo"); var ele = $("#birthday"); var pos = ele.offset( ); birthInfo.css(( atas: pos.top-3, kiri: pos.left+ele.width()+15 )); var patt = /^(2)\-(2)\-(4)$ /i; if(!patt.test(ele.val())) ( jVal.errors = true; birthInfo.removeClass("betul").addClass("error").html("← taip tarikh dalam format yang betul ").show(); ele.removeClass("normal").addClass("salah"); ) else ( birthInfo.removeClass("ralat").addClass("betul").html("√").tunjukkan (); ele.removeClass("salah").addClass("normal"); ) )
Menggunakan ungkapan biasa (baris 14), kami menyemak sama ada tarikh itu dalam format 03/28/1987. Dalam baris 16, kami menyemak sama ada tarikh lahir pengguna sepadan dengan corak ungkapan biasa.
Dan sudah tentu, kita perlu melampirkan acara change() pada medan tarikh lahir:
$("#birthday").change(jVal.birthDate);
Sekarang kita mempunyai satu lagi kaedah pengesahan borang jQuery yang berfungsi. Bagus!
Pengesahan medan menjadi Sekali lagi, salin kaedah Nama penuh, namakan semula jantina dan buat perubahan berikut:
- Namakan semula semua nameInfo kepada genderInfo
- Daripada #nama penuh, gunakan #woman untuk pembolehubah ele
- Dalam ungkapan genderInfo.css(), tukar pembolehubah atas ke atas: pos.top-10 dan kiri ke kiri: pos.left+ele.width()+60
- Pernyataan if() kami hendaklah:
if($("input:checked").panjang === 0) - Mesej kepada pengguna ialah: adakah anda lelaki atau perempuan?
Beginilah rupa kaedah jantina selepas perubahan:
"jantina" : fungsi ()( $("badan").append(""); var genderInfo = $("#genderInfo"); var ele = $("#woman"); var pos = ele.offset( ); genderInfo.css(( atas: pos.top-10, kiri: pos.left+ele.width()+60 )); if($("input:checked").length === 0) ( jVal .errors = true; genderInfo.removeClass("betul").addClass("error").html("← adakah anda lelaki atau perempuan?").show(); ele.removeClass("normal").addClass ("salah"); ) else ( genderInfo..removeClass("error").addClass("betul").html("√").show(); ele.removeClass("salah").addClass("normal ");))
Pada baris 14 kami menyemak bilangan pemilih radio yang dipilih. Jika 0, maka pengguna tidak memilih apa-apa, kami memaparkan mesej ralat.
Dan seperti biasa, kami melampirkan kaedah jantina untuk butang radio:
$("input").change(jVal.gender);
Pemeriksa pengesahan - pemilikan kenderaan Sekarang mari salin kaedah jantina dan namakan semula ia sebagai kenderaan, membuat perubahan berikut:
- Gantikan semua genderInfo dengan vehicleInfo
- Daripada #wanita, masukkan #ship untuk ele.
- Dalam ungkapan vehicleInfo.css(), nilai kiri harus ditinggalkan: pos.left+ele.width()+40
- Pernyataan if() kami kini sepatutnya:
if($("input:checked").panjang
