التحقق من صحة النموذج في Vue.js

مرحبا يا هبر!

التحقق من صحة النموذج هو واحد من أهم المهام على الموقع. يتعين علينا التحقق من صحة البيانات من أجل التواجد ، لمطابقة النمط ، وإنشاء عمليات تحقق غير متزامنة ، وتطبيق عمليات التحقق من الصحة فقط بعد إزالة التركيز من الحقل أو قبل إرسال النموذج ... في بعض الأحيان يصبح هذا صداعًا حقيقيًا للمطور.

يحتوي Vue.js على العديد من الأساليب المثيرة للاهتمام وغير العادية في التحقق من الصحة والتي ستساعد في حل مشاكلك. نظرة عامة تحت خفض!

TL ؛ د

استخدام Vuelidate .

الأخطاء الشائعة

التحقق من صحة HTML5

أتاح HTML5 للمطورين القدرة على التحقق من صحة النماذج باستخدام سمات الحقل الجديدة وواجهة برمجة تطبيقات التحقق من الصحة . يمكننا استخدامها مباشرة في قوالب vue لدينا.

هنا ، على سبيل المثال ، نموذج تسجيل بسيط يتكون من ثلاثة حقول: حقول للبريد الإلكتروني ، لإعادة كلمة المرور وكلمة المرور. بالنسبة إلى الأولين ، نستخدم عمليات التحقق من الصحة باستخدام السمات ، والثالث - باستخدام السمات وواجهة برمجة تطبيقات التحقق من الصحة:

<template> <form @submit.prevent="someAction()"> <input v-model="email" type="email" required> <input v-model="password" type="password" required> <input v-model="repeatedPassword" type="password" required ref="repeatedPasswordEl"> <button type="submit">   </button> </form> </template> <script> export default { data() { return { email: null, password: null, repeatedPassword: null, }; }, watch: { repeatedPassword: 'checkPasswordsEquality', password: 'checkPasswordsEquality', }, methods: { checkPasswordsEquality() { const { password, repeatedPassword } = this; const { repeatedPasswordEl } = this.$refs; if (password !== repeatedPassword) { repeatedPasswordEl.setCustomValidity( '  ', ); } else { repeatedPasswordEl.setCustomValidity(''); } }, }, }; </script> 

رمل مع مثال

حتى في مثل هذا المثال البسيط ، يمكنك رؤية العديد من المشكلات:

• تظهر المتصفحات خطأ واحد فقط في كل مرة. سيتعين على المستخدم محاولة إرسال النموذج عدة مرات لرؤية كل أخطائه.
• يتم عرض الأخطاء للمستخدم فقط بعد محاولة إرسال النموذج. لتغيير هذا السلوك ، يجب عليك كتابة طن آخر من التعليمات البرمجية: استدعاء دالة reportValidity () على كل عنصر في الحدث الضبابي.
• بالنسبة إلى حقول إدخال التصميم ، لا يوجد سوى فئات زائفة: صالحة و: غير صالحة ، لا توجد طريقة لالتقاط حالة عندما تكون البيانات في حقل الإدخال غير صحيحة ، ولكن المستخدم لم يتفاعل معها بعد.
• يعرض كل مستعرض أخطاء التحقق من الصحة بطريقته الخاصة ، وقد يبدو الأمر قبيحًا في التصميم الخاص بك.
• واجهة برمجة تطبيقات التحقق من الصحة في Vue.js غير ملائمة للاستخدام: عليك حفظ العناصر في $ refs.

إذا كان لديك نموذج واحد فقط في المشروع ، ولا تستخدمه إلا أنت ، فإن التحقق من HTML5 يعد اختيارًا ممتازًا. في جميع الحالات الأخرى ، حاول استخدام الأساليب الأخرى.

عمليات التحقق من المكتبة

مشكلة شائعة أخرى أواجهها في المشاريع هي التحقق من صحة المكتبة.

 <template> <form @submit.prevent="someAction()"> <input v-model="email" type="email" @blur="isEmailTouched = true" :class="{ error: isEmailError }" > <div v-if="isEmailError">    </div> <button :disabled="!isEmailValid" type="submit">   </button> </form> </template> <script> const emailCheckRegex = /^... RegExp   Email...$/; export default { data() { return { email: null, isEmailTouched: false, }; }, computed: { isEmailValid() { return emailCheckRegex.test(this.email); }, isEmailError() { return !this.isEmailValid && this.isEmailTouched; }, }, }; </script> 

