Pengesahan bentuk html5 yang lebih bahagia di Vue

input:invalid {} adalah berguna apabila elemen bentuk tidak sah, tetapi pengalaman pengguna adalah kurang apabila menggunakannya secara langsung. Sebagai contoh, gaya tidak sah dipaparkan dengan segera apabila beban borang, yang membingungkan pengguna. Oleh itu, penggunaan ini jarang berlaku dalam aplikasi praktikal. Walau bagaimanapun, jika masalah ini dielakkan, pemilih :invalid boleh memainkan peranan yang besar dalam pengesahan bentuk tanpa bergantung pada perpustakaan besar.

Dave mencadangkan peningkatan berdasarkan idea asal dari 2017:

 <code>form.errors :invalid { outline: 2px solid red; }</code>

Gaya ralat asli hanya digunakan selepas mengesahkan bahawa borang itu berada dalam keadaan ralat dan kelas errors ditambah. Ujian juga mudah. Sebagai contoh, anda boleh menggunakan kelas ini apabila butang Hantar diklik:

 <code>submitButton.addEventListener("click", (e) => { form.classList.toggle("errors", !form.checkValidity()) });</code>

Ia juga boleh digunakan apabila kotak input kehilangan fokus atau pada masa lain. Anda juga boleh membungkus setiap kotak input dalam pembalut dan menukar kelas pembalut apabila sesuai.

Dave menerapkan idea ini untuk Vue:

Kami menetapkan errors kepada false apabila memulakan komponen borang kerana kami tidak mahu gaya yang salah dipaparkan sebelum pengguna mengemukakan borang tersebut. Fungsi invalidateForm hanya menetapkan this.error ke true . Ini adalah salah satu kelemahan CSS :invalid , ia terlalu mendesak. Dengan mendengar peristiwa invalid , penggunaan gaya boleh ditangguhkan sehingga selepas percubaan penyerahan bentuk pertama, kita tahu bahawa terdapat ralat dalam borang.

Pendekatan ini tidak memerlukan perpustakaan tambahan, memanfaatkan sepenuhnya fungsi asli pengesahan bentuk HTML. Pautan berikut adalah versi yang lebih baik yang juga memaparkan mesej ralat:

Pautan Langsung →

Atas ialah kandungan terperinci Pengesahan bentuk html5 yang lebih bahagia di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!