در حال بارگزاری ...

کتابخانه اعتبارسنجی فرم VeeValidate در Vue.Js

توسط مریم مهربان
آخرین به روز رسانی پنجشنبه 09 بهمن 1399

VeeValidate، یک کتابخانه عالی برای اعتبارسنجی فرم‌ها در Vue.Js است و استفاده از آن، اعتبارسنجی فرم‌ها در Vue.Js را خیلی ساده خواهد کرد.

این کتابخانه چند قانون دارد که به سادگی در فرم‌ها قابل پیاده سازی است. شما می‌توانید قوانین سفارشی شده را هم ایجاد کنید. همچنین، می‌توان از این کتابخانه به صورت محلی هم استفاده کرد و در حال حاضر 44 زبان را پشتیبانی می‌کند. این کتابخانه متن باز است و کد منبع آن در گیت هاب موجود است، در نتیجه می‌توانید از آن در پروژه‌های تجاری نیز استفاده کنید.

نصب کتابخانه VeeValidate

برای نصب کتابخانه VeeValidate، می‌توانید از دستور npm زیر استفاده کنید:

npm  install   vee-validate    --save

همچنین، می‌توانید آن را با استفاده از کتابخانه‌های CDN به پروژه خود وارد کنید:

 <!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vee-validate.js"></script>
<!-- cloudflair cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.min.js"></script>

 استفاده از کتابخانه VeeValidate

برای تعریف قوانین اعتبارسنجی برای هر یک از فیلدهای ورودی فرم، ابتدا باید یک ویژگی “name” برای آن تعریف کنید. کتابخانه VeeValidate، از این ویژگی برای تولید پیام خطا استفاده می‌کند. سپس، می‌توان از دستور “v-validate” برای مشخص کردن قانون اعتبارسنجی موردنظر استفاده کرد. برای مثال، در تکه کد زیر، “required|email” هر دو قانون اعتبارسنجی هستند.

 <input v-validate="'required|email'" name="email" type="text">

 برای ایجاد پیام خطا نیز ، باید تابع error.first را با نام ویژگی موردنظر (در اینجا “email”) فراخوانی کنید:

<span>{{ errors.first('email') }}</span>

 قوانین اعتبارسنجی‌ که در حال حاضر در این کتابخانه وجود دارند، عبارت است از:

  • after
  • alpha
  • alpha_dash
  • alpha_num
  • alpha_spaces
  • before
  • between
  • confirmed
  • credit_card
  • date_between
  • date_format
  • decimal
  • digits
  • dimensions
  • email
  • ext
  • image
  • included
  • integer
  • ip
  • is
  • is_not
  • length
  • max
  • max_value
  • mimes
  • min
  • min_value
  • excluded
  • numeric
  • regex
  • required
  • size
  • url

مقاله های بیشتر در لیداوب:

در این مقاله، درباره یکی از کتابخانه‌های Vue.Js توضیح دادیم که ما را در تعریف قوانین اعتبارسنجی کمک می‌کند. در سری مقاله‌های بعد، درباره این بسته بیشتر صحبت می‌کنیم. پس با ما در لیداوب همراه باشید.  

دیدگاه ها

دیدگاه ها : 0


متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

رایگان

اشتراک گذاری در
سورس خرید و فروش ارزهای دیجیتال
ثبت امتیاز
1 (2 رای)

   لطفا صبر کنید ...