10 plugin pengesahan borang jQuery

Takeaways Key

HTML5 memperkenalkan atribut bentuk baru untuk pengesahan bentuk berasaskan pelayar, tetapi ia mempunyai sekatan seperti ketidakupayaan untuk menyesuaikan mesej dan gaya ralat, dan keperluan untuk membuat corak untuk medan input. Plugin Pengesahan Borang JQuery bertujuan untuk mengatasi batasan -batasan ini.

• Artikel ini menyediakan senarai 10 plugin pengesahan bentuk jQuery popular, termasuk pasli, validator bentuk jQuery, plugin pengesahan jQuery, validator bootstrap, asap, formvalidation, validatr, validetta, jQuery.validity, dan h5validate. Setiap plugin mempunyai ciri dan keupayaan yang unik, seperti peraturan pengesahan tersuai, penyetempatan, pengesahan Ajax jauh, cadangan input, dan banyak lagi.
• Plugin Pengesahan Borang JQuery berfungsi dengan memeriksa data yang dimasukkan dalam bidang borang terhadap peraturan yang telah ditetapkan. Mereka memberikan maklum balas segera mengenai kesilapan, yang membolehkan pengguna membetulkannya sebelum menyerahkan borang tersebut. Kebanyakan plugin membenarkan penyesuaian mesej ralat dan umumnya serasi dengan semua pelayar moden yang menyokong JavaScript dan jQuery.
• Artikel popular ini dikemas kini pada 8 Ogos, 2016 untuk mencerminkan keadaan semasa plugin pengesahan bentuk. Komen yang berkaitan dengan artikel lama telah dipadam.
HTML5 memperkenalkan atribut bentuk baru supaya penyemak imbas dapat mengesahkan bentuk secara asli. Dengan CSS3 dan JavaScript anda dapat merealisasikan pengesahan bentuk asas tanpa memerlukan plugin - seperti yang diterangkan dalam artikel ini. Tetapi ini mempunyai beberapa sekatan:

Mesej ralat ditinggalkan kepada penyemak imbas itu sendiri, anda hanya boleh memberikan tajuk medan input

• Anda tidak dapat menyesuaikan gaya mesej ralat
• anda perlu membuat corak untuk medan input sendiri
Plugin pengesahan bentuk 10 jQuery berikut menetapkan matlamat untuk menyesuaikan mesej ralat dan gaya, serta memudahkan penciptaan peraturan pengesahan.

1. Parsley

Plugin extensible yang menawarkan pilihan biasa seperti penyetempatan dan peraturan pengesahan tersuai, tetapi juga pengesahan AJAX jauh. Dokumentasi ini bersih dan mudah dibaca dan projek itu dikekalkan secara aktif. Peraturan pengesahan boleh dikawal menggunakan borang HTML5 atau atribut data tersuai.

Lihat Demo Plugin Pen Parsley oleh SitePoint (@SitePoint) pada Codepen.

Laman web Kod sumber

2. Validator Borang JQuery

Plugin modular, yang menawarkan satu set asas peraturan pengesahan secara lalai dan membolehkan anda memuatkan modul lebih lanjut atas permintaan. Sebagai contoh: Pengesah fail semasa memuat naik fail, tetapi juga tarikh, keselamatan atau modul lokasi. Ia juga membolehkan anda memberikan cadangan input. Pengesahan dikawal dengan atribut data HTML5.

Lihat Demo Plugin Validator Form Pen JQuery oleh SitePoint (@SitePoint) pada codepen.

Laman web Kod sumber

3. plugin pengesahan jQuery

Salah satu plugin pengesahan pertama dari tahun 2006. Ia membolehkan anda menentukan peraturan pengesahan tersuai menggunakan atribut HTML5 atau objek JavaScript. Ia juga mempunyai banyak peraturan lalai yang dilaksanakan dan menawarkan API untuk membuat peraturan sendiri dengan mudah. Mencari maklumat terperinci mengenai plugin mungkin sukar pada mulanya dan ia terhad kepada JQuery 1.x, tetapi mereka berjanji untuk menjadikannya lebih baik - lihat kempen ini.

Lihat Demo Plugin Pengesahan Pen JQuery oleh SitePoint (@SitePoint) pada Codepen.

