आंतरिक रूप से jQuery के मान्य प्लगइन को चलाना

JQuery के मान्य प्लगइन के लिए अपने स्वयं के नियमों को लिखने के तरीके पर कई लेख हैं, लेकिन उनमें से कुछ इस प्लगइन के आंतरिक संचालन की व्याख्या करते हैं, जिसके बारे में हम इस लेख में चर्चा करेंगे।
यह लेखों की एक श्रृंखला का पहला भाग है "Asp.NET MVC के विनीत मान्यता को समझना"

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

हम इस लेख से क्या सीखते हैं:
1. फॉर्म को कैसे मान्य करें।
2. सत्यापन संदेश और वे कैसे काम करते हैं।
3. अपने स्वयं के सत्यापन नियम जोड़ना।
4. जब हम सत्यापन विधि कहते हैं तो वास्तव में क्या होता है।

कैसे एक फार्म को मान्य करने के लिए

किसी फॉर्म को मान्य करने के 2 मुख्य तरीके हैं।

1. नियम के रूप में वर्ग के नाम का उपयोग करें

यह कैसे काम करता है

हम "वर्ग" html विशेषता को क्षेत्र के सत्यापन के लिए जोड़ते हैं, और यह सत्यापन को सक्षम करेगा।
इसलिए, यदि हम चाहते हैं कि पाठ क्षेत्र आवश्यक हो, तो हम इनपुट तत्व में विशेषता वर्ग = "आवश्यक" का मान जोड़ते हैं

एचटीएमएल

<form action="/" method="post"> <input id="Name" type="text" name="Name" value="" class ="required" /> <input type="submit" value="Submit" /> </form> 

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

 $(document).ready(function() { $('form').validate(); }); 

तो आप कुछ वर्गों के लिए कुछ नियम जोड़ सकते हैं।

इस दृष्टिकोण के पेशेवरों और विपक्ष:
केवल उन नियमों के साथ काम करता है जो कोई तर्क नहीं लेते।
हम HTML विशेषता "वर्ग" का उपयोग उस उद्देश्य के लिए करते हैं जो इसके लिए नहीं है।
लेकिन इसे स्थापित करना आसान है।

AddClassRules विधि का उपयोग करना

AddClassRules फ़ंक्शन का उपयोग करने से हमें एक वर्ग के लिए एक यौगिक नियम का उपयोग करने में सक्षम बनाता है।

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

  $.validator.addClassRules({ name: { required: true, minlength: 2 }, zip: { required: true, digits: true, minlength: 5, maxlength: 5 } }); 

यह कोड "नाम" और "ज़िप" कक्षाओं के लिए 2 नए नियम जोड़ता है, और अगर हमारे पास "इनपुट" तत्व है, जिसमें "ज़िप" वर्ग है, तो नियम इस पर लागू होते हैं: इसका मूल्य अनिवार्य है, उपयोगकर्ता केवल संख्या दर्ज कर सकता है और लंबाई बिल्कुल 5 अक्षर होनी चाहिए।

एचटीएमएल

 <input class="zip" type="text" name="zipCode" /> 

सूचना: किसी विशिष्ट नियम के लिए अपने स्वयं के संदेश का उपयोग करने के लिए एक समग्र नियम की आवश्यकता होती है, हमें "आवश्यक" नियम के लिए एक उपनाम के साथ आने की आवश्यकता है, इस उपनाम के साथ एक नया नियम बनाएं और इसके लिए एक डिफ़ॉल्ट संदेश सेट करें।

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

 $.validator.addMethod("newrequired", $.validator.methods.required, "new name is required"); 

या हम HTML विशेषता "शीर्षक" का उपयोग कर सकते हैं, इसका मूल्य एक यौगिक नियम के लिए एक त्रुटि संदेश होगा।

नोट: वर्ग नाम सत्यापन केवल सत्यापन नियमों के लिए काम करता है जो कोई तर्क नहीं लेते हैं।

2. मान्य () विधि के लिए JSON ऑब्जेक्ट के रूप में नियम जोड़ना

नाम से, आपको अनुमान लगाना चाहिए कि यह सत्यापन विधि एक json ऑब्जेक्ट को स्वीकार करती है, इसलिए हम उन क्षेत्रों को परिभाषित कर सकते हैं जिन्हें हमें सत्यापित करने और उनके लिए सत्यापन नियमों की आवश्यकता है।

