Vue.js ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন

ভিউজেএস (VueJS) - Web Development

200

Vue.js-এ ফর্ম হ্যান্ডলিং এবং ডেটা ভ্যালিডেশন একটি গুরুত্বপূর্ণ অংশ। Vue.js আপনাকে ইউজার ইনপুটের ডেটা সংগ্রহ, প্রসেস করা এবং সঠিকভাবে যাচাই (ভ্যালিডেট) করার সুবিধা প্রদান করে। এখানে, আমরা Vue.js-এ ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন নিয়ে বিস্তারিত আলোচনা করব।

১. Vue.js এ ফর্ম হ্যান্ডলিং

ফর্ম হ্যান্ডলিং একটি প্রক্রিয়া যেখানে ইউজার ইনপুট সংগ্রহ, প্রক্রিয়া এবং প্রদর্শন করা হয়। Vue.js-এ ফর্ম হ্যান্ডলিং খুবই সহজ এবং এটি ডেটা বাইন্ডিং (Data Binding) ব্যবহার করে ইনপুটের মানকে Vue ইনস্ট্যান্সের ডেটার সাথে যুক্ত করে।

ফর্ম ইনপুটের জন্য `v-model` ব্যবহার করা

Vue.js-এ ফর্ম ইনপুটের ডেটা বাইন্ডিং করার জন্য v-model ডিরেকটিভ ব্যবহার করা হয়। এটি ইনপুট, চেকবক্স, সিলেক্ট, টেক্সট এরিয়া ইত্যাদি ট্যাগের মানকে Vue ইনস্ট্যান্সের ডেটার সাথে যুক্ত করে।

উদাহরণ: ফর্ম ইনপুট

<div id="app">
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name" placeholder="Enter your name">

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" placeholder="Enter your email">

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

  <p>Name: {{ name }}</p>
  <p>Email: {{ email }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: '',
      email: ''
    },
    methods: {
      submitForm() {
        alert(`Name: ${this.name}, Email: ${this.email}`);
      }
    }
  });
</script>

এখানে, v-model ব্যবহার করে আমরা name এবং email ইনপুটের মান Vue ইনস্ট্যান্সের ডেটার সাথে যুক্ত করেছি। @submit.prevent="submitForm" ব্যবহার করে ফর্ম সাবমিট হলে পেজ রিফ্রেশ না হয়ে একটি মেথড কল হবে।

২. ফর্ম ভ্যালিডেশন

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

সাধারণ ইনপুট ভ্যালিডেশন

প্রথমে আমরা একটি সিম্পল কাস্টম ভ্যালিডেশন দেখব, যা নিশ্চিত করবে যে ফর্মের ইনপুট পূর্ণ এবং সঠিক ফরম্যাটে আছে।

<div id="app">
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name" :class="{'is-invalid': !isValidName}" placeholder="Enter your name">

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" :class="{'is-invalid': !isValidEmail}" placeholder="Enter your email">

    <button type="submit" :disabled="!formIsValid">Submit</button>
  </form>

  <p v-if="!isValidName">Name is required</p>
  <p v-if="!isValidEmail">Please enter a valid email</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: '',
      email: ''
    },
    computed: {
      isValidName() {
        return this.name.trim() !== '';
      },
      isValidEmail() {
        const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        return emailPattern.test(this.email);
      },
      formIsValid() {
        return this.isValidName && this.isValidEmail;
      }
    },
    methods: {
      submitForm() {
        alert(`Name: ${this.name}, Email: ${this.email}`);
      }
    }
  });
</script>

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

এখানে:

isValidName এবং isValidEmail কম্পিউটেড প্রপার্টি ব্যবহার করা হয়েছে, যা ইনপুটের ভ্যালিডেশন চেক করে।
ইনপুট ফিল্ডের পাশে is-invalid ক্লাস যোগ করা হয়েছে, যাতে ভ্যালিডেশন ফেইল হলে ইনপুট ফিল্ডে রেড বর্ডার দেখা যায়।
formIsValid কম্পিউটেড প্রপার্টি সব ফিল্ডের ভ্যালিডেশন চেক করে এবং সাবমিট বাটনটি নিষ্ক্রিয় বা সক্রিয় করে।

