Vuerify adalah plug-in verifikasi data yang sederhana dan ringan. Aturan verifikasi dasar bawaan dan permintaan kesalahan. Aturan yang dapat disesuaikan, dan jenis aturan mendukung fungsi, fungsi, atau string secara teratur. Aturan verifikasi dapat didaftarkan secara global atau dalam komponen. Plug-in akan menambahkan objek $ Vuerify ke VM, dan pada saat yang sama menonton data dan memverifikasi legalitas. Jika ada kesalahan, VM. $ Vuerify. $ Kesalahan akan disimpan.
Memasang
npm i vuerify -S
menggunakan
Pasang plug-in
impor vue dari 'vue'import vuerify dari' vuerify'vue.use (vuerify, /* Tambahkan aturan khusus* /)
Tambahkan aturan khusus
tes bisa menjadi biasa atau fungsi
{Diperlukan: {test: // s+$/, pesan: 'wajib'}}Daftar di dalam komponen
{data () {userName: '', kata sandi: ''}, vuerify: {username: {test: // w {4,}/, // aturan khusus, yang dapat berupa fungsi, aturan registrasi reguler atau global (isi string): setidaknya 4 karakter '}, kata sandi:' aturan yang diperlukan '// Menggunakan Registrasi) Pesan): setidaknya 4 karakter'}, kata sandi '//Global untuk Menggunakan Global untuk Menggunakan Global) Pesan)}API
$ vuerify berisi properti berikut
bernama Nilai Nilai
$ kesalahan pesan kesalahan gagal memeriksa data, misalnya, jika nama pengguna gagal memeriksa, itu akan mengembalikan {nama pengguna: 'setidaknya 4 karakter'} objek {}
tidak valid memiliki bidang yang gagal memeriksa booleantrue
Valid tidak memiliki bidang yang gagal memeriksa booleanfalse
Periksa periksa bidang yang ditentukan, lewati dalam array, dan kembalikan fungsi boolean (array)-
Hapus Hapus Fungsi Daftar Kesalahan-
v-vuerrify
Petunjuk ini memvalidasi data dan menetapkan nama kelas untuk komponen ketika komponen Form memicu peristiwa blur (default adalah .vuerify-invalid). Ini bisa menjadi komponen asli seperti input, atau bisa menjadi komponen yang telah dienkapsulasi dengan sendirinya. Dua versi tersedia
Memasang
# Vue 1.xnpm v-vuerify -s# vue 2.0npm v-vuerify-next -s
penggunaan
impor vue dari 'vue'import vuerifydirective dari' v-vuerify '// vue1.ximport vuerifydirective dari' v-vuerify-next '// vue2.0vue.use (vuerifydirective) <input v-model = "username" v-vuerify = "' '' '' ''> <xy-noVel =" Username "v-vuerify =" "'' '' '' ''> <x-model =" Username "v-vuerify =" "'' '' '' '' '' 'uSOMECUT: USOUMET: USOUME: USOUMNECE: USOUTY: USOURY: USOUMNOME. v-vuerify = "'password'"> </x-input>
Param
Verifikasiinvalidclass
Nama kelas default adalah vuerify-valid
<input v-Model = "nama pengguna" v-vuerify = "'nama pengguna'" vuerify-invalid-class = "error">
Pengubah
induk
Jika Vuerify terdaftar dengan komponen induk, maka Anda perlu menentukan induk sehingga arahan dapat memperoleh $ vuerify yang sesuai dari komponen induk. Untuk detailnya, lihat demo
Acara
vuerify-invalid
vuerify-valid
Github: https://github.com/qingwei-li/vuerrify