Validasi Form Dengan Vue JS
Validasi adalah tugas yang sangat umum dalam aplikasi web. Memang, data perlu divalidasi sebelum mengirimkan formulir dan sebelum ditulis ke dalam database atau diteruskan ke layanan web.
Artikel ini membahas validasi formulir di Vue.js dan terutama tiga plugin yang melakukan tugas ini: Validator Vue Sederhana, VeeValidate dan Vuelidate.
Dengan membaca artikel ini, kita akan dapat menguji cuplikan kode berkat repositori github ini, sebuah proyek Vue.js sederhana yang dibuat dengan Vue.js resmi.
Dalam proyek ini, ada validasi untuk setiap plugin pada formulir pengguna klasik yang terdiri dari:
- Dua bidang teks wajib yang mewakili nama depan dan nama belakang pengguna dengan batasan panjang minimum
- Bidang email wajib
- Bidang tanggal lahir opsional
- Dua bidang wajib dengan batasan panjang untuk mengatur dan mengonfirmasi kata sandi
Untuk setiap plugin, akan ada penggunaan dasar menggunakan bidang surat yang diperlukan sebelumnya dan kemudian, perbandingan akan dibuat untuk menyoroti kelebihan dan kekurangan setiap plugin.
Validator Vue Sederhana
Simple Vue Validator adalah plugin Vue.js 2.0 yang memungkinkan untuk memvalidasi bidang input dan menampilkan kesalahan berkat solusi berbasis model untuk memantau input pengguna.
Instalasi dan konfigurasi
Pertama, instal paket melalui npm atau yarn.
npm install — save simple-vue-validator
yarn add simple-vue-validatorKemudian, tambahkan perpustakaan untuk mengaktifkannya secara global di aplikasi Vue.js.
// main.js
import Vue from ‘vue’;
import SimpleVueValidation from ‘simple-vue-validator’;Vue.use(SimpleVueValidation);Contoh validasi formulir
Untuk memvalidasi bidang email, mari pertimbangkan komponen tertentu bernama TestSimpleVueValidator.vue.
// TestSimpleVueValidator.vue
<template>
<div id="testSimpleVueValidator">
<form @submit.prevent="onSubmit()">
<div>
<label for="userMail">Mail</label>
<input id="userMail" v-model.trim="mail" :class="{error:
validation.hasError('mail'), valid: validation.isTouched('mail') && !validation.hasError('mail')}"/>
</div>
<div class="error" v-if="validation.hasError('mail')">
{{ validation.firstError('mail') }}
</div>
<button type="submit" :disabled=" validation.countErrors() > 0">Submit</button>
</form>
</div>
</template><script>
import { Validator } from 'simple-vue-validator';
export default {
name: 'TestSimpleVueValidator',
data() {
return {
mail: '',
};
},
validators: {
mail(value) {
return Validator.value(value).required().email();
},
},
methods: {
onSubmit() {
this.$validate()
.then((success) => {
if (success) {
// Do something
}
});
},
},
};
</script>Bagaimana cara kerja validasi formulir dengan Simple Vue Validator ?
Pertama, aturan validasi harus ditulis dalam objek validator, elemen yang berisi semua logika validasi. Setiap aturan perlu mengembalikan nilai boolean dan menggunakan kelas Validator yang disediakan oleh plugin. Seperti yang bisa kita lihat, ada aturan bawaan tetapi juga memungkinkan untuk menulis aturan khusus untuk logika yang lebih kompleks.
Kedua, kita harus menampilkan potensi kesalahan. Dengan menyediakan objek validator ke instance komponen kita, instance ValidationBag bernama validasi ditambahkan ke komponen kita. Berkat komponen ini, kita dapat menampilkan hasil validasi, mendeteksi jika input telah dibuat oleh pengguna, dll.
Terakhir, dengan cara yang sama, library menambahkan metode $validate ke instance komponen kita saat kita menyediakan objek validator ke komponen kita. Saat mengirimkan formulir kami, kami harus memanggil metode $validate untuk mengeksekusi semua validator untuk memastikan bahwa data sudah benar sebelum menggunakannya.
Untuk penggunaan yang lebih detail, lihat komponen TestSimpleVueValidator.
Validasi Vee
VeeValidate adalah plugin untuk Vue.js, terinspirasi oleh sintaks validasi PHP Framework Laravel, yang memungkinkan untuk memvalidasi bidang input dan menampilkan kesalahan dengan menyuntikkan aturan validasi langsung ke HTML.
Instalasi dan konfigurasi
Pertama, instal paket melalui npm atau yarn.
npm install — save simple-vee-validate
yarn add simple-vee-validateKemudian, tambahkan perpustakaan untuk mengaktifkannya secara global di aplikasi Vue.js. Dimungkinkan juga untuk memperluas perpustakaan dengan aturan khusus atau dengan pesan validasi kami sendiri.
// main.js
import Vue from ‘vue’;
import VeeValidate from ‘vee-validate’;Vue.use(VeeValidate);// Extends VeeValidate with custom rules if neededContoh validasi formulir
Untuk memvalidasi bidang email, mari pertimbangkan komponen tertentu bernama TestVeeValidate.vue.
// TestVeeValidate.vue
<template>
<div id="testVeeValidate">
<form @submit.prevent="onSubmit()">
<div>
<label for="userMail">Mail</label>
<input id="userMail" name="mail" v-model.trim="mail" v-validate="'required|email'" :class="{error: errors.has('mail'), valid: !errors.has('mail') && fields['mail'].dirty}"/>
</div>
<div class="error" v-if="errors.has('mail')">
{{ errors.first('mail') }}
</div> <button type="submit" :disabled="errors.any()">Submit</button>
</div>
</template><script>
export default {
name: 'TestVeeValidate',
data() {
return {
mail: '',
};
},
methods: {
onSubmit() {
this.$validator.validateAll()
.then((success) => {
if (success) {
if (this.$validator.errors.any()) return;
// Do something
}
});
},
},
};
</script>Bagaimana cara kerja validasi formulir dengan WeeValidate ?
Dengan VeeValidate, direktif v-validate adalah cara utama untuk memvalidasi input. Arahan ini menerima string atau objek yang berisi properti aturan untuk digunakan sebagai nilai. Sekitar 30 aturan yang disediakan oleh plugin dapat digunakan dengan meneruskan string ke direktif tetapi juga diperbolehkan untuk membuat aturan khusus.
Dengan menggunakan VeeValidate, plugin menambah instance Vue Anda dengan objek validator pribadi dan objek data kesalahan publik. Dengan demikian, kami bertanggung jawab atas bagaimana kesalahan harus ditampilkan kepada pengguna. Objek error memperlihatkan metode sederhana untuk membantu Anda merender kesalahan seperti `has('field')` untuk memeriksa apakah ada kesalahan dan `first('field')` untuk mendapatkan pesan kesalahan pertama yang terkait dengan bidang tersebut. Selanjutnya, pesan default untuk aturan bawaan juga dapat diganti dengan yang khusus.
Terakhir, untuk memvalidasi input dan memeriksa apakah masih ada kesalahan, kita dapat dengan mudah menggunakan `$validator`, yang secara otomatis dimasukkan ke dalam instance Vue, dan nilai dapat divalidasi dengan metode `validate(field, value)` yang mengembalikan janji yang menyelesaikan ke boolean. Anda juga dapat memvalidasi beberapa nilai secara bersamaan menggunakan metode `validateAll`.
Untuk melangkah lebih jauh, lihat komponen TestVeeValidate.
Vueldate
Vuelidate adalah validasi berbasis model ringan untuk Vue.js.
Instalasi dan konfigurasi
Pertama, instal paket melalui npm atau yarn.
npm install — save simple-vuelidate
yarn add simple-vuelidateKemudian, tambahkan perpustakaan untuk mengaktifkannya secara global di aplikasi Vue.js.
// main.js
import Vue from ‘vue’;
import Vuelidate from ‘vuelidate’;Vue.use(Vuelidate);Contoh validasi formulir
Untuk memvalidasi bidang email, mari pertimbangkan komponen tertentu bernama TestVuelidate.vue.
// TestVuelidate.vue
<template>
<div id="testVuelidate">
<form @submit.prevent="onSubmit()">
<div>
<label for="userMail">Mail</label>
<input id="userMail" v-model.trim="mail" @input="$v.mail.$touch" :class="{error: $v.mail.$error, valid: $v.mail.$dirty && !$v.mail.$invalid}"/>
</div>
<div class="error" v-if="$v.mail.$dirty && !$v.mail.required">
Mail is required
</div>
<div class="error" v-if="$v.mail.$dirty && !$v.mail.email">
Mail is not valid
</div> <button type="submit" :disabled="$v.$invalid">Submit</button>
</form>
</div>
</template><script>
import { required, email } from 'vuelidate/lib/validators'; export default {
name: 'TestVuelidate',
data() {
return {
mail: '',
};
},
validations: {
mail: {
required,
email,
},
},
methods: {
onSubmit() {
if (this.$v.$invalid) return;
// Do something
},
},
};
</script>Bagaimana cara kerja validasi formulir dengan Vuelidate ?
Ada dua struktur berbeda yang ada di Vuelidate:
- opsi komponen validasi untuk menentukan seluruh validasi formulir
- $v structure, sebuah objek dalam viewmodel kita yang memegang status validasi
Untuk setiap nilai yang perlu divalidasi, kita harus membuat kunci di dalam opsi validasi dengan aturan tertentu. Vuelidate hadir dengan satu set validator bawaan yang bisa kita butuhkan dan gunakan, tetapi kita dapat dengan mudah menulis validator khusus dan menggabungkannya dengan validator bawaan.
Kemudian, kita dapat menampilkan kesalahan dengan menggunakan model $v yang mewakili status validasi saat ini. Pesan kesalahan tidak disediakan oleh plugin untuk memungkinkan kami memilih cara kami merendernya.
Dengan model $v, kita dapat mengakses status validasi saat ini untuk bidang tertentu tetapi juga memeriksa validitas seluruh formulir. Dengan demikian, saat mengirimkan formulir kami, kami dapat memastikan bahwa data sudah benar dan siap digunakan.
Untuk melihat contoh yang lebih kompleks, buka dan lihat komponen TestVuelidate.
Perbandingan
Perbandingan antara ketiga plugin berikut ini tidak dimaksudkan untuk menentukan mana yang perlu digunakan tetapi untuk memberikan informasi yang cukup untuk membantu mengidentifikasi plugin yang paling tepat untuk digunakan.
Setiap plugin memiliki dokumentasi dukungan yang baik dan mudah digunakan, tetapi saya percaya bahwa VeeValidate adalah yang paling jelas dengan banyak contoh tentang cara menggunakan setiap fitur.
Beberapa nomor
Semua plugin ini dipelihara dengan benar karena fitur baru datang secara teratur — antara tiga dan enam bulan.
VeeValidate tampaknya menjadi plugin yang lebih populer dengan lebih dari 5.000 bintang di Github dan lebih dari 40.000 unduhan mingguan di npm saat posting ini ditulis.
Vuelidate juga sangat digunakan dengan lebih dari 20.000 unduhan mingguan di npm dan lebih dari 2.500 bintang di Github.
Terakhir, Simple Vue Validator hanya memiliki sekitar 200 bintang di Github dan diunduh sekitar 1.000 kali setiap minggu di npm.
Aturan bawaan dan khusus
VeeValidate hadir dengan 34 aturan validasi melawan sekitar 20 untuk Simple Vue Validator dan Vuelidate. Sebagian besar aturan ini mengizinkan validasi klasik pada angka atau string, tetapi kita dapat melihat bahwa Simple Vue Validator tidak menyediakan aturan apa pun untuk validasi tanggal.
Setiap plugin memungkinkan penggunaan untuk membuat aturan khusus atau memperluas yang sudah ada dengan memperbarui terjemahan misalnya. Manajemen pelokalan hanya dimungkinkan dengan VeeValidate berkat jangkauan lebih dari 40 lokal yang didukung sedangkan Simple Vue Validator hanya menyediakan pesan kesalahan bahasa Inggris.
Vuelidate tidak mengelola terjemahan karena tidak memberikan pesan kesalahan bawaan. Oleh karena itu, pengguna harus mengelola terjemahan dengan cara tradisional.
Lebih banyak fitur
Simple Vue Validator, VeeValidate, dan Vuelidate memungkinkan validasi asinkron untuk bekerja dengan janji dan juga memungkinkan untuk membuat validasi tertunda.
Untuk meningkatkan pengalaman pengguna, setiap plugin menyediakan sekitar sepuluh flag untuk menyesuaikan render komponen, tetapi saya yakin bahwa VeeValidate lebih mudah digunakan.
Kesimpulan
Jika Anda memiliki pertanyaan lain terkait Vue.js, jangan ragu untuk berkomentar di bawah, dan kami akan mencoba yang terbaik untuk menjawab dengan cepat dan jika Anda tertarik dengan artikel lain tentang Vue.js, pastikan untuk memberi tahu kami!