৩. Vue.js এ ভ্যালিডেশন লাইব্রেরি ব্যবহার

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

VeeValidate লাইব্রেরি উদাহরণ:

VeeValidate ইনস্টল করা:

npm install vee-validate

VeeValidate ব্যবহার করা:

<div id="app">
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name" v-validate="'required'" placeholder="Enter your name">
    <span>{{ errors.first('name') }}</span>

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email" v-validate="'required|email'" placeholder="Enter your email">
    <span>{{ errors.first('email') }}</span>

    <button type="submit" :disabled="!$validator.$invalid">Submit</button>
  </form>
</div>

<script>
  import { ValidationProvider, extend } from 'vee-validate';
  import { required, email } from 'vee-validate/dist/rules';

  // Add validation rules
  extend('required', required);
  extend('email', email);

  new Vue({
    el: '#app',
    data: {
      name: '',
      email: ''
    },
    methods: {
      submitForm() {
        alert(`Name: ${this.name}, Email: ${this.email}`);
      }
    }
  });
</script>

এখানে:

v-validate="'required'" ব্যবহার করে ফিল্ডগুলোর জন্য ভ্যালিডেশন রুল যোগ করা হয়েছে।
errors.first('name') এবং errors.first('email') দ্বারা ফর্মের ভুল ইনপুটের জন্য বার্তা দেখানো হচ্ছে।
!$validator.$invalid দ্বারা ফর্মের ভ্যালিডেশন স্টেট চেক করে সাবমিট বাটন নিষ্ক্রিয় করা হয়েছে।

সারাংশ

ফর্ম হ্যান্ডলিং: Vue.js এ v-model ব্যবহার করে ফর্ম ইনপুটের ডেটা বাইন্ডিং করা হয়, যা আপনাকে সহজে ইউজার ইনপুট সংগ্রহ এবং প্রক্রিয়া করতে সাহায্য করে।
ভ্যালিডেশন: Vue.js-এ ইনপুট ভ্যালিডেশন শর্তাধীন চেক এবং প্যাটার্ন মেচিং এর মাধ্যমে করা হয়। এছাড়া, VeeValidate এবং Vuelidate এর মতো লাইব্রেরি ব্যবহার করে উন্নত ভ্যালিডেশন ফিচার যোগ করা যায়।

Content added By

Azizar Rahman Aziz

v-model দিয়ে ফর্ম ডেটা বাইন্ডিং

214

Vue.js এ ফর্ম ডেটা বাইন্ডিং করা একটি সহজ এবং শক্তিশালী প্রক্রিয়া। Vue.js এর v-model ডিরেকটিভটি ফর্ম ইনপুট এলিমেন্টের (যেমন <input>, <textarea>, <select>) সাথে ডেটা বাইন্ডিং করার জন্য ব্যবহৃত হয়। এটি টু-ওয়ে ডেটা বাইন্ডিং বাস্তবায়ন করে, যার মানে হল যে যখন আপনি ইনপুট ফিল্ডে ডেটা পরিবর্তন করেন, তখন সেই পরিবর্তন Vue এর ডেটা প্রপার্টিতে প্রতিফলিত হয়, এবং বিপরীতভাবে, যখন ডেটা পরিবর্তন হয়, তখন ইনপুট ফিল্ডটি স্বয়ংক্রিয়ভাবে আপডেট হয়।

`v-model` এর কাজের ব্যাখ্যা

v-model ডিরেকটিভের মাধ্যমে আপনি একটি ফর্ম ইনপুট এবং Vue.js এর ডেটা প্রপার্টির মধ্যে বাইন্ডিং তৈরি করতে পারেন। এটি স্বয়ংক্রিয়ভাবে input, change ইভেন্টগুলো হ্যান্ডেল করে এবং ইনপুট ফিল্ডের মানকে Vue ইনস্ট্যান্সের ডেটার সাথে সিঙ্ক্রোনাইজ করে।

`v-model` এর মূল বৈশিষ্ট্য:

