शुभ दोपहर
इस विषय में, मैं वेब रूपों, सरल और शक्तिशाली को मान्य करने के लिए एक सुविधाजनक jQuery प्लगइन के बारे में बात करूंगा, और एक ही समय में पूरी तरह से अनावश्यक। यदि आप एनालॉग के साथ निर्माण और तुलना के विवरण में रुचि नहीं रखते हैं (अधिक सटीक रूप से, एक एनालॉग के साथ), विषय का अंत देखें, उदाहरण और स्रोत कोड के लिए एक लिंक है।

कुछ समय पहले मुझे क्लाइंट-साइड संसाधन को संशोधित करना था, जिसमें प्रश्नावली के अविश्वसनीय रूप शामिल थे। इन रूपों की अप्रिय विशेषताओं में से एक विषम इनपुट सत्यापन नियमों की भयानक मात्रा और खेतों के बीच संबंधों की एक बड़ी संख्या थी।
उदाहरण: यदि चेकबॉक्स ए का चयन किया जाता है, तो केवल संख्याओं को फ़ील्ड X में दर्ज किया जा सकता है, और फ़ील्ड Y को छिपाया जाना चाहिए, लेकिन यदि रेडियो बटन Z को अतिरिक्त रूप से चुना गया है, तो फ़ील्ड Y को प्रदर्शित किया जाना चाहिए, और संख्याओं को छोड़कर सब कुछ फ़ील्ड X में दर्ज किया जा सकता है।
दूसरे शब्दों में, विपणकों की अस्वस्थ चेतना से पैदा हुआ एक जीवित नरक।



इस तथ्य के बावजूद कि इनपुट फ़ील्ड की सामग्री (मानक ब्राउज़र वाले तक ... केवल, दुर्भाग्य से, क्रॉस-ब्राउज़र वाले नहीं हैं) को मान्य करने के कई तरीके हैं, केवल एक उपयुक्त क्लाइंट समाधान था जो कई क्षेत्रों के बीच जटिल संबंधों को स्थापित करने की अनुमति देता था - ज़र्मोर्म्स फ्रेमवर्क, जो मूल रूप से उपयोग किया गया था। संसाधन पर। शायद, इस तथ्य पर कि वह जानता था कि कैसे, उसके प्लसस समाप्त हो गए, फिर ठोस minuses शुरू हुए:
- ऑनक्लिक (!) हैंडलर में सत्यापन नियम निर्धारित करने के लिए एक स्पष्ट और असुविधाजनक तरीका। एक्सएमएल-जैसे आवेषणों के माध्यम से सीधे पेज कोड में इन नियमों को परिभाषित करने का एक अनैच्छिक तरीका है, लेकिन यह और भी भयानक है।
- ढांचा DOM ट्री को संशोधित करता है, जबकि इसकी संरचना के लिए विशेष परिस्थितियों की आवश्यकता होती है। उदाहरण के लिए, मान्यता के दौरान परिवर्तित की गई संपत्ति को फ़ील्ड में नहीं, बल्कि ... उसके दूसरे (पूर्व!) आदेश के पूर्वज पर लागू किया जाता है, जिसे लेआउट के दौरान ध्यान में रखा जाना था।
- मान्य नियंत्रण, वास्तव में, फ्रेमवर्क विगेट्स द्वारा प्रतिस्थापित किए जाते हैं, यहां तक ​​कि जहां यह आवश्यक नहीं है। ज्यादातर मामलों में, इसका मतलब क्षेत्र के साथ काम करने के किसी अन्य साधन का उपयोग करने में असमर्थता है। शब्दों में वर्णन न करें कि मैंने jQuery UI के साथ ZForms को पार करके कितनी बुराई उत्पन्न की ...
- काम का घृणित घटना मॉडल। ZForms केवल अपने विजेट्स की घटनाओं के साथ काम करता है, और आप केवल उन्हें भी सब्सक्राइब कर सकते हैं। यह इस बिंदु पर पहुंच गया कि मुझे टाइमर पर एक सत्यापन जांच लटकानी थी।
- बग का एक गुच्छा (बाहर निकलना, हमेशा की तरह, पहले से ही उत्पादन पर), जिसे आपको फ्रेमवर्क के न्यूनतम कोड में आने से ठीक करना था, या इस कोड को अपने स्वयं से क्रैक करना था।

और, अंत में, ZForms का नवीनतम संस्करण पहले से ही 2009 में सामने आया, और इसका jQuery संस्करण लाइब्रेरी के नवीनतम संस्करणों के साथ बिल्कुल काम नहीं करना चाहता था।
सामान्य तौर पर, हमारे आस्तीन को रोल करने और खरोंच से समस्या को हल करने के लिए आवश्यक होने पर स्पष्ट रूप से मामला था। मैंने jquery.lemongrab लिखकर ऐसा किया।

