💎امروز میخام باهم بررسی کنیم که Vuelidate چیه؟؟

⭐️‏Vuelidate یه کتابخونه اعتبارسنجی برای Vue.js هست که به برنامه‌نویس‌ها کمک می‌کنه راحت‌تر و بهتر فرم‌ها رو اعتبارسنجی کنن. این کتابخونه بر اساس ایده‌های اعتبارسنجی پویا ساخته شده و از قابلیت‌های Vue.js به خوبی استفاده می‌کنه. حالا یه توضیح ساده درباره ویژگی‌ها و کاربردهای Vuelidate:

ویژگی‌های Vuelidate
پویا بودن: اعتبارسنجی‌ها خودشون با تغییرات داده‌ها به‌روز می‌شن.
ترکیب‌پذیری: می‌تونی اعتبارسنجی‌های مختلف رو با هم ترکیب کنی و اعتبارسنجی‌های پیچیده‌تر بسازی.
سادگی استفاده: اضافه کردن اعتبارسنجی‌ها به فرم‌ها و داده‌های Vue.js خیلی آسونه.
همکاری با Vuex: راحت می‌تونی Vuelidate رو با Vuex ترکیب کنی و مدیریت اعتبارسنجی‌ها رو در سطح برنامه انجام بدی.

یه مثال کوچیک هم از کاربردش همین پایین براتون میزارم که ببینین چقدر قشنگ میتونین ولیدیشن های مختلفی باهاش انجام بدین و خودتونو از هزارتا شرط خلاص کنین👇👇👇


#vuelidate #validation #vue
☕️ @CodeExplore

ادامه پست بالا👆👆
این کد برای ولیدیشن کردن یه اینپوت پسورده که البته یکی از راه های ولیدیشن کردن با Vuelidate هستش و کلی راه دیگه هم داره

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="password">Password</label>
        <input id="password" v-model="form.password" type="password"/>
        <span v-if="!$v.form.password.$pending && !$v.form.password.required">Password is required</span>
        <span v-if="!$v.form.password.$pending && !$v.form.password.minLength">Password must be at least 6 characters long</span>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required, minLength } from '@vuelidate/validators'

const form = reactive({
  password: ''
})

const rules = {
  form: {
    password: { required, minLength: minLength(6) }
  }
}

const v$ = useVuelidate(rules, form)

const submitForm = () => {
  v$.value.$touch()
  if (!v$.value.$invalid) {
    // فرم معتبر است، عملیات ارسال را اینجا انجام دهید
    console.log('Form submitted', form)
  }
}
</script>

#vuelidate #validation #vue
☕️ @CodeExplore