ফর্ম ভ্যালিডেশন (Vuelidate, VeeValidate)

Vue.js এ ফর্ম ভ্যালিডেশন একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যা ইউজারের ইনপুট যাচাই করার জন্য ব্যবহৃত হয়। ফর্ম ভ্যালিডেশনের জন্য Vuelidate এবং VeeValidate দুটি জনপ্রিয় লাইব্রেরি রয়েছে, যা খুব সহজেই Vue.js অ্যাপ্লিকেশনে ফর্ম ভ্যালিডেশন ইমপ্লিমেন্ট করতে সাহায্য করে। এই দুটি লাইব্রেরির ব্যবহার এবং বৈশিষ্ট্য নিয়ে বিস্তারিত আলোচনা করা হলো।

১. Vuelidate

Vuelidate একটি ছোট, প্রপার্টি ভিত্তিক, এবং অরিজিনাল Vue.js ভ্যালিডেশন লাইব্রেরি যা আপনাকে সহজে ভ্যালিডেশন ম্যানেজ করার জন্য ব্যবহৃত হয়। এটি একটি রিয়্যাক্টিভ ফর্ম ভ্যালিডেশন সিস্টেম প্রদান করে, যেখানে আপনি প্রপার্টি ভিত্তিক ভ্যালিডেশন রুল সেট করতে পারেন।

Vuelidate এর ইন্সটলেশন:

Vuelidate ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

npm install @vuelidate/core

Vuelidate এর উদাহরণ:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import useVuelidate from '@vuelidate/core'

const app = createApp(App)
app.use(useVuelidate)
app.mount('#app')

ফর্ম কম্পোনেন্টে Vuelidate ব্যবহার করা:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" :class="{'is-invalid': !$v.username.$pending && !$v.username.$model}">
      <span v-if="!$v.username.$pending && !$v.username.$model">Username is required</span>
      <button type="submit" :disabled="$v.$invalid">Submit</button>
    </form>
  </div>
</template>

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

export default {
  data() {
    return {
      username: ''
    }
  },
  validations() {
    return {
      username: { $model: required }
    }
  },
  setup() {
    const $v = useVuelidate()
    return { $v }
  },
  methods: {
    submitForm() {
      if (!this.$v.$invalid) {
        alert('Form submitted!')
      }
    }
  }
}
</script>

<style>
.is-invalid {
  border-color: red;
}
</style>

এখানে:

• required একটি ভ্যালিডেশন রুল যা যাচাই করে যে ইনপুট ফিল্ডে কোনো মান দেওয়া হয়েছে কিনা।
• v-model এর মাধ্যমে ইনপুটের মান ডেটাতে বাইন্ড করা হয়েছে।
• useVuelidate() হুকের মাধ্যমে ভ্যালিডেশন রুলটি ব্যবহৃত হচ্ছে।

২. VeeValidate

VeeValidate একটি শক্তিশালী এবং ব্যাপকভাবে ব্যবহৃত ফর্ম ভ্যালিডেশন লাইব্রেরি। এটি অনেক ভ্যালিডেশন রুল এবং পদ্ধতি সরবরাহ করে এবং খুব সহজে Vue.js অ্যাপ্লিকেশনে ফর্ম ভ্যালিডেশন ইমপ্লিমেন্ট করতে সাহায্য করে।

VeeValidate এর ইন্সটলেশন:

VeeValidate ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

npm install vee-validate

VeeValidate এর উদাহরণ:

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="email">Email</label>
      <input id="email" v-model="email" type="email" name="email" v-validate="'required|email'" />
      <span>{{ errors.first('email') }}</span>
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { useForm, useField } from 'vee-validate'
import * as yup from 'yup'

export default {
  setup() {
    const { handleSubmit, resetForm } = useForm()
    const { value: email, errorMessage, handleBlur } = useField(
      'email',
      yup.string().email().required('Email is required')
    )

    const submitForm = handleSubmit((values) => {
      alert('Form submitted!')
      resetForm()
    })

    return { email, errorMessage, handleBlur, submitForm }
  }
}
</script>

<style>
input:invalid {
  border-color: red;
}
</style>

এখানে:

• Yup: ভ্যালিডেশন রুলের জন্য একটি জনপ্রিয় লাইব্রেরি যা vee-validate এর সাথে ইন্টিগ্রেট করা হয়েছে।
• v-validate দিয়ে ইনপুট ফিল্ডের জন্য ভ্যালিডেশন রুল নির্ধারণ করা হয়েছে।
• useForm এবং useField হুক ব্যবহার করে ফর্ম এবং ইনপুট ফিল্ডে ভ্যালিডেশন অ্যাপ্লাই করা হয়েছে।

৩. Vuelidate এবং VeeValidate এর তুলনা

সারাংশ

• Vuelidate ছোট এবং প্রপার্টি ভিত্তিক ফর্ম ভ্যালিডেশন পরিচালনা করে, এটি সাধারণত ছোট বা মাঝারি সাইজের প্রোজেক্টের জন্য উপযুক্ত।
• VeeValidate একটি শক্তিশালী এবং বিস্তৃত লাইব্রেরি, যা বড় এবং জটিল ফর্ম সিস্টেমের জন্য উপযুক্ত। এটি বেশ কিছু বিল্ট-ইন ভ্যালিডেশন রুল এবং প্লাগইন সমর্থন করে।

উভয় লাইব্রেরিই Vue.js এর ফর্ম ভ্যালিডেশন সহজ এবং কার্যকরী করতে সাহায্য করে, তবে আপনার প্রোজেক্টের প্রয়োজন অনুসারে যেকোনো একটি নির্বাচন করা যেতে পারে।