लेमोन्ग्राब के मुख्य विचार इस प्रकार हैं:
- प्लगइन कुछ ऐसा होने की कोशिश नहीं कर रहा है जो यह नहीं है। वह एक कार्य करता है, लेकिन यह अच्छी तरह से करता है।
- प्लगइन एचटीएमएल 5 की क्षमताओं का उपयोग करता है, जबकि पुराने ब्राउज़रों पर काम करने की क्षमता को छोड़ देता है।
- सत्यापन किसी विशेष मामले के लिए यथासंभव सुविधाजनक है।
- प्लगइन अन्य हैंडलर के साथ संघर्ष नहीं करता है।

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

लेमनगर्ब क्या कर सकते हैं?

- प्लगइन किसी भी इनपुट फ़ील्ड की स्थिति की जांच करने में सक्षम है, और दिए गए नियमों के आधार पर, तत्वों की स्थिति (समान, या किसी अन्य) को बदल सकते हैं। परिवर्तनीय स्थिति: वैधता, बंधन, पहुंच, दृश्यता।
यदि सब कुछ पहुंच और दृश्यता के साथ स्पष्ट है (यह क्रमशः, सक्षम विशेषता और प्रदर्शन की सीएसएस-संपत्ति है), तो वैधता और अनिवार्यता समझाने लायक है। वह और दूसरा दोनों एक ही ZForms में झाँकते हैं; वास्तव में, ये विशेषताएँ केवल मान्य / अमान्य होने पर फ़ील्ड में जोड़ी गई कक्षाएं हैं और यदि इसे भरना आवश्यक है (इस स्थिति में, आवश्यक HTML5 विशेषता भी जोड़ी गई है)। प्लगइन एक फॉर्म सबमिट करने की अनुमति नहीं देगा जिसमें ऐसे गुण वाले फ़ील्ड हैं (हालांकि यह अनुकूलन योग्य है)।
- प्लगइन में एक सरल और स्पष्ट घटना मॉडल है। एक घटना हुई है, कहते हैं, कुछ तत्व वैध हो गया है - इसके लिए lemongrab.valid घटना उत्पन्न होती है। रोका जा रहा है मान्य - lemongrab.novalid उत्पन्न हुआ था।
- नियम JSON में सेट किए गए हैं, जो सीधे मान्य तत्व के डेटा विशेषता में लिखे जा सकते हैं, या प्लग इन प्रारंभ होने पर लोड किए जा सकते हैं। पूर्व नियमों को सीधे पेज कोड में स्थापित करने के लिए सुविधाजनक है, बाद वाला - जब नियमों को एक अलग फ़ाइल में स्थानांतरित करना (ZForms, वैसे, पता नहीं कैसे)।
- सत्यापन के लिए, सरल गुणों का उपयोग किया जा सकता है (उदाहरण के लिए, चेकबॉक्स के लिए चेक / अनचेक किया गया), नियमित अभिव्यक्ति, खेतों के राज्य सेट और यहां तक ​​कि jQuery के चयनकर्ता। यदि यह पर्याप्त नहीं है, तो आप स्थिति की जांच करने के लिए उपयोगकर्ता-परिभाषित फ़ंक्शन का उपयोग कर सकते हैं।
- एक तत्व के लिए नियमों की संख्या असीमित है, और उन्हें आपकी पसंद के अनुसार जोड़ा जा सकता है। प्लगइन को नियमों के संयोजन का तर्क निर्धारित किया जा सकता है (और / या / नहीं), अधिक जटिल विकल्पों के लिए सभी समान उपयोगकर्ता-परिभाषित फ़ंक्शन हैं।
- प्लगइन में प्रलेखन में वर्णित छोटे अतिरिक्त उपहारों के सभी प्रकार का एक गुच्छा है।

यह कैसा दिखता है?
कुछ उदाहरणों के उदाहरण:

फ़ील्ड मान्य होगी (ACCEPTABLE वर्ग को इसमें जोड़ा जाएगा), यदि इसकी सामग्री regexp से मेल खाती है:

<form id="sample"> <input type="text" data-rule-valid='[{"key":"regexp","value":"^.{1,5}$"}]' /></code> <script>$("#sample").lemongrab();</script> </form> 

फ़ील्ड # id2 इनपुट के लिए उपलब्ध होगी यदि दूसरा रेडियो बटन चुना गया है:

 <form id="sample"> <fieldset id="selectbox"> <input type="radio" name="test" value="1" id="1" /> <input type="radio" name="test" value="2" id="2" /> <input type="radio" name="test" value="3" id="3" /> <input type="radio" name="test" value="4" id="4" /> </fieldset> <input type="text" data-rule-enabled='[{"key":"c", "selector":"#3"}]' /> <script>$("#sample1").lemongrab();</script> </form> 

प्रलेखन और इंटरैक्टिव उदाहरण ।

जब से मैंने यह बात लिखी है, मेरा जीवन मोहक और प्रेममय हो गया है, जिसकी मैं आपके लिए कामना करता हूं, और इसलिए मैं सार्वजनिक डोमेन में कोड पोस्ट करता हूं: जीथब पर रिपॉजिटरी ।