رمل مع مثال

لا توجد مشكلة مع هذا النهج. باستثناء ذلك في النماذج التي تحتوي على أكثر من حقل واحد ، يتم إنشاء الكثير من التعليمات البرمجية المتكررة ، ويقوم كل مطور بكتابة عمليات التحقق بطريقته الخاصة.

أفضل طريقة للخروج من جميع المشاكل هي استخدام المكتبات التي يقدمها لنا المجتمع. يوجد حاليًا حلول التحقق من صحة النماذج الشائعة:

• التحقق من صحة vee ( جيثب ، وثائق )
• Vuelidate ( GitHub ، وثائق )

لكل منها منهجها الفريد الذي سننظر فيه بالتفصيل أدناه.

VEE-التحقق من صحة

vee-validate - مكتبة للتحقق من صحة التي ظهرت خلال الإصدار الأول من Vue.js ، لديها مجتمع كبير ويستخدم في عدد كبير من المشاريع.

يؤثر العمر على الوزن - 31 كيلو بايت (مصغر + GZIP) ، مرة ونصف أكثر من Vue.js نفسه! هذا يرجع إلى حقيقة أن المكتبة تحتوي على الفور مجموعة من الأشياء:

• 35 المدمج في المصادقة
• الترجمة الإنجليزية للأخطاء
• توجيهات التحقق من الصحة
• مكونات التحقق من الصحة

تدعم المكتبة 41 لغة للأخطاء. لتثبيته واستخدامه مع الترجمة المطلوبة ، تحتاج إلى تنفيذ بضع خطوات فقط:

 npm i vee-validate 

 /* main.js */ import Vue from 'vue'; import VeeValidate, { Validator } from 'vee-validate'; import ru from 'vee-validate/dist/locale/ru'; Validator.localize('ru', ru); Vue.use(VeeValidate, { locale: 'ru', }); /* ... */ 

التحقق من صحة Vee له طريقتان للتحقق: استخدام التوجيه واستخدام المكونات.

التحقق من صحة مع توجيه التحقق من صحة الخامس

الطريقة التي تتبع بها التوجيه بسيطة للغاية: يمكنك وضع توجيه التحقق من صحة v في حقل الإدخال ، والذي يمكنك تمرير قائمة المدققين إليه. يمكن بعد ذلك الحصول على حالة التحقق من الصحة وخطوط الخطأ من حقول الحقول والأخطاء داخل المكون.

لرؤية استخدامه كمثال ، فلنعد شكلاً بسيطًا:

