ASP.Net MVC में विनीत jQuery के मान्य प्लगइन का आंतरिक कार्य

यह ASP.Net MVC श्रृंखला में अंडरस्टैंडिंग विनीत मान्यता का भाग 3 है।

1. अंदर jQuery के मान्य प्लगइन काम करते हैं
2. ASP.Net MVC में विनीत सत्यापन द्वारा उत्पन्न HTML कोड को समझना
3. ASP.Net MVC में विनीत jQuery के मान्य प्लगइन का आंतरिक कार्य।

हम इस लेख में क्या बात करेंगे:

• पार्स विधि
  
  • अनुभाग "parceElement"
    
    • SkipAttach की व्याख्या
    • ParceElement फ़ंक्शन का स्पष्टीकरण
    
    
  • अनुभाग "validateInfo"
    
    • फ़ंक्शन का विवरण "validateInfo"
    • वापसी वस्तु की व्याख्या
    
    
  
  
• एडेप्टर

पार्स विधि

हम विनीत सत्यापन चक्र की व्याख्या करेंगे जो तब होता है जब कोई दस्तावेज़ लोड किया जाता है, और प्रत्येक घटक की भूमिका को समझता है।
अगर हम jquery.validate.unobtrusive.js के अंत को देखें तो हम पाते हैं

$(function () { $jQval.unobtrusive.parse(document); }); 

