नंबरों को दर्ज करने के लिए मास्क के लिए एक वैकल्पिक विकल्प और न केवल इनपुट और टेक्सारिया में

इनपुट में संख्या दर्ज करने के लिए मुखौटा के लिए पहले प्रकाशित लेख प्लगइन की खोज में, मैं इस समस्या के समाधान पर अपनी राय साझा करना चाहूंगा।

हैबरकोट के तहत विवरण।


दिए गए:
एक बड़ा वेब प्रोजेक्ट, जिसमें यूआई भाग के लिए backbone.js, अंडरस्कोर, jQuery, jQueryUI का उपयोग किया जाता है।
परियोजना की बारीकियों के कारण, मास्क और इनपुट फ़ील्ड (इनपुट, टेक्सारिया, आदि) के सत्यापन की आवश्यकता होती है, जो कि प्रकार (इंट, फ्लोट, मूल्य, फोन, पाठ, कॉम्बोबॉक्स) पर निर्भर करता है। पहली नज़र में, इस कार्य में कुछ भी पुरातन नहीं है, और आप प्लग-इन के एक पूरे समुद्र से कुछ के साथ प्राप्त कर सकते हैं जो jQuery कृपया हमें आपूर्ति करता है। हालाँकि, बाद के प्रकार (jQuery DatePicker के आधार पर) और एक पाठ संपादक (टिनीएमसीई) को इन प्रकारों में जोड़ा गया। रास्ते में कई और प्रकार थे, जिसके लिए एक विनिर्देश तैयार किया जा रहा था, और यह इस तथ्य से बहुत दूर था कि हम तैयार समाधान खोजने के लिए प्रबंधन कर सकते थे।
यहाँ मान्यता का प्रश्न अधिक तेजी से उठा। उपयोग किए गए प्लगइन्स की संख्या में छलांग और सीमाएं बढ़ीं, और अलार्म शुरू हुआ। सामान्य तौर पर, लगातार चलते-चलते थक जाते हैं "हमने इसे इस तरह से किया क्योंकि हम इसे इस तरह से नहीं कर सकते - यह प्लग-इन का मानक व्यवहार है," यह हमारी स्वयं की सत्यापन प्रणाली बनाने का निर्णय लिया गया था।

खोजें:
परियोजना में उपयोग की जाने वाली तकनीकों के आधार पर अपना स्वयं का सत्यापन मॉड्यूल बनाएं।

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

मैं परियोजना की पूरी संरचना का वर्णन नहीं करूंगा, जो लोग रीढ़ की हड्डी के साथ काम करते थे। जेएस आसानी से यह पता लगा लेंगे कि कौन नहीं है, आसानी से हैबे पर परिचयात्मक लेख ढूंढें।

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

validate: function (params) { if (_.isArray(params.items) && params.type === 'form') { _.each(params.items, function (item) { new core.utils.Validation(item); }, this); new core.utils.Validation(params); } else { new core.utils.Validation(params); } } 

परियोजना में सभी कस्टम दृश्य सामान्य दृश्य से विरासत में मिले हैं, इसलिए, उनमें सत्यापन () विधि शामिल है। सत्यापन को निम्नानुसार कहा जाता है: नियंत्रक में, एक विशिष्ट दृश्य को प्रस्तुत करने के बाद, कस्टम सत्यापन विधि को तुरंत बुलाया जाता है, जो सभी दृश्यों के लिए अलग है, उदाहरण के लिए:

 this.getView('SomeView').render({ 'someParams': someValue, … }).validateFields(); 

सत्यापन विधि इस प्रकार दिख सकती है:

 validateFields: function () { this.validate({ id: "description", type: "text", required: false, maxLength: 500, separate: true }); } 