- يحتوي على حقل "السلسلة ورقم جواز السفر"
- يحتوي على حقل "تاريخ إصدار جواز السفر"
- يحتوي على حقل "الاسم"
- يضيف السمة المعطلة إلى زر إرسال النموذج إذا كانت البيانات غير صحيحة

 <template> <form @submit.prevent="someAction()"> <div> <!--             data-vv-as -          name -      --> <input type="text" v-model="passportData" v-validate="{ required: true, regex: /^\d{4} \d{6}$/ }" data-vv-as="   " name="passport_data" > <span v-if="errors.has('passport_data')"> {{ errors.first('passport_data') }} </span> </div> <div> <!--           .      v-model- lazy     fields.passport_date  invalid  ,       touched ,      blur --> <input type="text" v-model.lazy="passportDate" v-validate="{ required: true, date_format: 'dd.MM.yyyy' }" data-vv-as="  " name="passport_date" > <span v-if="fields.passport_date && fields.passport_date.touched && fields.passport_date.invalid" > {{ errors.first('passport_date') }} </span> </div> <div> <!--       ,    continues   errors.collect() --> <input type="text" v-model="name" v-validate.continues="{ required: true, alpha: true, max: 10 }" data-vv-as="" name="name" > <span v-for="error in errors.collect('name')" :key="error" > {{ error }} </span> </div> <button type="submit" :disabled="!isFormValid" >   </button> </form> </template> <script> export default { data() { return { passportData: null, name: null, passportDate: null, }; }, computed: { // ,      isFormValid () { return Object.keys(this.fields).every(field => this.fields[field].valid); }, }, }; </script> 

رمل مع مثال

كما ترون ، عند استخدام العلامات الموجودة داخل الحقول. للتخلص من هذا الاختيار ، استخدم مساعد mapFields الخاص.

التحقق من صحة المكونات

طريقة التحقق الجديدة التي ظهرت في نهاية العام الماضي هي استخدام المكونات. يوصي المؤلفون أنفسهم باستخدام هذا النهج ، وهو يسير على ما يرام مع بناء جملة الفتحة الجديدة من Vue.js@2.6.

توفر المكتبة عنصرين:

• ValidationProvider - مكون تصف فيه عمليات التحقق والتي تقوم بلف حقل الإدخال بها.
• ValidationObserver - مكون يجمع بين علامات التحقق من الصحة لعدة ValidationProviders.

فيما يلي نموذج من مثال سابق ، ولكنه مكتوب باستخدام مكونات:

 <template> <!-- ValidationObserver      .      valid      --> <ValidationObserver v-slot="{ valid }"> <form @submit.prevent="doAction()"> <!-- ValidationProvider                 name - ,      --> <ValidationProvider name="   " :rules="{ required: true, regex: /^\d{4} \d{6}$/ }" v-slot="{ errors }" > <input type="text" v-model="passportData"> <span v-if="errors[0]"> {{ errors[0] }} </span> </ValidationProvider> <!--         input,    blur  change  mode="lazy"  mode="eager" --> <ValidationProvider name="  " :rules="{ required: true, date_format: 'dd.MM.yyyy' }" v-slot="{ errors }" mode="lazy" > <input type="text" v-model="passportDate"> <span v-if="errors[0]"> {{ errors[0] }} </span> </ValidationProvider> <!--       ,     :bails="false" --> <ValidationProvider name="" :rules="{ required: true, alpha: true, max: 10 }" v-slot="{ errors }" :bails="false" > <input type="text" v-model="name"> <span v-for="error in errors" :key="error" > {{ error }} </span> </ValidationProvider> <button type="submit" :disabled="!valid">   </button> </form> </ValidationObserver> </template> <script> import { ValidationProvider, ValidationObserver } from 'vee-validate'; export default { components: { ValidationProvider, ValidationObserver, }, data() { return { passportData: null, passportDate: null, name: null, }; }, }; </script> 

رمل مع مثال

ميزات المكتبة الأخرى

• التكامل مع VueI18n
• إضافة فئات السيارات للتصميم
• دعم ل: صالحة و: invlaid الطبقات الزائفة
• دعم لسمات aria- *
• دعم سمة HTML5 للتحقق من الصحة
• إنشاء أجهزة تحقق مخصصة
• دعم التحقق من الصحة غير المتزامن

المشاكل

المشكلة الأولى والأكبر هي ، بالطبع ، حجمها. لا تدعم المكتبة اهتزاز الأشجار والإضافة الانتقائية للمدققين. سواء أعجبك ذلك أم لا ، فستكون لعصابتك دائمًا مكونان وتوجيه التحقق من الصحة وترجمة إلى الإنجليزية و 35 أداة تحقق.

المشكلة الثانية هي بسبب نهج الاشتراك المستند إلى الأحداث ، حيث يمكن أن تنشأ المشكلات عند الدمج مع المكتبات الأخرى التي تغير أيضًا سلوك حقول الإدخال (أجهزة الاقنعة ، إلخ).

المشكلة الثالثة هي أكثر ذاتية - ترجمات الأخطاء عامة وقبيحة ، لا تعكس الجوهر الحقيقي.

خذ النموذج من الأمثلة السابقة. إذا أدخلت الرقم والتاريخ الخاطئين لجواز السفر ، فستتلقى الأخطاء التالية:

        .         dd.MM.yyyy. 

أود استبدالهم بشيء أكثر قابلية للقراءة:

          1234 567890         .. 

Vuelidate

ظهرت مكتبة Vuelidate استجابةً لمشكلات الطرق التي تحتوي عليها مكتبة التحقق من الصحة. لا تحتوي Vuelidate على معالجات أحداث للحقول ، ولا ترجمات لأخطاء التحقق من الصحة.

يتطلب منك شيئًا واحدًا فقط - وصف عمليات التحقق في كائن عمليات التحقق من الصحة. ثم ستقوم بإنشاء حقل محسوب $ v مع إشارات التحقق من الحقل ووظائف تغيير هذه الإشارات.

بفضل أسلوب التحقق البسيط ، يزن Vuelidate 3.4 كيلوبايت فقط (minified + GZIP) ، أي ما يقرب من 10 مرات أقل من التحقق من صحة vee.

يتم تثبيته بنفس السهولة:

 npm i vuelidate 

 /* main.js */ import Vue from 'vue' import Vuelidate from 'vuelidate' Vue.use(Vuelidate) /* ... */ 

أعد كتابة النموذج من المثال السابق باستخدام Vuelidate:

 <template> <form @submit.prevent="someAction()"> <!--      ,  $v.passportData.$invalid   ,     --> <div> <input type="text" v-model="passportData"> <span v-if="$v.passportData.$invalid">         1234 567890 </span> </div> <!--      blur  $touch()   $v.passportDate.$dirty  true.  $v.passportDate.$error   $v.passportDate.$invalid && $v.passportDate.$dirty --> <div> <input type="text" v-model="passportDate" @blur="$v.passportDate.$touch()"> <span v-if="$v.passportDate.$error">      .. </span> </div> <!-- ,       blur,     $v.passportDate.$model - ,     : - Vuelidate     passportDate - Vuelidate   $touch()   $v.passportDate  lazy ,      blur --> <div> <input type="text" v-model.lazy="$v.passportDate.$model"> <span v-if="$v.passportDate.$error">      .. </span> </div> <!--     --> <div> <input type="text" v-model="name" @blur="$v.name.$touch()"> <span v-if="$v.name.$error"> <template v-if="!$v.name.maxLength">      {{ $v.name.$params.maxLength.max }}  </template> <template v-else-if="!$v.name.alpha">      </template> <template v-else>     </template> </span> </div> <button type="submit" :disabled="$v.$invalid">   </button> </form> </template> <script> import { required, maxLength } from 'vuelidate/lib/validators'; import moment from 'moment'; export default { data() { return { passportData: null, name: null, passportDate: null, }; }, //   ,  Vuelidate   computed- $v validations: { //        data passportData: { required, validFormat: val => /^\d{4} \d{6}$/.test(val), }, passportDate: { required, validDate: val => moment(val, 'DD.MM.YYYY', true).isValid(), }, name: { required, maxLength: maxLength(10), alpha: val => /^[-]*$/i.test(val), }, }, }; </script> 

رمل مع مثال

يمكن وصف أدوات التحقق من الصحة بسرعة وسهولة باستخدام الوظائف. إذا كنت تريد أن تقع معلمات أداة التحقق من الصحة في كائن $ params ، استخدم المساعد withParams الخاص.

كما ترون ، تشغل الحقول التي تحتوي على العديد من الأخطاء مساحة كبيرة وتبدو وحشية - يتم حل هذا عن طريق إنشاء مكون منفصل لعرض عمليات التحقق من الصحة.

ميزات المكتبة الأخرى

• دعم التحقق من الصحة غير المتزامن
• جمع دعم التحقق من الصحة

المشاكل

من بين المشاكل ، يمكن للمرء أن يفرد العدد الضئيل نسبيا من المدققين من خارج منطقة الجزاء ؛ وغالبا ما يتعين عليك كتابة وظائفك الخاصة للتحقق من الصحة.

استنتاج

لقد استخدمت مكتبة Vuelidate في العديد من المشاريع ولم أواجه أبدًا مشكلات غير قابلة للحل. بالنسبة لي ، لا تزال هي الخيار الأفضل. إذا كنت تهتم بحجم الكود الخاص بك وتفضل اتباع نهج نموذجي لوصف عمليات التحقق من الصحة - خذها ، فالتوثيق البسيط و api الثري سيسمح بالتحقق من صحة أي شكل من أشكال التعقيد.

إذا كنت تقوم بلوحة المسؤول للاستخدام الداخلي ، فلا ترغب في قضاء وقت واحد على خطوط الخطأ - اختر التحقق من الصحة. وسوف يساعد على كتابة العديد من عمليات التحقق بسرعة ودون مشاكل.

شكرا لاهتمامكم!