Vuelidate

Vuelidate, Vue.js tabanlı web uygulamalarında kullanılabilecek bir doğrulama kütüphanesidir. Bu kütüphane, web uygulamalarının formlarında kullanılan verilerin doğruluğunu kontrol etmek için kullanılır.

Vuelidate, Vue.js ile uyumlu olduğu için, Vue.js tabanlı uygulamalarda kolayca kullanılabilir. Kullanıcıların girdiği verileri doğrulamak için birçok farklı doğrulama kuralı sağlar. Örneğin, girdilerin boş olmaması, girdilerin belirli bir uzunlukta olması, girdilerin belirli bir desene uyması gibi birçok doğrulama kuralı sağlanabilir.

Vuelidate, Vue.js bileşenlerinde kullanılan computed özelliklerine benzer şekilde çalışır. Bu sayede, doğrulama işlemleri otomatik olarak gerçekleştirilir ve doğrulama sonuçları bileşen içindeki diğer verileri günceller. Ayrıca, Vuelidate kullanarak özel doğrulama kuralları da oluşturulabilir.

Aşağıdaki örnek kodlar, Vuelidate kullanarak bir Vue.js bileşeni oluşturmanın basit bir örneğidir:

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <label for="name">Name:</label>
      <input id="name" v-model.trim="$v.name.$model" />
      <div v-if="!$v.name.required">Name is required</div>
    </div>
    <div>
      <label for="email">Email:</label>
      <input id="email" v-model.trim="$v.email.$model" />
      <div v-if="!$v.email.required">Email is required</div>
      <div v-if="!$v.email.email">Email is invalid</div>
    </div>
    <button type="submit" :disabled="$v.$invalid">Submit</button>
  </form>
</template>

<script>
import { required, email } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'

export default {
  name: 'Form',
  setup() {
    const state = {
      name: '',
      email: '',
    }

    const rules = {
      name: { required },
      email: { required, email },
    }

    const onSubmit = () => {
      console.log('Form submitted')
    }

    const v = useVuelidate(rules, state)

    return {
      onSubmit,
      ...v,
    }
  },
}
</script>

Bu örnekte, Vuelidate kullanarak bir form doğrulama bileşeni oluşturulur. state nesnesi, bileşende kullanılacak verileri içerir. rules nesnesi, verilerin doğruluğunu kontrol etmek için kullanılacak doğrulama kurallarını içerir.

useVuelidate hook’u kullanarak doğrulama işlevselliği sağlanır ve computed özellikleri gibi doğrulama sonuçları bileşen içindeki diğer verileri günceller