টু-ওয়ে ডেটা বাইন্ডিং: ইনপুট ফিল্ড এবং Vue ডেটার মধ্যে ডেটার আদান-প্রদান।
সরাসরি ইনপুট ফিল্ডের মান পরিবর্তন: যখন ডেটার মান পরিবর্তিত হয়, তখন ইনপুট ফিল্ড স্বয়ংক্রিয়ভাবে আপডেট হয়।
কম্পোনেন্টের মাধ্যমে ডেটা সিঙ্ক্রোনাইজেশন: কম্পোনেন্টের মধ্যে v-model ব্যবহার করে ডেটা প্রপার্টির মান পরিবর্তন এবং ইনপুট ফিল্ডের মানের মধ্যে সিঙ্ক্রোনাইজেশন করা হয়।

সাধারণ উদাহরণ: `v-model` দিয়ে ইনপুট ফিল্ডে ডেটা বাইন্ডিং

<div id="app">
  <label for="name">Name:</label>
  <input type="text" v-model="name">
  <p>Your name is: {{ name }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      name: ''
    }
  });
</script>

এখানে:

v-model="name" ব্যবহার করে ইনপুট ফিল্ডের সাথে name ডেটা প্রপার্টি বাইন্ড করা হয়েছে।
{{ name }} দ্বারা ডেটা পরিবর্তনের সাথে সাথে প্যারাগ্রাফে name এর মান দেখানো হচ্ছে।

যখন আপনি ইনপুট ফিল্ডে কিছু টাইপ করবেন, তখন name এর মান পরিবর্তিত হবে এবং তা স্বয়ংক্রিয়ভাবে <p> ট্যাগে দেখানো হবে। এটি টু-ওয়ে ডেটা বাইন্ডিং এর উদাহরণ।

`v-model` দিয়ে চেকবক্স, রেডিও বাটন, এবং সিলেক্ট ডেটা বাইন্ডিং

১. চেকবক্স (Checkbox)

চেকবক্সের সাথে v-model ব্যবহার করলে আপনি চেকবক্সের মান বা স্টেটকে Vue ডেটার সাথে বাইন্ড করতে পারেন।

<div id="app">
  <label>
    <input type="checkbox" v-model="isChecked">
    I agree to the terms and conditions
  </label>
  <p>Agreed: {{ isChecked }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isChecked: false
    }
  });
</script>

এখানে, isChecked ডেটা প্রপার্টি চেকবক্সের সাথে বাইন্ড করা হয়েছে। চেকবক্সের মান পরিবর্তন হলে, isChecked এর মান স্বয়ংক্রিয়ভাবে আপডেট হবে।

২. রেডিও বাটন (Radio Button)

রেডিও বাটন ব্যবহার করতে হলে, v-model এর মাধ্যমে আপনি একটি গোষ্ঠী (group) এর মধ্যে একক মান নির্বাচন করতে পারবেন।

<div id="app">
  <label>
    <input type="radio" v-model="picked" value="Apple">
    Apple
  </label>
  <label>
    <input type="radio" v-model="picked" value="Banana">
    Banana
  </label>
  <p>You picked: {{ picked }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      picked: 'Apple'
    }
  });
</script>

এখানে, picked ডেটা প্রপার্টি রেডিও বাটনের মধ্যে নির্বাচিত মান ধারণ করবে। আপনি "Apple" অথবা "Banana" নির্বাচন করলে, picked এর মান স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।

৩. সিলেক্ট (Select)

সিলেক্ট বক্সের সাথে v-model ব্যবহার করা হলে আপনি ড্রপডাউন থেকে নির্বাচন করা মান Vue ডেটার সাথে বাইন্ড করতে পারেন।

<div id="app">
  <label for="fruit">Select a fruit:</label>
  <select v-model="selectedFruit">
    <option disabled value="">Please select one</option>
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
  <p>You selected: {{ selectedFruit }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      selectedFruit: ''
    }
  });
</script>

