vee validate تنزيل - vee validate رمز المصدر

vee validate

شفرة المصدر الأخرى

v4.14.7

تنزيل

أشكال Vue غير مؤلمة

سمات

؟ سهل: التحقق من الصحة المألوفة وسهلة الإعداد
؟ ‍♀ مرنة: التحقق المتزامن أو غير متزامن أو على مستوى الحقل أو على مستوى النموذج
⚡ سريع: بناء أشكال أسرع أسرع مع واجهة برمجة التطبيقات البديهية وصلى البصمة
؟ الحد الأدنى: فقط يتعامل مع المخاوف المتعلقة بالشكل المعقد ، يمنحك السيطرة الكاملة على كل شيء آخر
؟ واجهة المستخدم اللاإرادية: يعمل مع عناصر HTML الأصلية أو مكونات مكتبة واجهة المستخدم المفضلة لديك
؟ تقدمي: يعمل سواء كنت تستخدم Vue.js كتحسين تدريجي أو في إعداد معقد
✅ قواعد مدمجة: LIB المصاحب مع 25+ قواعد تغطي معظم الاحتياجات في معظم تطبيقات الويب
I18N: 45+ لغات للقواعد المدمجة التي ساهم بها المطورين من جميع أنحاء العالم

ابدء

تثبيت

 # Install with yarn
yarn add vee-validate

# Install with npm
npm install vee-validate --save

دعم إصدار VUE

يدعم إصدار V4 الرئيسي Vue 3.x فقط ، للإصدارات السابقة من VUE ، تحقق من ما يلي الجدول

إصدار VUE	نسخة VEE-VADIDATION	رابط الوثائق
`2.x`	`2.x` أو `3.x`	V2 أو V3
`3.x`	`4.x`	v4

الاستخدام

يوفر Vee-Viancedidate أنمتين لدمج التحقق من صحة النموذج في تطبيقات Vue.js الخاصة بك.

تكوين API

أسرع طريقة لإنشاء نموذج وإدارة التحقق من الصحة والسلوك والقيم مع API التكوين.

قم بإنشاء النموذج الخاص بك مع useForm ثم استخدم defineField لإنشاء نموذج الحقل الخاص بك والدعائم/السمات handleSubmit لاستخدام القيم وإرسالها إلى واجهة برمجة التطبيقات.

 < script setup >
import { useForm } from ' vee-validate ' ;

// Validation, or use `yup` or `zod`
function required ( value ) {
  return value ? true : ' This field is required ' ;
}

// Create the form
const { defineField , handleSubmit , errors } = useForm ({
  validationSchema : {
    field : required,
  },
});

// Define fields
const [ field , fieldProps ] = defineField ( ' field ' );

// Submit handler
const onSubmit = handleSubmit ( values => {
  // Submit to API
  console . log (values);
});
</ script >

< template >
  < form @ submit = " onSubmit " >
    < input v-model = " field " v-bind = " fieldProps " />
    < span >{{ errors . field }}</ span >

    < button >Submit</ button >
  </ form >
</ template >

يمكنك أن تفعل أكثر من ذلك بكثير ، لمزيد من المعلومات ، تحقق من وثائق API التكوين.

مكونات التصريح

يمكن أيضًا استخدام المكونات ذات الترتيب الأعلى لبناء النماذج. قم بتسجيل مكونات Field Form وإنشاء مصلحة بسيطة required :

 < script setup >
import { Field , Form } from ' vee-validate ' ;

// Validation, or use `yup` or `zod`
function required ( value ) {
  return value ? true : ' This field is required ' ;
}

// Submit handler
function onSubmit ( values ) {
  // Submit to API
  console . log (values);
}
</ script >

< template >
  < Form v-slot = " { errors } " @ submit = " onSubmit " >
    < Field name = " field " : rules = " required " />

    < span >{{ errors . field }}</ span >

    < button >Submit</ button >
  </ Form >
</ template >