Vue.js में फ़ॉर्म सत्यापन

नमस्कार, हेब्र!

फॉर्म सत्यापन साइट पर सबसे महत्वपूर्ण कार्यों में से एक है। हमें उपस्थिति के लिए डेटा को मान्य करना है, पैटर्न से मिलान करना है, अतुल्यकालिक सत्यापन बनाना है, क्षेत्र से फ़ोकस हटाने के बाद या फ़ॉर्म जमा करने से पहले सत्यापन लागू करना है ... कभी-कभी यह डेवलपर के लिए वास्तविक सिरदर्द बन जाता है।

Vue.js में सत्यापन के लिए कई दिलचस्प और असामान्य दृष्टिकोण शामिल हैं जो आपकी समस्याओं को हल करने में मदद करेंगे। कट के तहत अवलोकन!

टीएल, डॉ

Vuelidate का उपयोग करें।

सामान्य गलतियाँ

HTML5 सत्यापन

HTML5 ने डेवलपर्स को नए फ़ील्ड विशेषताओं और सत्यापन API का उपयोग करके रूपों को मान्य करने की क्षमता दी। हम उन्हें सीधे अपने 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> 

एक उदाहरण के साथ सैंडबॉक्स

ऐसे सरल उदाहरण में भी, आप कई समस्याएं देख सकते हैं:

• ब्राउज़र केवल एक बार में एक त्रुटि दिखाते हैं। उपयोगकर्ता को अपनी सभी त्रुटियों को देखने के लिए कई बार फ़ॉर्म जमा करने का प्रयास करना होगा।
• प्रपत्र जमा करने का प्रयास करने के बाद ही त्रुटियों को उपयोगकर्ता को प्रदर्शित किया जाता है। इस व्यवहार को बदलने के लिए, आपको एक और टन कोड लिखना होगा: ब्लर घटना पर प्रत्येक तत्व पर रिपोर्टवैलिडिटी () फ़ंक्शन को कॉल करें।
• इनपुट फ़ील्ड को स्टाइल करने के लिए, केवल छद्म वर्ग हैं: मान्य और: अमान्य, इनपुट फ़ील्ड में डेटा गलत होने पर राज्य को पकड़ने का कोई तरीका नहीं है, लेकिन उपयोगकर्ता ने अभी तक इसके साथ बातचीत नहीं की है।
• प्रत्येक ब्राउज़र अपने तरीके से सत्यापन त्रुटियों को प्रदर्शित करता है, वे आपके डिज़ाइन में बदसूरत दिख सकते हैं।
• Vue.js में मान्यता एपीआई का उपयोग करने के लिए असुविधाजनक है: आपको $ रेफ में तत्वों को बचाना होगा।

यदि आपके पास प्रोजेक्ट में केवल एक ही फ़ॉर्म है, और इसका उपयोग केवल आपके द्वारा किया जाता है, तो 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-validate ( github , प्रलेखन )
• Vuelidate ( GitHub , प्रलेखन )

प्रत्येक का अपना अनूठा दृष्टिकोण है, जिसे हम नीचे विस्तार से विचार करेंगे।

वी सत्यापित करें

vee-validate - सत्यापन के लिए एक पुस्तकालय जो Vue.js के पहले संस्करण के दौरान दिखाई दिया, में एक बड़ा समुदाय है और इसका उपयोग बड़ी संख्या में परियोजनाओं में किया जाता है।