এখানে, v-model="selectedFruit" সিলেক্ট বক্সের সাথে বাইন্ডিং করে, ফলে যখন আপনি একটি ফল নির্বাচন করবেন, তখন selectedFruit ডেটা প্রপার্টির মান স্বয়ংক্রিয়ভাবে আপডেট হবে।

`v-model` এবং কম্পোনেন্টের সাথে ব্যবহার

আপনি v-model ব্যবহার করে কাস্টম কম্পোনেন্টের সাথে ডেটা বাইন্ডিংও করতে পারেন। এটি সাধারণত কাস্টম ইনপুট ফিল্ড বা ফর্ম কম্পোনেন্টের জন্য ব্যবহৃত হয়।

কাস্টম কম্পোনেন্টের সাথে `v-model`

<div id="app">
  <custom-input v-model="customValue"></custom-input>
  <p>Custom Value: {{ customValue }}</p>
</div>

<script>
  Vue.component('custom-input', {
    template: '<input :value="value" @input="$emit(\'input\', $event.target.value)">',
    props: ['value']
  });

  new Vue({
    el: '#app',
    data: {
      customValue: ''
    }
  });
</script>

এখানে, v-model ব্যবহার করে কাস্টম ইনপুট কম্পোনেন্টের সাথে ডেটা বাইন্ড করা হয়েছে। input ইভেন্টের মাধ্যমে কাস্টম কম্পোনেন্টটি তার মানটি প্যারেন্ট কম্পোনেন্টের সাথে সিঙ্ক্রোনাইজ করে।

সারাংশ

v-model হল Vue.js এর একটি শক্তিশালী ডিরেকটিভ যা ফর্ম ইনপুট ফিল্ডের সাথে ডেটা বাইন্ডিংয়ের সুবিধা দেয়।
এটি টু-ওয়ে ডেটা বাইন্ডিং প্রদান করে, অর্থাৎ ইনপুট ফিল্ডে মান পরিবর্তন হলে Vue ডেটা প্রপার্টি আপডেট হয় এবং ডেটা পরিবর্তন হলে ইনপুট ফিল্ড আপডেট হয়।
v-model ইনপুট ফিল্ডের সাথে চেকবক্স, রেডিও বাটন, সিলেক্ট, এবং কাস্টম কম্পোনেন্টের সাথে সহজে কাজ করতে পারে।

Vue.js এর v-model ডিরেকটিভটি ফর্ম ডেটার সঙ্গে সহজে কাজ করতে সাহায্য করে, এবং এটি আপনার অ্যাপ্লিকেশন ডেভেলপমেন্টে অনেক সময় সাশ্রয়ী হতে পারে।

Content added By

Azizar Rahman Aziz

কাস্টম ইনপুট কম্পোনেন্টস

198

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

১. কাস্টম ইনপুট কম্পোনেন্ট তৈরি করা

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

কাস্টম ইনপুট কম্পোনেন্টের উদাহরণ:

<!-- CustomInput.vue -->
<template>
  <div>
    <label :for="id">{{ label }}</label>
    <input
      :type="type"
      :id="id"
      :value="value"
      @input="updateValue($event)"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    id: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value);  // Update parent component's data
    }
  }
};
</script>

<style scoped>
input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
}
label {
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}
</style>

এখানে একটি কাস্টম ইনপুট কম্পোনেন্ট তৈরি করা হয়েছে, যার মধ্যে:

label: ইনপুটের জন্য লেবেল।
value: ইনপুটের মান (ডেটা বাইন্ডিং এর মাধ্যমে প্যারেন্ট কম্পোনেন্টে পাঠানো হবে)।
type: ইনপুটের টাইপ (যেমন text, password ইত্যাদি)।
id: ইনপুটের ইউনিক আইডি।
placeholder: ইনপুট ফিল্ডের জন্য প্লেসহোল্ডার টেক্সট।

এটি প্যারেন্ট কম্পোনেন্টের সাথে ডেটা শেয়ার করতে v-model ব্যবহার করে। v-model স্বয়ংক্রিয়ভাবে ইনপুটের মানকে প্যারেন্ট কম্পোনেন্টের ডেটা প্রপার্টির সাথে বাইন্ড করে দেয়।