Laman web Kod sumber

4. Validator Bootstrap

plugin pengesahan jQuery untuk bootstrap. Ia pada dasarnya hanya pembungkus di sekitar pengesahan bentuk asli menggunakan atribut HTML5, tetapi juga boleh digunakan untuk menambah peraturan tersuai. Ia selalu menunjukkan mesej ralat dari penyemak imbas, diterjemahkan secara automatik ke dalam bahasa yang betul.

Lihat Demo Plugin Validator Pen Bootstrap oleh SitePoint (@SitePoint) pada codepen.

Laman web Kod sumber

5. Asap

Asap adalah koleksi komponen untuk bootstrap - termasuk validator bentuk. Sebagai perbandingan dengan validator bootstrap yang lain (#4), ia tidak menggunakan pengesahan penyemak imbas asli - oleh itu mesej ralat tidak secara automatik setempat dan peraturan pengesahan perlu ditentukan menggunakan atribut HTML5 dan data, serta JavaScript.

Lihat Demo Plugin Pengesahan Borang Pen Asap oleh SitePoint (@SitePoint) pada codepen.

Laman web Kod sumber

6. FormValidation

Plugin Pengesahan JQuery Premium dari 50 $ dengan integrasi terbina dalam untuk Bootstrap, Yayasan dan lain-lain. Ia mempunyai banyak peraturan pengesahan serta pilihan dan boleh menguntungkan untuk aplikasi dengan banyak bentuk kompleks.

Laman web

7. ValidAtr

Pembungkus yang sangat asas untuk pengesahan bentuk oleh penyemak imbas yang menggunakan mesej ralat asli di mana mungkin, dikawal dengan atribut bentuk HTML5. Ia boleh digunakan sebagai polyfill atau untuk menyesuaikan gaya mesej ralat. Tidak ada lagi, tidak kurang.

lihat demo plugin penagur pena oleh SitePoint (@SitePoint) pada codepen.

Laman web Kod sumber

8. Validetta

Plugin ini menawarkan pengesahan menggunakan atribut data, dengan pilihan yang agak terhad. Ia datang dengan hanya peraturan pengesahan asas, segala -galanya boleh ditambah dengan ungkapan biasa tersuai - tetapi tidak ada contoh yang menunjukkannya. Berbanding dengan plugin lain, satu -satunya ciri unik ialah mesej ralat dipaparkan dalam gelembung (lihat demo di bawah).

Lihat Demo Plugin Pen Validetta oleh SitePoint (@SitePoint) pada codepen.

Laman web Kod sumber

9. JQuery.Validity

Plugin untuk mengawal pengesahan dengan JavaScript sahaja - tiada atribut HTML5 atau data. Walaupun ini mungkin berguna untuk peraturan pengesahan dinamik, plugin tidak menawarkan pilihan yang cukup untuk membuat penulisan yang cekap. Ia juga tidak membenarkan menggunakan atribut jenis HTML5 baru seperti e -mel, dan tidak menyediakan fungsi untuk memeriksa sama ada borang yang sah - perlu untuk menunjukkan mesej kejayaan.

lihat pena jquery.validity plugin demo oleh SitePoint (@SitePoint) pada codepen.

Laman web Kod sumber

10. H5Validate

Plugin ini malangnya telah ditinggalkan oleh penciptanya (Eric Elliott). Akibatnya, laman web demo/dokumentasi mengembalikan 404 dan terdapat dua dozen isu terbuka. Plugin tidak secara automatik mengesahkan input mengikut jenis dan contoh berikut walaupun tidak menunjukkan mesej ralat. Kami telah memasukkannya ke dalam senarai itu, kerana Eric sedang mencari penyelenggara baru untuk projek itu, jadi ada kemungkinan bahawa pada satu ketika di masa depan, ia mungkin mendapat sedikit kehidupan semula jadi.

Lihat Demo Plugin Pen H5Validate oleh SitePoint (@SitePoint) pada codepen.

kod sumber

Kesimpulan

Nah, itulah sepuluh senarai teratas plugin pengesahan bentuk jQuery popular. Sekiranya anda mempunyai pengalaman dengan ini (baik atau buruk!), Atau jika anda tahu mengenai plugin pengesahan bentuk lain yang patut disebut, sila beritahu kami dalam komen!

Soalan Lazim (Soalan Lazim) Mengenai Plugin Pengesahan Borang JQuery

Apakah plugin pengesahan bentuk jQuery? Mereka memastikan bahawa data yang dimasukkan oleh pengguna adalah betul dan dalam format yang diperlukan sebelum diserahkan kepada pelayan. Plugin ini dibina menggunakan JQuery, perpustakaan JavaScript yang cepat, kecil, dan kaya. Mereka menyediakan cara yang mudah dan cekap untuk mengesahkan bidang bentuk, mengurangkan jumlah pengekodan manual yang diperlukan.

Bagaimana Plugin Pengesahan Borang JQuery berfungsi? Peraturan ini boleh termasuk cek untuk medan yang diperlukan, alamat e -mel yang sah, kata laluan yang sepadan, panjang minimum dan maksimum input, dan sebagainya. Sekiranya data yang dimasukkan tidak memenuhi peraturan ini, plugin memaparkan mesej ralat, menghalang borang daripada diserahkan sehingga kesilapan diperbetulkan. Menggunakan plugin pengesahan bentuk jQuery boleh memudahkan proses pengesahan borang. Mereka menyelamatkan anda daripada menulis kod JavaScript yang kompleks untuk mengesahkan setiap medan borang secara individu. Mereka juga menyediakan cara yang konsisten untuk mengendalikan pengesahan bentuk di seluruh pelayar dan peranti yang berbeza. Selain itu, mereka meningkatkan pengalaman pengguna dengan memberikan maklum balas segera mengenai sebarang kesilapan, yang membolehkan pengguna membetulkannya sebelum menyerahkan borang. Plugin Pengesahan Borang JQuery, anda perlu memasukkan perpustakaan jQuery di laman web anda. Kemudian, anda boleh memuat turun plugin dan memasukkannya ke dalam laman web anda menggunakan tag skrip. Sesetengah plugin juga mungkin memerlukan fail CSS tambahan untuk dimasukkan untuk menggayakan mesej ralat. membolehkan anda menyesuaikan mesej ralat. Anda boleh menukar teks mesej, gaya di mana ia dipaparkan, dan juga bahasa di mana mereka ditulis. Ini membolehkan anda menyesuaikan mesej ralat kepada keperluan khusus anda dan bahasa dan budaya pengguna anda. Sesuai dengan semua pelayar moden yang menyokong JavaScript dan jQuery. Walau bagaimanapun, tahap keserasian mungkin berbeza antara plugin yang berbeza dan versi yang berbeza dari plugin yang sama. Adalah idea yang baik untuk menguji plugin dalam penyemak imbas yang berbeza untuk memastikan ia berfungsi seperti yang diharapkan. Mungkin untuk menggunakan pelbagai plugin pengesahan bentuk jQuery pada halaman web yang sama, ia biasanya tidak disyorkan. Menggunakan pelbagai plugin boleh membawa kepada konflik dan boleh membuat halaman web lebih perlahan untuk memuat dan bertindak balas. Biasanya lebih baik memilih satu plugin yang memenuhi semua keperluan anda dan berpegang teguh dengannya. Muat turun versi terkini plugin dan gantikan fail lama dengan yang baru. Sesetengah plugin juga boleh menyediakan fungsi kemas kini yang secara automatik memuat turun dan memasang versi terkini.

Bolehkah saya menggunakan plugin pengesahan bentuk jQuery dengan perpustakaan JavaScript yang lain? Walau bagaimanapun, anda perlu berhati -hati untuk mengelakkan konflik antara perpustakaan. JQuery menyediakan fungsi noconflict yang membolehkan anda menggunakan jQuery dengan perpustakaan lain yang menggunakan simbol $. Borang Plugin Pengesahan. Ini termasuk pengesahan bentuk HTML5 asli, pengesahan sisi pelayan, dan perpustakaan pengesahan untuk kerangka JavaScript lain seperti AngularJS dan React. Walau bagaimanapun, plugin pengesahan bentuk jQuery masih merupakan pilihan yang popular kerana kemudahan penggunaannya dan pelbagai ciri.

Atas ialah kandungan terperinci 10 plugin pengesahan borang jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!