Vue JsYazılım

Vuelidate nedir? Vuelidate kullanımı

Vuelidate Nedir?

Vuelidate ile form içerisindeki verilerimizi, yazdığımız kurallara göre doğrulama işlemi yaparak gönderebiliriz. Böylelikle hem kullanıcılar için, hem de verilerin gideceği yer için kolaylık sağlamış oluruz. Bir proje oluşturup daha detaylı olarak inceliyor olacağız.

Proje basit bir kaydolma ekranı içeriyor. Belirli alanlara göre kuralları düzenleyeceğiz.

vuelidate nedir?

Kurulumlar

npm init vite@latest

bir vue projesi oluşturalım.

npm install @vuelidate/core @vuelidate/validators

projeyi oluşturduktan sonra vuelidate paketini kuralım.

Bazı Özellikler

required

required adından da anlaşılacağı üzere, bir input un zorunlu olduğu anlamına geliyor.

email

sadece email adresi geçerli.

minLength

input içerisindeki minimum karakter değerini belirtiyoruz. Buna ek olarak minValue de söylenebilir. minValue ile input içerisindeki değerin alabileceği en küçük değeri belirtiyoruz. Tam tersi işlem için maxLength-maxValue şeklinde kullanım mümkün.

sameAs

form içerisinde herhangi bir veri başka bir değer ile eşleşiyorsa sameAs kullanabiliriz. Biz bu örnekte checkbox şeklinde kullanıyor olacağız.

numeric

sadece rakam geçerli.

between

belirli aralık kullanmak istersek between kullanabiliriz.

Vuelidate Kullanımı

Oluşan proje içerisinde formumuzun olduğu yer içerisine vuelidate’ i aktaralım.vuelidate nedir?

Gönderilecek form aşağıdaki şekilde.
vuelidate nedir?

Şimdi de yukarıdaki form için kurallar yazalım.

vuelidate nedir?

useVuelidate kullanarak kurallar ve formlarımızı eşleştirdik. Bunu da user$ değişkenimize attık. Altında da register adında bir fonksiyon oluşturduk. Form içerisinde butona basıldığında bu fonksiyon tetiklenecek. Eşleştirdiğimiz değişkeni $validate() ile kontrol ediyor olacağız. Eğer tüm validasyon işlemleri başarıyla geçtiyse, true şeklinde yanıt alacağız.

vuelidate nedir?

Şimdi template içerisinde hataları gösterelim. Birkaç yöntemle hataları farklı şekilde gösteriyor olacağız.

    {{ user$.$errors }}
tüm hataları gösterir.

input içerisinde @input kullanırsak anında tetikleme yaşanır ve hatayı direkt görebiliriz. benzer bir kullanım @blur şeklinde. kullanıcı input tan ayrıldığı zaman hatayı gösterebiliriz.

vuelidate nedir?
Kendi hata mesajımızı da görüntüleyebiliriz. Eğer email için bir hata varsa ilgili mesaj gözüksün şeklinde kullanım mümkün.
vuelidate nedir?
Hata varsa class ile bilgilendirme.
vuelidate nedir?
Vuelidate kullanarak temelde form validasyonu işlemlerimizi bu şekilde düzenleyebiliriz.

Detaylı video anlatımı:

Projeye buradaki linkten ulaşabilirsiniz.
Daha fazla Vue Js
Etiketler: vue 3 vuelidate, vue validasyon, vue vuelidate, vuelidate kullanımı

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi yazın.

Bu yazıyı beğendin mi? Arkadaşlarınla paylaş!

Benzer içerikler: