tFormer.js - अपने HTML रूपों को सशक्त करें

प्रस्तावना:

क्या आपको फॉर्म बनाने थे? क्लाइंट पर इन रूपों को मान्य करने के लिए एक स्क्रिप्ट लिखना है? क्या आपने कभी फार्मों को मान्य करने के लिए मौजूदा प्लगइन्स / ऐड-ऑन का उपयोग किया है?
मेरे पास था, लेकिन मैं 100% संतुष्ट नहीं था या तो समस्या को हल करने के दृष्टिकोण के साथ-साथ (प्रत्येक प्रोजेक्ट के लिए मेरी सत्यापन स्क्रिप्ट अपने रूपों के तहत), या जिस तरह से मौजूदा तीसरे पक्ष के प्लगइन्स काम करते हैं।

समस्या:

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

उद्देश्य:

सहज ज्ञान युक्त वाक्य-विन्यास के साथ और मान्य करने के लिए पूरी तरह से अनुकूलनीय, लचीला, सुविधाजनक रूप से कुछ बनाएं।

समाधान:

समाधान में tFormer.js नामक एक छोटे से ओपन सोर्स प्लगइन का परिणाम हुआ ।

मुख्य विशेषताएं और विशेषताएं:

स्वतंत्रता - आजकल jQuery (एक दुर्लभ वस्तु) की आवश्यकता नहीं है ;
सत्यापन नियमों की एक बड़ी सूची;
सभी सत्यापन नियम छोटे और सहज हैं - याद रखने और उपयोग करने में आसान;
एक नई tFormer ऑब्जेक्ट को इनिशियलाइज़ करते समय केवल एक डेटा-विशेषता या विकल्पों के माध्यम से नियमों को मिलाना और स्थापित करना;
एक अलग वस्तु जो मानों के सत्यापन को स्वयं करती है उसका उपयोग मुख्य प्लगइन के बाहर या अतिरिक्त जटिल सत्यापन के लिए किया जा सकता है;
"कस्टम" स्वयं () सत्यापन समारोह - एक विशिष्ट क्षेत्र के जटिल सत्यापन के लिए डेवलपर द्वारा लिखा जा सकता है;
"फ्लाई पर" (सेटरुल्स () और सेट () के तरीकों) के नियमों और सेटिंग को बदलना;
नियंत्रण जमा घटनाओं और दृश्य नियंत्रण सबमिट बटन;
सत्यापन की जाँच के लिए बटन (चेक बटन);
चर सत्यापन घटना (डिफ़ॉल्ट रूप से, सत्यापन के लिए घटना "इनपुट" और "कीप") है;
टाइमआउट सत्यापन में देरी;
प्रसंस्करण की स्थिति;
सभी क्षेत्रों के लिए विकल्प सेट करने की क्षमता और प्रत्येक क्षेत्र के लिए अद्वितीय;
onerror और onvalid फ़ंक्शन जो सत्यापन के बाद आग लगाते हैं;
फ़ंक्शन को सत्यापन से पहले हर बार निष्पादित किया जाता है;
AJAX प्रतिक्रिया (अंत में (परिणाम) फ़ंक्शन के लिए सख्त नियमों के बिना AJAX सत्यापन, डेवलपर को प्रतिक्रिया संसाधित करके सही या गलत लौटना चाहिए);
त्रुटि, प्रसंस्करण और विकलांग वर्गों का संशोधन;
... और इसी तरह।

स्थापना और उपयोग:

डाउनलोड;
वांछित पृष्ठ पर स्क्रिप्ट कनेक्ट करें;
वांछित विकल्पों के साथ एक नया tFormer ऑब्जेक्ट को परिभाषित करें।

उदाहरण के लिए HTML फॉर्म:

<form id="my_form_id"> <input type="text" name="zip" data-rules="a1 l=5" /> <input type="text" name="email" data-rules="* @" /> <input type="submit" value="Submit" /> </form>

एक tFormer न्यूनतम परिभाषा का एक उदाहरण:

 var my_form_id = new tFormer('my_form_id');