২. কাস্টম ইনপুট কম্পোনেন্ট ব্যবহার করা

এখন, আপনি এই কাস্টম ইনপুট কম্পোনেন্টকে অন্য কম্পোনেন্টে ব্যবহার করতে পারবেন। সাধারণত, Vue.js এ কাস্টম কম্পোনেন্টগুলোকে <CustomInput /> ট্যাগের মাধ্যমে ব্যবহার করা হয়।

কাস্টম ইনপুট কম্পোনেন্ট ব্যবহার করার উদাহরণ:

<template>
  <div>
    <h2>Registration Form</h2>
    <form @submit.prevent="submitForm">
      <CustomInput
        v-model="userData.name"
        label="Name"
        id="name"
        placeholder="Enter your name"
      />
      <CustomInput
        v-model="userData.email"
        label="Email"
        type="email"
        id="email"
        placeholder="Enter your email"
      />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';  // Import CustomInput component

export default {
  name: 'RegistrationForm',
  components: {
    CustomInput
  },
  data() {
    return {
      userData: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      console.log(this.userData);  // Handle form submission
    }
  }
};
</script>

এখানে, RegistrationForm কম্পোনেন্টে দুইটি কাস্টম ইনপুট কম্পোনেন্ট (CustomInput) ব্যবহার করা হয়েছে:

প্রথমটি name ফিল্ডের জন্য।
দ্বিতীয়টি email ফিল্ডের জন্য।

v-model ব্যবহার করে, কাস্টম ইনপুট কম্পোনেন্টের মধ্যে যেসব ডেটা আছে তা প্যারেন্ট কম্পোনেন্টে বাইন্ড করা হয়েছে। এর মাধ্যমে প্যারেন্ট কম্পোনেন্টে ডেটা আপডেট হবে যখন ইনপুটের মান পরিবর্তিত হবে।

৩. কাস্টম ইনপুটে ভ্যালিডেশন যোগ করা

Vue.js কম্পোনেন্টে ভ্যালিডেশন যোগ করার জন্য, আপনি প্যারেন্ট কম্পোনেন্টে ভ্যালিডেশন লজিক বা কাস্টম ইনপুট কম্পোনেন্টে সরাসরি কাস্টম ভ্যালিডেশন মেথড তৈরি করতে পারেন।

উদাহরণ: কাস্টম ইনপুটে ইমেইল ভ্যালিডেশন

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <input
      :type="type"
      :id="id"
      :value="value"
      @input="updateValue($event)"
      :placeholder="placeholder"
      :class="{'error': !isValid}"
    />
    <p v-if="!isValid" class="error-message">Please enter a valid email.</p>
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    label: {
      type: String,
      required: true
    },
    value: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    id: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  computed: {
    isValid() {
      // Email validation (only for email input type)
      if (this.type === 'email') {
        return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(this.value);
      }
      return true;
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value);
    }
  }
};
</script>

<style scoped>
input {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 100%;
}

input.error {
  border-color: red;
}

.error-message {
  color: red;
  font-size: 12px;
}
</style>

এখানে, CustomInput কম্পোনেন্টে ইমেইল ইনপুটের জন্য একটি ভ্যালিডেশন যোগ করা হয়েছে:

যখন ইনপুট টাইপ email হবে, তখন একটি সিম্পল ইমেইল প্যাটার্ন দ্বারা ইনপুটের মান যাচাই করা হবে।
যদি ইমেইল ইনপুট সঠিক না হয়, তাহলে এটি একটি error class যোগ করবে এবং একটি ত্রুটি বার্তা প্রদর্শন করবে।

সারাংশ

