Bagaimana saya mengesahkan input borang menggunakan LAYUI?

Bagaimana cara mengesahkan input borang menggunakan LAYUI?

Layui, rangka kerja front-end yang popular, menawarkan pendekatan mudah untuk membentuk pengesahan. Ia memanfaatkan sistem pengesahannya sendiri, menghapuskan keperluan perpustakaan luaran. Mekanisme teras melibatkan memberikan peraturan pengesahan secara langsung ke medan borang anda menggunakan atribut tertentu dalam HTML unsur bentuk. Atribut ini menentukan kriteria pengesahan. Layui kemudian secara automatik memeriksa peraturan ini apabila borang dikemukakan.

Mari kita gambarkan dengan contoh:

 <code class="html"><form class="layui-form" lay-filter="example"> <div class="layui-form-item"> <label class="layui-form-label">Username</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="required|user" autocomplete="off" placeholder="Enter your username" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">Password</label> <div class="layui-input-block"> <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="Enter your password" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button> </div> </div> </form> <script> layui.use(&#39;form&#39;, function(){ var form = layui.form; form.on(&#39;submit(formDemo)&#39;, function(data){ // data.field contains the form data console.log(data.field); // Perform further actions with the validated data return false; // Prevent default form submission }); }); </script></code>

Dalam contoh ini, atribut lay-verify Menentukan Peraturan Pengesahan: required Memastikan medan tidak kosong, dan user dan pass adalah peraturan pengesahan tersuai (anda perlu menentukan secara berasingan menggunakan fungsi pengesahan adat Layui). Atribut lay-filter membolehkan anda menyasarkan borang untuk pengendalian acara. Kod JavaScript menggunakan form.on('submit', ...) untuk menangkap penyerahan borang dan mengakses data yang disahkan melalui data.field . Ingatlah untuk memasukkan fail Layui JavaScript dalam projek anda.

Bolehkah Pengesahan Borang Layui mengendalikan jenis input yang berbeza dengan berkesan?

Ya, Pengesahan Borang Layui mengendalikan pelbagai jenis input dengan berkesan. Peraturan pengesahan terbina dalamnya, bersama-sama dengan keupayaan untuk menentukan peraturan tersuai, membolehkan pengesahan yang mantap merentasi medan input yang berbeza. Ia dengan lancar disatukan dengan jenis input biasa seperti teks, kata laluan, e -mel, nombor, butang radio, kotak semak, dan elemen pilih. Contohnya:

• E-mel: lay-verify="email" cek untuk format e-mel yang sah.
• Nombor: Anda boleh menggunakan lay-verify="number" dan berpotensi menggabungkannya dengan pemeriksaan pelbagai menggunakan fungsi pengesahan tersuai.
• Butang radio dan kotak semak: LAYUI mengendalikannya dengan berkesan melalui peraturan pengesahan required , memastikan sekurang -kurangnya satu pilihan dipilih.
• Pilih Elemen: Sama seperti butang radio dan kotak semak, required memastikan pilihan dibuat.
• Input Fail: Walaupun tidak disokong secara langsung oleh peraturan terbina dalam, anda boleh menggunakan fungsi pengesahan tersuai untuk menyemak jenis fail, saiz, dll.

Fleksibiliti fungsi pengesahan tersuai membolehkan anda menyesuaikan pengesahan Layui ke hampir apa -apa jenis input dan keperluan pengesahan tertentu.

Apakah perangkap biasa untuk dielakkan apabila menggunakan LAYUI untuk pengesahan borang?

Beberapa perangkap biasa boleh timbul apabila menggunakan LAYUI untuk pengesahan borang:

• Melupakan lay-verify : Kesilapan yang paling biasa adalah menghilangkan atribut lay-verify pada medan input, menjadikan pengesahan tidak berkesan.
• Nama peraturan yang salah: Pastikan anda menggunakan nama peraturan yang betul (misalnya, required , email , number ) dan menentukan peraturan tersuai dengan tepat. Typos akan membawa kepada kegagalan pengesahan.
• Inisialisasi JavaScript yang hilang: Gagal memulakan modul bentuk Layui ( layui.use('form', ...) ) menghalang pengesahan dari kerja.
• Mengabaikan return false; : Dalam pengendali penyerahan borang, ingatlah untuk memasukkan return false; Untuk mengelakkan tingkah laku penyerahan borang lalai dan membolehkan anda mengendalikan data yang disahkan.
• Lebih-bergantung pada pengesahan klien: Sentiasa ingat bahawa pengesahan sisi klien (seperti Layui) adalah untuk pengalaman pengguna dan pemeriksaan awal. Sentiasa lakukan pengesahan sisi pelayan untuk memastikan integriti dan keselamatan data. Pengesahan sisi klien boleh dilangkau.
• Tidak mengendalikan kesilapan dengan anggun: Jangan biarkan LAYUI memaparkan mesej ralat lalai. Sesuaikan mereka untuk pengalaman pengguna yang lebih baik (lihat bahagian seterusnya).

Bagaimanakah saya boleh menyesuaikan mesej pengesahan bentuk LAYUI untuk pengalaman pengguna yang lebih baik?

Layui membolehkan penyesuaian mesej pengesahan untuk meningkatkan pengalaman pengguna. Anda boleh mencapai ini melalui fungsi pengesahan tersuai. Inilah Caranya:

 <code class="javascript">layui.use('form', function(){ var form = layui.form; // Define custom validation rules form.verify({ user: function(value){ if(value.length </code>

Kod ini mentakrifkan dua peraturan pengesahan tersuai, user dan pass . Peraturan user memeriksa panjang nama pengguna, mengembalikan mesej ralat tersuai jika kurang daripada 5 aksara. Peraturan pass menggunakan ungkapan biasa untuk mengesahkan format kata laluan dan menyediakan mesej ralat tersuai. Pendekatan ini membolehkan mesej ralat yang sangat disesuaikan, yang membawa kepada pengalaman yang lebih mesra pengguna. Ingatlah untuk menyesuaikan peraturan dan mesej ini agar sesuai dengan keperluan aplikasi khusus anda.

Atas ialah kandungan terperinci Bagaimana saya mengesahkan input borang menggunakan LAYUI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!