हम अपने प्लगइन को सूचित करते हैं
आईडी: "विवरण" - यह आईडी = "विवरण" के साथ क्षेत्र को मान्य करने के लिए आवश्यक है;
प्रकार: "पाठ" - इनपुट डेटा का प्रकार - पाठ (यानी अक्षर, संख्या, विराम चिह्न, आदि की अनुमति है);
आवश्यक: गलत - फ़ील्ड भरने के लिए अनिवार्य नहीं है, दर्ज किए गए डेटा के बारे में कोई त्रुटि संदेश नहीं देता है, हालांकि, यह आपको केवल उसी प्रकार की ड्राइव करने की अनुमति देता है जो टाइप टेक्स्ट के लिए परिभाषित किया गया है (यानी मुखौटा काम करने के लिए बना हुआ है);
अधिकतम गति: 500 - अधिकतम पाठ की लंबाई 500 वर्ण है;
अलग: सच - पाँचवीं के बाद प्रत्येक वर्ण को ट्रिम करें।

मॉड्यूल में हमारे पास क्या होगा:

 text : function() { $("#"+this.id).live("paste", $.proxy(this.maskPasteText, this)); $("#"+this.id).live("keyup", $.proxy(this.validateText, this)); $("#"+this.id).live("blur", $.proxy(this.finishText, this)); }, 

यहां हम सत्यापन विधियों और मास्क को पेस्ट, कीप, धब्बा घटनाओं से जोड़ते हैं।

 maskPasteText: function(event) { var context = this; setTimeout(function() { context.validateText(event); }, 0); }, 

डेटा सम्मिलित करते समय, हम समय-समय पर हैंग करते हैं और सत्यापन फ़ंक्शन को कॉल करते हैं, ब्लूटूथ के साथ ही:

 finishText: function(event) { this.validateText(event); }, 

दरअसल, यहां पाठ सत्यापन कार्य स्वयं है:

 validateText: function(event) { var value = $("#"+this.id).val(), selectionStart = event.target.selectionStart, selectionEnd = event.target.selectionEnd; if (this.maxLength && this.separate) { value = value.slice(0, this.maxLength); $("#"+this.id).val(value); event.target.selectionStart = selectionStart, event.target.selectionEnd = selectionEnd; } this.bind("error", $.proxy(this.showError, this)); this.validate = this.validations()[this.type]; this.hideError(); this.set({ currentValue: value, required: this.required, errorMessage: this.errorMessage, minLength: this.minLength, maxLength: this.maxLength }); }, 

यह स्पष्ट है कि अन्य डेटा प्रकारों के लिए, उदाहरण के लिए, int, float, एक इनपुट मास्क भी जोड़ा जाना चाहिए; इसके लिए, हम कीपर ईवेंट के लिए फ़ंक्शन लटकाते हैं:

 maskTypeInt : function (event) { if ( !(event.charCode >= 48 && event.charCode <= 57 || event.charCode === 0) ) { event.preventDefault(); } }, maskTypeFloat : function (event) { var value = $("#"+this.id).val(), dots = value.search(/\./ig), commas = value.search(/,/ig); if ( !( event.charCode >= 48 && event.charCode <= 57 || (event.charCode === 46 && dots === -1) || (event.charCode === 44 && dots === -1 && commas === -1) || event.charCode === 0) ) { event.preventDefault(); } } 

सत्यापन वर्तमान में निम्न डेटा प्रकारों के लिए कार्यान्वित किया जाता है:
पूर्णांक,
नाव,
मूल्य,
फोन,
पाठ,
शब्दप्रोसेसर (छोटेMCE सत्यापन के लिए),
बता गया,
प्रपत्र (यहां सत्यापन कई क्षेत्रों के लिए होता है, जिसके लिए विकल्प आइटम सरणी में पास किए जाते हैं, यह बटन क्लिक करने पर फायर हो जाता है, बटन आईडी पास हो जाता है)।

आप मॉड्यूल कार्यक्षमता देख सकते हैं जो वर्तमान में यहां तैयार है ।
मॉड्यूल को अभी भी अंतिम रूप दिया जा रहा है, ताकि कोड पूरी तरह से साफ न हो, लेकिन यह पढ़ने में काफी आसान है।