কাস্টম ইনপুট কম্পোনেন্ট: Vue.js এ কাস্টম ইনপুট কম্পোনেন্ট তৈরি করতে, আপনি props ব্যবহার করে ইনপুটের ডেটা গ্রহণ এবং v-model এর মাধ্যমে ডেটা বাইন্ডিং করতে পারেন।
কাস্টম স্টাইলিং এবং ভ্যালিডেশন: ইনপুট কম্পোনেন্টে কাস্টম স্টাইলিং এবং ভ্যালিডেশন যুক্ত করা যায়, যা ইউজার ইন্টারফেসকে আরো উন্নত ও কার্যকরী করে তোলে।
কাস্টম ইনপুট কম্পোনেন্ট পুনঃব্যবহারযোগ্য: একবার তৈরি করা কাস্টম ইনপুট কম্পোনেন্টকে বিভিন্ন স্থানে পুনঃব্যবহার করা যায়, ফলে কোডের পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা বাড়ে।

এভাবে Vue.js এ কাস্টম ইনপুট কম্পোনেন্ট তৈরি এবং ব্যবহার করা হয় যা ইউজার ইন্টারফেস উন্নত করে এবং ডেটার ফ্লেক্সিবিলিটি ও কাস্টমাইজেশন সহজ করে তোলে।

Content added By

Azizar Rahman Aziz

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

228

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
ইন্সটলেশন	সহজ এবং ছোট ইনস্টলেশন	কিছুটা বড় ইনস্টলেশন
ভ্যালিডেশন স্টাইল	প্রপার্টি ভিত্তিক, রিয়্যাক্টিভ	ফর্ম এবং ফিল্ড ভিত্তিক
ভ্যালিডেশন রুল	নিজস্ব এবং কাস্টম রুল তৈরির ক্ষমতা	ব্যাপক রুল এবং Yup সহ ইন্টিগ্রেশন
ডকুমেন্টেশন	সরল এবং সহজ, নতুনদের জন্য উপযুক্ত	শক্তিশালী এবং বিস্তৃত ডকুমেন্টেশন
উপযুক্ত ব্যবহার	ছোট এবং মাঝারি সাইজের অ্যাপ্লিকেশন	বড় এবং জটিল ফর্ম সিস্টেমে উপযুক্ত
প্লাগইন সাপোর্ট	কম প্লাগইন সাপোর্ট	ব্যাপক প্লাগইন সাপোর্ট (যেমন Tooltip, Auto Focus)

সারাংশ

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

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

Content added By

Azizar Rahman Aziz

সাবমিশন এবং ফর্ম ডেটা প্রোসেসিং

189

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

১. ফর্ম ইনপুট এবং ডেটা বাইন্ডিং

Vue.js দিয়ে ফর্ম ইনপুট হ্যান্ডলিং খুবই সহজ। আপনি Vue এর v-model ডিরেকটিভ ব্যবহার করে ইনপুট ফিল্ড এবং ডেটা প্রপার্টির মধ্যে দ্বি-মুখী ডেটা বাইন্ডিং করতে পারেন। এর মাধ্যমে ফর্মে ইউজারের ইনপুটের মান এবং Vue এর ডেটা একে অপরের সাথে সিঙ্ক্রোনাইজ থাকে।

ফর্ম ইনপুটের উদাহরণ:

<div id="app">
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="form.name" />

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="form.email" />

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

  <p>Form Data: {{ form }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          name: '',
          email: ''
        }
      };
    },
    methods: {
      submitForm() {
        console.log('Form submitted', this.form);
        // এখানে আপনি ফর্ম ডেটা প্রসেস বা API কল করতে পারেন
      }
    }
  });
</script>

এখানে:

v-model ডিরেকটিভের মাধ্যমে ইনপুট ফিল্ড form.name এবং form.email এর সাথে বাইন্ডিং করা হয়েছে।
@submit.prevent ডিরেকটিভটি সাবমিশন ইভেন্টটি রোধ করে এবং submitForm মেথডকে কল করে।

২. ফর্ম সাবমিশন

Vue.js এ ফর্ম সাবমিশন হ্যান্ডলিং করতে @submit.prevent ব্যবহার করা হয়, যাতে ডিফল্ট ফর্ম সাবমিশন আচরণ (যেমন পেজ রিফ্রেশ) রোধ করা যায়। আপনি এই সাবমিশন ইভেন্টকে একটি মেথডের সাথে সংযুক্ত করতে পারেন, যা ফর্ম ডেটা প্রোসেসিং করে বা API কল করে।