तो, हम "पार्स ()" विधि कहते हैं और इसे "दस्तावेज़" पास करते हैं
पार्स () विधि क्या है?

 { parse: function (selector) { /// <summary> /// Parses all the HTML elements in the specified selector. It looks for input elements decorated /// with the [data-val=true] attribute value and enables validation according to the data-val-* /// attribute values. /// </summary> ///Any valid jQuery selector. $(selector).find(":input[data-val=true]").each(function () { $jQval.unobtrusive.parseElement(this, true); }); var $forms = $(selector) .parents("form") .andSelf() .add($(selector).find("form")) .filter("form"); $forms.each(function () { var info = validationInfo(this); if (info) { info.attachValidation(); } }); } } 

पार्स () विधि के दो खंड हैं

1. अनुभाग "पारेसीकरण"

पार्समेंट (तत्व, स्किपअटैच)

 $(selector).find(":input[data-val=true]").each(function () { $jQval.unobtrusive.parseElement(this, true); }); 

पहली बात यह है कि हम चयनकर्ता के अंदर "डेटा-वैल = सच" वाले सभी तत्वों के माध्यम से लूप करते हैं जो हम पास करते हैं (हमारे मामले में, यह "दस्तावेज़" है)
तब हम "parseElement ()" कहते हैं और इसे उस तत्व को पास करते हैं जिसे हम सत्यापित करना चाहते हैं और "SkipAttach" के लिए "सही" है।

SkipAttach पैरामीटर की व्याख्या

यह सवाल उठ सकता है कि हम “स्किपअटैच” में सही और गलत क्यों न हों।

"SkipAttach" फॉर्म पर वैध () कॉलिंग के लिए ध्वज है।
यदि हम "झूठे" पास करते हैं, तो सत्यापन नियम उस तत्व से जुड़े होते हैं जिसे हम पास करते हैं और "वैध" विधि को तुरंत नियमों के सरणी के लिए कहा जाता है और विनीत सत्यापन के लिए आवश्यक अन्य विकल्प पारित किए जाते हैं (यदि कोई अन्य तत्व है जो वे जा रहे हैं) पार्स)।
हम यह नहीं चाहते। सबसे पहले, हम प्रपत्र के प्रत्येक तत्व के लिए नियम संलग्न करना चाहते हैं, और फिर, जब सभी नियम संलग्न होते हैं, तो हम "पार्स" विधि के दूसरे भाग में मुख्य एक "वेलिडेट ()" कहेंगे।

किन मामलों में हमें "स्किप" को "स्किप" करने की आवश्यकता है?

यदि हम एक डायनामिक तत्व को पहले से मान्य किए गए फॉर्म में जोड़ना चाहते हैं, तो हम फॉर्म को फिर से मान्य नहीं करने के लिए "सही" पास करेंगे, क्योंकि हम ऐसा कुछ नहीं करना चाहते हैं (हम अगले लेख में डायनामिक एलिमेंट सत्यापन के बारे में बात करेंगे)

परसेप्शन क्लीयरेंस

असल में, parseElement () फ़ंक्शन दो चीजें करता है:

1. जब फॉर्म एलिमेंट को पहली बार कॉल किया जाता है (इस फॉर्म में पहले कोई एलिमेंट नहीं कहा गया है), फंक्शन ऑप्शन्स का एक ऑब्जेक्ट बनाता है जिसे "वैलिडेट ()" मेथड में पास किया जाएगा। विकल्प jquery.unobtrusive द्वारा एक अलग फ़ंक्शन "एररप्लसमेंट", एक अलग "एररक्लास" और नियमों के एक खाली सरणी के रूप में उपयोग किया जाता है।
नोट: यह सब प्राइवेट मेथड "validationInfo (फॉर्म)) में किया जा सकता है, जिसे" parseElement "के बिना कहा जाता है, और जब इसे 1 से अधिक बार कहा जाता है, तो यह बस उसी ऑब्जेक्ट को वापस करता है। इस प्रकार, हम इसमें डेटा / फ़ंक्शन जोड़ सकते हैं, संशोधित कर सकते हैं या कॉल कर सकते हैं।
2. प्रत्येक तत्व के लिए, जब हम "parseElement" कहते हैं, तो यह उन नियमों को समझता है जो इस तत्व में लिखे गए हैं ("डेटा- *") एडेप्टर का उपयोग करते हुए (एडाप्टर्स कैसे काम करते हैं एक आइटम यह समझाता है), और फिर अनुवाद और जोड़ता है पहले कॉल पर बनाए गए नियमों की सरणी के लिए उन्हें।
नोट: हर बार जब आप parseElement का उपयोग करते हैं, तो इसका परिणाम $ .data ("विनीत विचलन") विधि का उपयोग करके फ़ॉर्म में सहेजा जाएगा। इस प्रकार, व्यक्तिगत कॉल एक ही डेटा स्रोत के साथ सिंक्रनाइज़ किए जाते हैं।

2. धारा "मान्य करें"

 var $forms = $(selector) .parents("form") .andSelf() .add($(selector).find("form")) .filter("form"); $forms.each(function () { var info = validationInfo(this); if (info) { info.attachValidation(); } }); 

फ़ंक्शन का विवरण "validateInfo"

हमने पहले ही उल्लेख किया है कि "validateInfo ()" फ़ंक्शन पर कॉल "वैलिडेट ()" विधि के विकल्प ऑब्जेक्ट का निर्माण करता है। विकल्प jquery.unobtrusive द्वारा एक अलग फ़ंक्शन "एररप्लेसमेंट" के रूप में उपयोग किया जाता है, एक अलग "एररक्लास" और नियमों का एक खाली सरणी।
यहां हम पेज पर प्रत्येक फॉर्म के लिए "validateInfo ()" भी कहते हैं। आमतौर पर, इस जगह में "valaidateInfo" कहते हैं, हम केवल उस ऑब्जेक्ट को फॉर्म में सहेजते हैं, जो पहले चरण में पहले से ही भरा हुआ था। यही है, हम इसे एक गटर के रूप में उपयोग करते हैं।
फिर हम "अटैचड वेलिडेशन ()" कहते हैं, जो "वेलिडेट ()" विधि को कॉल करता है, इसे "वेलिडेशनइन्फो () (" कॉल) के साथ आबाद विकल्पों को पास करते हैं।

 data_validation = "unobtrusiveValidation"; function validationInfo(form) { var $form = $(form), result = $form.data(data_validation), onResetProxy = $.proxy(onReset, form); if (!result) { result = { options: { // options structure passed to jQuery Validate's validate() method errorClass: "input-validation-error", errorElement: "span", errorPlacement: $.proxy(onError, form), invalidHandler: $.proxy(onErrors, form), messages: {}, rules: {}, success: $.proxy(onSuccess, form) }, attachValidation: function () { $form .unbind("reset." + data_validation, onResetProxy) .bind("reset." + data_validation, onResetProxy) .validate(this.options); }, validate: function () { // a validation function that is called by unobtrusive Ajax $form.validate(); return $form.valid(); } }; $form.data(data_validation, result); } return result; } 

पहले, हम यह देखने के लिए जाँच करते हैं कि क्या हमने $ form.data ("unobtrusiveValid") का उपयोग करने से पहले इस फ़ंक्शन को फॉर्म पर पहले ही कॉल कर दिया है। यदि आपने पहले ही फोन किया है, तो हम कुछ नहीं करते हैं और परिणाम वापस करते हैं।

वापसी वस्तु की व्याख्या।

यदि यह "validationInfo ()" फ़ंक्शन का पहला कॉल है, तो हम एक परिणाम ऑब्जेक्ट बनाते हैं और इसे $ .data () पद्धति का उपयोग करके फ़ॉर्म पर सहेजते हैं। इस ऑब्जेक्ट में 3 भाग हैं:

• ऑब्जेक्ट जो हम नियमों और संदेशों की एक खाली सरणी के साथ "मान्य ()" विधि से गुजरेंगे, जिसे हम बाद में बनाएंगे।
• संलग्नक () विधि, जो अपने स्वयं के रीसेट को संलग्न करेगी। प्रपत्र के लिए विनीलिवेलाइजेशन घटना, और सभी विकल्पों के साथ विधि पर मान्य कॉल करने के बाद, यह विधि नियमों और संदेशों की भरमार होने पर कॉल की जाएगी (अपने स्वयं के रीसेट इवेंट को ट्रिगर करना) ", हम" onReset () "विधि को कॉल करेंगे, जो सब कुछ रीसेट कर देगा)।
  

   function onReset(event) { // 'this' is the form element var $form = $(this); $form.data("validator").resetForm(); $form.find(".control-group").removeClass("error"); $form.find(".validation-summary-errors") .addClass("validation-summary-valid") .removeClass("validation-summary-errors"); $form.find(".field-validation-error") .addClass("field-validation-valid") .removeClass("field-validation-error") .removeData("unobtrusiveContainer") .find(">*") // If we were using valmsg-replace, get the underlying error .removeData("unobtrusiveContainer"); 

  
  इसलिए, यदि हम फॉर्म सत्यापन को रद्द करने के लिए रीसेट ईवेंट को ट्रिगर करना चाहते हैं:
  $('form').trigger('reset.unobtrusiveValidation')
  
• एक अलग "मान्य ()" विधि विनीत अजाक्स से बुलाया जाएगा

एडेप्टर

जब मैंने "पारसेमेंट ()" विधि के बारे में बात की, तो मैंने विशेष रूप से एडेप्टर के विषय को छोड़ दिया, क्योंकि वे पर्याप्त जटिल हैं कि उनके लिए एक उप-विषय को उजागर कर सकें।
हमने देखा कि कैसे विनीत सत्यापन के उपयोग से Html उत्पन्न होता है, और सामान्य jquery.validate में वैयक्तिक सत्यापन विशेषताओं को कैसे जोड़ा जाता है। एडेप्टर का उपयोग दो भागों को जोड़ने के लिए किया जाता है।
तो एडाप्टर्स किसके लिए जिम्मेदार हैं?
एडेप्टर Html “data- *” को नियमित jquery.validate प्लगइन के समझने योग्य प्रारूप में अनुवाद करने के लिए जिम्मेदार हैं। यदि उपयोगकर्ता विनीत सत्यापन का उपयोग करके एक अलग सत्यापन विधि जोड़ना चाहता है, तो उसे इसके लिए एक एडाप्टर भी बनाना होगा। एडेप्टर संग्रह $ .validator.unobtrusive.adapters में है। एडेप्टर संग्रह में सभी डिफ़ॉल्ट एडेप्टर शामिल हैं जो jquery.unobstrusive और उपयोगकर्ता द्वारा परिभाषित किए गए हैं।
इसमें अपने स्वयं के एडेप्टर को जोड़ने के लिए 4 विधियां शामिल हैं, जिन्हें हम बाद में देखेंगे।



सबसे बुनियादी विधि:
jQuery.validator.unwellrusive.adapters.add (एडॉप्टरनाम, [परम], fn)

हम इस पद्धति को $ .ajax विधि मान सकते हैं, अन्य तीन सहायक विधियाँ इस विधि का उपयोग करती हैं।

आइए मापदंडों का विश्लेषण करें:

• एडेप्टरनाम: यह अडैप्टर का नाम है, यह "नियमनाम" से एचटीएमएल तत्व (डाटा-वैल-रूलनाम) से मेल खाता है
• [params]: सत्यापन को पूरा करने के लिए सत्यापन विधि का उपयोग करेगा कि मानकों का एक वैकल्पिक सरणी।
• fn: "मान्य ()" विधि द्वारा उपयोग किए जाने वाले नियमों और संदेशों को Html "data- *" से कनेक्ट करने के लिए कहा जाता है। इसमें मानकों का एक विकल्प है जो इसे निम्न गुणों के साथ एक वस्तु के रूप में पारित किया जाता है:
  
  • तत्व: एचटीएमएल तत्व जो मान्य है;
  • फार्म: फार्म तत्व;
  • संदेश: इस तत्व के "डेटा- *" विशेषताओं से निकाले गए इस नियम के लिए एक त्रुटि संदेश;
  • params: सत्यापन के लिए उपयोग किए जाने वाले पैरामीटर और उनके सरणी को "डेटा- *" एचटीएमएल तत्व के गुण (डेटा-वैल-नियमनाम-पैरा 1) से निकाला गया;
  • नियम: इस तत्व के लिए jQuery के नियमों की एक सरणी। इस सरणी में नियम (एस) जोड़ने के लिए, हम कुंजी / मान जोड़े को पास करेंगे, कुंजी सत्यापन नियम का नाम है, मान इस नियम के लिए उपयोग किया जाने वाला पैरामीटर है (जैसा कि अनुभाग में चक्र के पहले लेख में लिखा गया है: "अपने स्वयं के सत्यापन नियम जोड़ना")
  • संदेश: इस तत्व के लिए jquery संदेश सरणी, साथ ही साथ नियम ऑब्जेक्ट, हम इसे भरते हैं और इसका उपयोग "एचटीएमएल" विधि में इस एचटीएमएल तत्व के लिए संदेश वस्तु के रूप में किया जाता है।
    नोट: यह विधि कोई परिणाम नहीं देती है। नियमों और संदेशों की एक सरणी को $ .data ("विनीत विचलन") का उपयोग करके फ़ॉर्म पर सहेजा जाएगा। हम "parseElement" विधि की जांच कर सकते हैं कि यह देखने के लिए कि एडॉप्टर फ़ंक्शन में पैरामीटर कैसे पारित किए गए थे।
  
  

एक उदाहरण:
एचटीएमएल

 <input id="val" type="text" name="val" data-val="true" data-val-between="Must be in the right range" data-val-between-min="5" data-val-between-max="30" /> 

जावास्क्रिप्ट

 //The adapter jQuery.validator.unobtrusive.adapters.add( 'between', ['min' ,'max'], function (options) { options.rules['between'] = { min: options.params.min, max: options.params.max }; options.messages['between'] = options.message; } ); //The validation method jQuery.validator.addMethod("between", function (value, element, params) { params.min == 5; //true params.max == 30; //true }); 

अन्य एडेप्टर के बारे में क्या:

addBool
addSingleVal
addMinMax

यदि आप पहले बताए गए तरीके () विधि का उपयोग करके अपने एडेप्टर को जोड़ने की अवधारणा को समझते हैं तो वे काफी सरल हैं।
आप ब्रैड विल्सन के लेख, "ASP.NET MVC 3 में विनीत ग्राहक सत्यापन" को भी देख सकते हैं , जहां वह एडेप्टर के विषय को अधिक विस्तार से बताते हैं।

नदीम खेड्र कैसे विस्मयकारी jQuery के मान्य प्लगइन Asp.net MVC अनुवाद में आंतरिक रूप से काम करता है

अद्यतन: एडेप्टर की एक सूची के साथ एक तस्वीर और श्रृंखला में अन्य पदों के लिए लिंक जोड़ा गया