संशोधनों के साथ tFormer निर्धारित करने का एक उदाहरण:

 var my_form_id = new tFormer('my_form_id', { errorClass: 'my_own_errorClass', //    ,     timeout: 666, //   disabledClass: 'i_am_disabled', onerror: function(){ //    console.log('The field with name `' + this.name + '` is not valid'); }, //   …. fields: { //       email: { timeout: 500 //     email } } });

सत्यापन नियमों की सारांश तालिका:

नियम	विवरण
`*`	आवश्यक फ़ील्ड (मान रिक्त नहीं हो सकता)
`@` , `@` , `ip` , `base64` , `url`	ईमेल, अल्पविराम से अलग किए गए ईमेल, IP पता, Base64 स्ट्रिंग, URL (क्रमशः)
`<` , `>` , `>=` , `<=`	संख्याओं के साथ फ़ील्ड मानों की तुलना करना। (उदाहरण " `>=10` " - फ़ील्ड मान 10 से अधिक या उसके बराबर होना चाहिए)
`l=` , `l<` , `l>` , `l>=` , `l<=`	किसी फ़ील्ड मान के वर्णों की संख्या की तुलना करना (उदाहरण " `l=5` " - मान 5 वर्ण होना चाहिए)
`=` , `=#`	किसी विशिष्ट मान (' `=10` ', ' `=some_value` ') या निर्दिष्ट आईडी (' `=#some_id` ') के साथ कुछ फ़ील्ड के मूल्य के साथ `=#some_id`
`!=` `!`	के बराबर नहीं है या नहीं है (' `!=some_value` ' - 'some_value', ' `!.com` ' के बराबर नहीं है - '.com' में नहीं है)
`c` , `cv` , `cm` , `ca` , `cd`	क्रेडिट कार्ड सत्यापन (सभी प्रकार, वीज़ा, मास्टरकार्ड, एमेक्स, खोज)
`D=`	दिनांक प्रारूप के अनुपालन की तुलना (उदाहरण के लिए, " `D=YMD` " - वर्ष-माह की तारीख के अनुपालन की जाँच)

कोड के टुकड़े:

बदलते विकल्पों और सत्यापन नियमों का उदाहरण:

 my_form_id.set({timeout: 555}); //     my_form_id.setRules(' ', 'email'); //     -

सत्यापन के लिए एक अलग ऑब्जेक्ट (मुख्य प्लगइन द्वारा उपयोग किया जाता है और इसे अलग से इस्तेमाल किया जा सकता है):

 _v_('some value').validateWithRules('* l>5'); // => true

एक जटिल प्रकार के क्षेत्रों को सत्यापित करने के लिए कस्टम फ़ंक्शन (डेवलपर द्वारा आवश्यक के रूप में बनाया गया) ::

 var my_form = tFormer('my_form_id', { fields: { field_name: { own: function(){ var my_value = this.value; var is_ip = _v_(my_value).validateWithRules('* ip'); var is_email = _v_(my_value).validateWithRules('* @'); var is_url = _v_(my_value).validateWithRules('* url'); return (is_ip || is_email || is_url); } } } });

प्रपत्र की स्थिति की निगरानी के लिए तरीके :

 //  /    my_form.submitButtonControl( true ); //  - submitButtonOn() my_form.submitButtonControl( false ); //  - submitButtonOff() //  /       my_form.processing( true ); //  - processingOn() my_form.processing( false ); //  - processingOff() //       my_form.lock(); my_form.unlock(); //      unlock()      lock()

प्लगइन स्थिति:

प्लगइन ने संस्करण 0.3 पर कदम रखा है और अब बीटा में है।
यह ब्राउज़रों के नए संस्करणों में काम करता है और यहां तक कि IE8 में (मुझे भ्रमित होना पड़ा)।
गितुब पर झूठ, जहां तक संभव हो और समय, अतिरिक्त विचारों के लिए इंतजार कर रहा है और सभी इच्छुक डेवलपर्स से काम करता है :)

लिंक

मुख्य (पूर्ण) प्रलेखन - http://tFormerjs.com
गितुब भंडार - https://github.com/TjRus/tFormer.js

tFormer.js - सत्यापन बाइक बनाते हैं