ফর্ম সাবমিশনের উদাহরণ:

<div id="app">
  <form @submit.prevent="submitForm">
    <label for="username">Username:</label>
    <input type="text" id="username" v-model="username" />

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

  <p v-if="submitted">Submitted Username: {{ username }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        username: '',
        submitted: false
      };
    },
    methods: {
      submitForm() {
        this.submitted = true;
        console.log('Username Submitted:', this.username);
      }
    }
  });
</script>

এখানে, submitForm মেথডটি ফর্ম ডেটা প্রসেস করে এবং submitted ভেরিয়েবলটিকে true করে দেয়, যা সাবমিশনের পর ইউজারের নাম প্রদর্শন করবে।

৩. ফর্ম ভ্যালিডেশন

Vue.js এ ফর্ম ভ্যালিডেশন করার জন্য আপনি বিভিন্ন মেথড ব্যবহার করতে পারেন। সাধারণত, আপনি সাবমিশনের সময় ফর্ম ইনপুটের মান পরীক্ষা করেন। এটি সহজেই v-model এবং v-if বা v-show এর সাথে যুক্ত করা যায়।

ভ্যালিডেশন উদাহরণ:

<div id="app">
  <form @submit.prevent="submitForm">
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="form.email" />
    <span v-if="!isValidEmail">Please enter a valid email.</span>

    <button type="submit" :disabled="!isValidEmail">Submit</button>
  </form>

  <p v-if="submitted">Form submitted with email: {{ form.email }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          email: ''
        },
        submitted: false
      };
    },
    computed: {
      isValidEmail() {
        // Simple email validation
        const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        return re.test(this.form.email);
      }
    },
    methods: {
      submitForm() {
        this.submitted = true;
        console.log('Form submitted with email:', this.form.email);
      }
    }
  });
</script>

এখানে:

isValidEmail কম্পিউটেড প্রপার্টি একটি সিম্পল ইমেইল ভ্যালিডেশন চেক করে।
v-if এর মাধ্যমে ইউজারকে একটি বার্তা দেখানো হচ্ছে যদি ইমেইল ঠিকমতো পূর্ণ না করা হয়।
সাবমিশন বাটনে :disabled বাউন্ড করা হয়েছে, যাতে ফর্ম সঠিকভাবে পূর্ণ না হলে সাবমিট করা না যায়।

৪. API কলের মাধ্যমে ফর্ম ডেটা সাবমিশন

Vue.js দিয়ে আপনি ফর্ম ডেটা API তে সাবমিট করতে পারেন। এটি সাধারণত axios বা fetch API ব্যবহার করে করা হয়। axios হল একটি জনপ্রিয় HTTP ক্লায়েন্ট, যা API কল করার জন্য ব্যবহৃত হয়।

API কলের উদাহরণ (Axios):

<div id="app">
  <form @submit.prevent="submitForm">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="form.name" />

    <label for="email">Email:</label>
    <input type="email" id="email" v-model="form.email" />

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

  <p v-if="submitted">Form Data Submitted!</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          name: '',
          email: ''
        },
        submitted: false
      };
    },
    methods: {
      submitForm() {
        axios.post('https://example.com/submit', this.form)
          .then(response => {
            console.log('Form Submitted:', response.data);
            this.submitted = true;
          })
          .catch(error => {
            console.error('Error submitting form:', error);
          });
      }
    }
  });
</script>

এখানে, axios.post এর মাধ্যমে ফর্ম ডেটা একটি API তে সাবমিট করা হচ্ছে। সার্ভার থেকে সফল প্রতিক্রিয়া আসলে submitted ভেরিয়েবলটিকে true করা হয়, এবং ইউজারকে একটি বার্তা দেখানো হয়।

সারাংশ