एचटीएमएल

 <form> <input id="something" type="text" name="userEmail" /> <input id="submit" type="submit" value="submit" /> </form> 

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

 $('form').validate({ rules: { userEmail: { email: true, required: true } } }); 

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

इस दृष्टिकोण के पेशेवरों और विपक्ष:

यह दृष्टिकोण हमें अधिक सत्यापन नियमों का उपयोग करने का अवसर देता है, जो तर्क लेती हैं, जैसे कि मिनलॉन्ग, रिमोट, इक्स्टो, आदि।
सब कुछ पर उत्कृष्ट और मैन्युअल रूप से समायोज्य नियंत्रण।
लेकिन उपयोगकर्ता को प्रत्येक फॉर्म के लिए अलग-अलग विकल्पों के साथ एक अलग "मान्य" फ़ंक्शन करना होगा।

डायनामिक नियम जोड़ें या निकालें।

नियम जोड़ना

एक नियम जोड़ने के लिए, हमें फॉर्म को वेरिफाई करने के बाद jQuery तत्वों के लिए "नियम" विधि का उपयोग करना चाहिए और "पैरामीटर" स्ट्रिंग को पहले पैरामीटर के रूप में पास करना होगा और दूसरे पैरामीटर के रूप में नियम ऑब्जेक्ट जिसे हम इस तत्व में जोड़ना चाहते हैं (हम "संदेश" ऑब्जेक्ट भी पास कर सकते हैं) "हमने जो नियम जोड़े हैं)।

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

 $('.input').rules('add', { required: true, messages: { required: true } }) 

नियम हटाना

यदि हम किसी नियम या नियमों को सेट करना चाहते हैं, तो हम स्ट्रिंग "हटाएं" को नियम विधि के पहले पैरामीटर के रूप में पास करते हैं, और दूसरा पैरामीटर वह स्ट्रिंग है जिसमें वे नियम शामिल होते हैं जिन्हें हम एक स्थान द्वारा अलग करना चाहते हैं।

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

 $('.input').rules('remove', 'min max'); 

मैनुअल सेटअप दृष्टिकोण

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

 var validator = $('form').data('validator'); validator.settings.rules.objectName = { required: true } 

यह दृष्टिकोण बहुत उपयोगी है यदि आपने नियम और संदेश ऑब्जेक्ट बनाए हैं, तो आप अपने साथ मान्य नियमों का विस्तार कर सकते हैं:

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

 $.extend(validator.settings, { rules: rules, messages: messages }); 

सत्यापन संदेश और वे कैसे काम करते हैं

सत्यापन संदेश को कॉन्फ़िगर करने के तीन तरीके हैं।

1. "मान्य" विधि के लिए "संदेश" ऑब्जेक्ट पास करें। संदेश ऑब्जेक्ट में key \ value जोड़े होते हैं। कुंजी तत्व के "नाम" विशेषता का मूल्य है। मूल्य प्रत्येक नियम और उसके संदेश से युक्त वस्तु है।

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

 $('form').validate({ rules: { userEmail: { email: true, required: true } }, messages: { userEmail: { email: "Please enter your email", required: "*" } } }); 

2. विशेषता "शीर्षक" तत्व के मूल्य को परिभाषित करें

एचटीएमएल

 <input id="Email" title="you have to enter a value" type="text" name="Email" /> 

3. डिफ़ॉल्ट संदेश का उपयोग करें। जब एक सत्यापन नियम परिभाषित किया जाता है, तो अंतर्निहित नियमों के लिए डिफ़ॉल्ट रूप से अंतर्निहित संदेश होते हैं।

नोट: ये तीन विधियां प्राथमिकता के आधार पर एक-दूसरे को ओवरराइड करती हैं, सर्वोच्च प्राथमिकता "संदेश" ऑब्जेक्ट है, और सबसे कम प्राथमिकता डिफ़ॉल्ट संदेश है।

कस्टम सत्यापन नियम जोड़ना

जब हम डिफ़ॉल्ट की तुलना में अधिक सत्यापन नियम जोड़ना चाहते हैं, तो हम विधि का उपयोग करते हैं
$ .validator.addMethod

यह विधि निम्नलिखित मापदंडों को स्वीकार करती है:

• नियम का नाम
• फ़ंक्शन जो सत्यापन करता है;
• डिफ़ॉल्ट संदेश।