आयु वजन को प्रभावित करती है - 31 KB (मिनिफ़ाइड + 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-validate के सत्यापन के दो दृष्टिकोण हैं: निर्देश का उपयोग करना और घटकों का उपयोग करना।

वी-मान्य निर्देश के साथ मान्यता

निर्देश का उपयोग करने का तरीका बहुत ही सरल है: आप 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> 

एक उदाहरण के साथ सैंडबॉक्स

जैसा कि आप देख सकते हैं, जब field.passport_date के अंदर झंडे का उपयोग किया जाता है, तो मुझे उपस्थिति के लिए passport_date फ़ील्ड की जांच करनी थी - पहले रेंडर के दौरान, vee-validate को आपके खेतों के बारे में कोई जानकारी नहीं है और, तदनुसार, झंडे के साथ कोई वस्तु नहीं है। इस जांच से छुटकारा पाने के लिए, विशेष मैपफिल्ड हेल्पर का उपयोग करें।

घटक मान्यताओं

पिछले वर्ष के अंत में दिखाई देने वाली नई सत्यापन विधि घटकों का उपयोग है। लेखक स्वयं इस दृष्टिकोण का उपयोग करने की सलाह देते हैं, और यह Vue.js@2.6 से नए स्लॉट सिंटैक्स के साथ अच्छी तरह से चला जाता है।

पुस्तकालय दो घटक प्रदान करता है:

• ValidationProvider - एक घटक जिसमें आप मान्यताओं का वर्णन करते हैं और जिसमें आप इनपुट फ़ील्ड को लपेटते हैं।
• ValidationObserver - एक घटक जो कई मान्यकरणों के सत्यापन झंडे को जोड़ती है।

यहाँ पिछले उदाहरण से एक फार्म है, लेकिन घटकों का उपयोग करके लिखा गया है:

 <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 के साथ एकीकरण
• स्टाइलिंग के लिए ऑटो जोड़ें कक्षाएं
• के लिए समर्थन: मान्य और: अमान्य छद्म वर्ग
• अरिया का समर्थन- * गुण
• सत्यापन के लिए HTML5 विशेषता समर्थन
• कस्टम सत्यापनकर्ता बनाना
• अतुल्यकालिक सत्यापन सहायता

समस्याओं

पहली और सबसे बड़ी समस्या, निश्चित रूप से, इसका आकार है। पुस्तकालय ट्री-शेकिंग और सत्यापनकर्ताओं के चयनात्मक जोड़ का समर्थन नहीं करता है। आप इसे पसंद करते हैं या नहीं, आपके गिरोह में हमेशा 2 घटक होंगे और एक सत्यापन निर्देश, अंग्रेजी में अनुवाद और 35 सत्यापनकर्ता होंगे।

दूसरी समस्या ईवेंट-आधारित सदस्यता दृष्टिकोण के कारण है, अन्य पुस्तकालयों के साथ एकीकरण करते समय समस्याएं उत्पन्न हो सकती हैं जो इनपुट फ़ील्ड (मास्कर्स, आदि) के व्यवहार को भी बदलते हैं।

तीसरी समस्या - एक अधिक व्यक्तिपरक - त्रुटियों के अनुवाद सामान्य और बदसूरत हैं, वास्तविक सार को प्रतिबिंबित नहीं करते हैं।

पिछले उदाहरणों से फॉर्म लें। यदि आप पासपोर्ट की गलत संख्या और तारीख दर्ज करते हैं, तो आपको निम्नलिखित त्रुटियां प्राप्त होंगी:

        .         dd.MM.yyyy. 

मैं उन्हें कुछ और पठनीय के साथ बदलना चाहूंगा:

          1234 567890         .. 

Vuelidate

Vuelidate पुस्तकालय उन समस्याओं के जवाब में दिखाई दिया, जिनमें वेई-मान्य पुस्तकालय शामिल हैं। Vuelidate में न तो खेतों के लिए हैंडलर हैं, न ही सत्यापन त्रुटियों के लिए अनुवाद।

इसके लिए आपको केवल एक चीज की आवश्यकता है - सत्यापन ऑब्जेक्ट में मान्यताओं का वर्णन करने के लिए। तब वह खुद इन झंडों को बदलने के लिए क्षेत्र सत्यापन झंडे और कार्यों के साथ एक गणना क्षेत्र $ v बनाएगी।

अपने सरल सत्यापन दृष्टिकोण के लिए धन्यवाद, Vuelidate का वजन केवल 3.4 KB (मिनिफ़ाइड + GZIP) है, जो कि वी-मान्य से लगभग 10 गुना कम है।

यह आसानी से स्थापित किया गया है:

 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> 

एक उदाहरण के साथ सैंडबॉक्स

कस्टम सत्यापनकर्ता कार्यों का उपयोग करके जल्दी और आसानी से वर्णित किया जा सकता है। यदि आप चाहते हैं कि आपका सत्यापनकर्ता पैरामीटर $ परम ऑब्जेक्ट में आए, तो विशेष विराम हेल्पर का उपयोग करें।

जैसा कि आप देख सकते हैं, कई त्रुटियों वाले फ़ील्ड बहुत सी जगह लेते हैं और राक्षसी दिखते हैं - यह सत्यापन प्रदर्शित करने के लिए एक अलग घटक बनाकर हल किया जाता है।

अन्य पुस्तकालय सुविधाएँ

• अतुल्यकालिक सत्यापन सहायता
• संग्रह सत्यापन समर्थन

समस्याओं

समस्याओं में से, बॉक्स से बाहर सत्यापनकर्ताओं की तुलनात्मक रूप से अल्प संख्या को एकल कर सकता है; आपको अक्सर सत्यापन के लिए अपने कार्यों को लिखना होगा।

निष्कर्ष

मैंने कई परियोजनाओं में Vuelidate लाइब्रेरी का उपयोग किया है और कभी भी असाध्य समस्याओं का सामना नहीं किया है। मेरे लिए, वह सबसे अच्छा विकल्प है। यदि आप अपने कोड के आकार के बारे में परवाह करते हैं और मान्यताओं के विवरण के लिए एक मॉडल दृष्टिकोण पसंद करते हैं - इसे ले लो, सरल प्रलेखन और अमीर एपीआई किसी भी जटिलता के रूपों को मान्य करने की अनुमति देगा।

यदि आप आंतरिक उपयोग के लिए व्यवस्थापक पैनल कर रहे हैं, तो त्रुटि लाइनों पर समय की एक भी बूंद खर्च नहीं करना चाहते हैं - वी-मान्य चुनें। यह कई सत्यापनों को जल्दी और समस्याओं के बिना लिखने में मदद करेगा।

आपका ध्यान के लिए धन्यवाद!