ফর্ম ডেটা বাইন্ডিং: Vue.js এর v-model ডিরেকটিভ ব্যবহার করে ইনপুট ফিল্ড এবং ডেটার মধ্যে দ্বিমুখী ডেটা বাইন্ডিং করা যায়।
ফর্ম সাবমিশন: @submit.prevent ব্যবহার করে ফর্ম সাবমিশন ইভেন্ট হ্যান্ডেল করা হয়, যাতে ডিফল্ট সাবমিশন আচরণ রোধ করা যায়।
ভ্যালিডেশন: কম্পিউটেড প্রপার্টি বা মেথডের মাধ্যমে ফর্ম ইনপুট যাচাই করা হয় এবং সঠিক তথ্য পেলে ফর্ম সাবমিট করা হয়।
API কল: ফর্ম ডেটা API তে সাবমিট করতে axios ব্যবহার করা হয়, যা HTTP রিকোয়েস্ট করার জন্য একটি জনপ্রিয় লাইব্রেরি।

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

Content added By

Azizar Rahman Aziz

Vue.js এর পরিচিতি Vue.js ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ Vue.js এর মৌলিক ধারণা Vue.js কম্পোনেন্টস Vue.js রাউটিং

Vue.js ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন

১. Vue.js এ ফর্ম হ্যান্ডলিং

ফর্ম ইনপুটের জন্য v-model ব্যবহার করা

উদাহরণ: ফর্ম ইনপুট

২. ফর্ম ভ্যালিডেশন

সাধারণ ইনপুট ভ্যালিডেশন

৩. Vue.js এ ভ্যালিডেশন লাইব্রেরি ব্যবহার

VeeValidate লাইব্রেরি উদাহরণ:

সারাংশ

v-model দিয়ে ফর্ম ডেটা বাইন্ডিং

v-model এর কাজের ব্যাখ্যা

v-model এর মূল বৈশিষ্ট্য:

সাধারণ উদাহরণ: v-model দিয়ে ইনপুট ফিল্ডে ডেটা বাইন্ডিং

v-model দিয়ে চেকবক্স, রেডিও বাটন, এবং সিলেক্ট ডেটা বাইন্ডিং

১. চেকবক্স (Checkbox)

২. রেডিও বাটন (Radio Button)

৩. সিলেক্ট (Select)

v-model এবং কম্পোনেন্টের সাথে ব্যবহার

কাস্টম কম্পোনেন্টের সাথে v-model

সারাংশ

কাস্টম ইনপুট কম্পোনেন্টস

১. কাস্টম ইনপুট কম্পোনেন্ট তৈরি করা

কাস্টম ইনপুট কম্পোনেন্টের উদাহরণ:

২. কাস্টম ইনপুট কম্পোনেন্ট ব্যবহার করা

কাস্টম ইনপুট কম্পোনেন্ট ব্যবহার করার উদাহরণ:

৩. কাস্টম ইনপুটে ভ্যালিডেশন যোগ করা

উদাহরণ: কাস্টম ইনপুটে ইমেইল ভ্যালিডেশন

সারাংশ

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

১. Vuelidate

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

Vuelidate এর উদাহরণ:

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

২. VeeValidate

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

VeeValidate এর উদাহরণ:

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

সারাংশ

সাবমিশন এবং ফর্ম ডেটা প্রোসেসিং

১. ফর্ম ইনপুট এবং ডেটা বাইন্ডিং

ফর্ম ইনপুটের উদাহরণ:

২. ফর্ম সাবমিশন

ফর্ম সাবমিশনের উদাহরণ:

৩. ফর্ম ভ্যালিডেশন

ভ্যালিডেশন উদাহরণ:

৪. API কলের মাধ্যমে ফর্ম ডেটা সাবমিশন

API কলের উদাহরণ (Axios):

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

ফর্ম ইনপুটের জন্য `v-model` ব্যবহার করা

`v-model` এর কাজের ব্যাখ্যা

`v-model` এর মূল বৈশিষ্ট্য:

সাধারণ উদাহরণ: `v-model` দিয়ে ইনপুট ফিল্ডে ডেটা বাইন্ডিং

`v-model` দিয়ে চেকবক্স, রেডিও বাটন, এবং সিলেক্ট ডেটা বাইন্ডিং

`v-model` এবং কম্পোনেন্টের সাথে ব্যবহার

কাস্টম কম্পোনেন্টের সাথে `v-model`