एक फ़ंक्शन जो सत्यापन करता है वह दो या तीन मापदंडों के साथ हो सकता है

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

  function validationMethod (value, element) // OR function validationMethod (value, element, params) 

आइए इन विकल्पों की व्याख्या करते हैं।
मान: आइटम का DOM मान मान्य किया जाना।
तत्व: DOM तत्व
पैरामीटर: हम मूल्य के रूप में क्या पास करते हैं। इस उदाहरण के लिए, सत्यापन नियम वही हैं जो परम के बराबर होने चाहिए।

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

 $('form').validate({ rules: { firstname: { compare: { type: "notequal", otherprop: "lastname" } } } }); 

इस उदाहरण में, params {type: "notequal", otherprop: "lastname"} के बराबर होंगे

अपना नियम जोड़ने का एक उदाहरण:

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

 $.validator.addMethod("notnumbers", function(value, element) { return !/[0-9]*/.test(value); }, "Please don't insert numbers.") 

जब हम वैध विधि कहते हैं तो वास्तव में क्या होता है

जब हम एक विधि पर मान्य विधि लागू करते हैं, तो कई अलग-अलग चीजें पर्दे के पीछे होती हैं:

एक सत्यापनकर्ता ऑब्जेक्ट फॉर्म से जुड़े सभी नियमों और विकल्पों के साथ बनाया गया है।
मान्य विधि $ .data का उपयोग करके एक सत्यापनकर्ता संलग्न करती है। हम इसे फॉर्म का चयन करके और jQuery के "$ .data" फ़ंक्शन को कॉल करके और इसे "सत्यापनकर्ता" पास करके प्राप्त कर सकते हैं। सत्यापन के लिए विधायक वस्तु सभी मेटाडेटा है जो हमें पृष्ठ जीवन चक्र में किसी भी समय सत्यापन विकल्प तक पहुंचने की क्षमता प्रदान करता है।
इस ऑब्जेक्ट का उपयोग करके, हम रन टाइम में उन विकल्पों को बदल सकते हैं, जिन्हें हमने सत्यापन विधि में पास किया था, जैसे कि नियमों को जोड़ना या हटाना, यदि फ़ील्ड वैध या अमान्य है, या यहां तक ​​कि एक अनदेखा चयनकर्ता का परिचय देना।

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

  //getting the validator var validator = $("selector").data("validator") 

नोट: जब आप मान्य विधि को पहले से मान्य किए गए फ़ॉर्म पर कॉल करते हैं, तो यह केवल सत्यापनकर्ता ऑब्जेक्ट को लौटा देगा, $ .data का भी उपयोग किया जाता है, और मान्य विधि द्वारा पारित सभी पिछले विकल्प मिट जाएंगे।

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

 var validator = $(".selector").validate(/* rules will be omitted */) 

प्रपत्र घटनाओं को संलग्न करना

जब हम सबमिट पर क्लिक करते हैं तो क्या होता है (फ़ॉर्म सबमिट करें) और गलत मान उस फ़ील्ड में दर्ज किया जाता है जिसके लिए हमने सत्यापन संलग्न किया था। यदि कोई फ़ील्ड अमान्य है, तो इस क्षेत्र की घटनाओं के अनुसार, यह जाँचने के लिए कि यह मान्य है या नहीं, सत्यापन प्लगइन अधिक बारीकी से दिखेगा।
प्रपत्र की घटनाएँ जो कि सबस्क्राइबर की हैं, वे "क्लिक", "फ़ोकसिन", "फ़ोकटआउट", "कीप", "सबमिट" हैं।
नोट: आप मान्य विधि में कुंजियों के रूप में, और मानों के रूप में झूठ बोलकर कुछ घटनाओं के लिए सत्यापन को अक्षम कर सकते हैं।

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

 $(".selector").validate({ onfocusout: false, onkeyup: false, onclick: false, onsubmit: false }); 

नदीम खेडर के लेख का अनुवाद, jQuery का मान्य प्लगइन आंतरिक रूप से कैसे काम करता है। nadeemkhedr.wordpress.com/2012/08/12/how-the-jquery-validate-plugin-works-internally/#goCallValidate

अद्यतन ०६/०१/१३: श्रृंखला में अन्य पदों के लिए लिंक जोड़ा गया