jVForms.js - क्रॉस-ब्राउज़र फॉर्म सत्यापन पॉलीफ़िल

यह क्या है

1. टेक्स्ट जैसे स्वचालित रूप से HTML फॉर्म की जाँच करें।
2. प्रपत्रों को 'आवश्यक' और 'पैटर्न' विशेषताओं के खिलाफ जांचा जाता है और मुख्य रूप से उन ब्राउज़रों के लिए डिज़ाइन किया गया है जो इन विशेषताओं का समर्थन नहीं करते हैं।
3. निर्मित में त्वरित उपयोग के लिए टेम्पलेट्स का सेट।
4. फॉर्म और परे दोनों पर क्लिक करके किसी भी HTML तत्व पर एक फॉर्म सबमिशन हैंडलर स्थापित करने की क्षमता।

खैर, क्यों?

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

	इंटरनेट एक्सप्लोरर	क्रोम	ओपेरा	सफारी	फ़ायरफ़ॉक्स	एंड्रॉयड	आईओएस
अपेक्षित	10.0	5.0+	9.6+	एक्स	4.0+	2.3+	3.0+
पैटर्न	10.0	5.0+	9.6+	एक्स	4.0+	2.3+	3.0+

अच्छा हाँ! क्या करें?

आप सक्षम jVForms.js पॉलीफाइल का उपयोग कर सकते हैं, जो ज्यादा जगह नहीं लेता है, सेटिंग्स की आवश्यकता नहीं है (केवल कभी-कभी) और आपके लिए चेकिंग फॉर्म के सभी गंदे काम करता है।

और कैसे?

दस्तावेज़ के अंत में jVForms.min.js को शामिल करें इससे पहले कि `body` टैग को बंद करें और इसे प्रारंभ करें।

<script src="jVForms.min.js"></script> <script> jVForms.initialize(); </script> 

और फिर?

प्रपत्र फ़ील्ड में आवश्यक गुण बनाते हुए, `आवश्यक =" आवश्यक "जोड़ें।

 <input type="text" name="field_1" value="" required="required"/> 

HTML आवश्यक-विशेषता

विशेषता जोड़ें `प्रतिमान =" RegExp "`, जहाँ `RegExp` प्रपत्र को मान्य करने के लिए आपकी नियमित अभिव्यक्ति है।

 <input type="text" name="field_1" value="" required="required" pattern="^\d+$"/> 

HTML पैटर्न-विशेषता

एक नियमित अभिव्यक्ति क्या है?

यदि आपको एक नियमित अभिव्यक्ति को जोड़ने में कठिनाई हो रही है, तो आप बस कक्षा में उन्हें घोषित करके टेम्पलेट्स के तैयार किए गए सेट का उपयोग कर सकते हैं।

 <input type="text" name="field_1" value="" class=""/> 

टेम्पलेट सूची:

• vf-all: कोई भी वर्ण जो एक विभाजक वर्ण नहीं है
• vf-numInt: पूर्णांक
• vf-numFloat: दशमलव संख्या
• vf-notNum: संख्या नहीं
• vf-index: इंडेक्स
• vf-wordUpper: Ru या US अपरकेस में शब्द और एक चिन्ह (-)
• vf-wordLower: कम मामले में आरयू या यूएस में शब्द और एक संकेत (-)
• vf-wordRuUpper: Ru में शब्द अपरकेस और एक संकेत (-)
• vf-wordRuLower: Ru लोअरकेस और साइन में शब्द (-)
• vf-wordUSUpper: अमेरिकी शब्द अपरकेस और एक माइनस साइन (-) में
• vf-wordUSLower: यूएस लोअरकेस शब्द और एक डैश (-)
• vf-stringRu: यूएस अक्षरों से युक्त किसी भी तार की एक स्ट्रिंग
• vf-stringUS: आरयू अक्षर वाले किसी भी प्रकार की स्ट्रिंग नहीं
• vf-timeHM: प्रारूप घंटे में समय: मिनट
• vf-dateDMY: दिन / माह / वर्ष प्रारूप में तारीख
• vf-dataDMYus: प्रारूप माह / दिन / वर्ष में तारीख
• vf-cc: 9999 9999 9999 9999 प्रारूप में क्रेडिट कार्ड
• vf-phone: प्रारूप में नंबर ९९९ ९९ ९९ या ९९९९९९ या ९९९-९९ -९९ या ९९९-९९९९
• vf-phoneDash: प्रारूप में संख्या (999) 999-9999 या (999) 999 9999
• vf-phoneAlong: प्रारूप में संख्या (999) 9999999

आप किसी भी संख्या में टेम्प्लेट घोषित कर सकते हैं, लेकिन केवल पहला काम करेगा:

 <input type="text" name="field_1" value="" class="vf-numInt vf-wordUSLower vf-dataDMYus otherClass"/> 

पैटर्न विशेषता और पैटर्न वर्ग की घोषणा करते समय, पैटर्न वर्ग काम नहीं करेगा:

 <input type="text" name="field_1" value="" required="required" pattern="^\d+$" class="vf-numInt"/> 

यदि विशेषता `आवश्यक =" आवश्यक है "छोड़ दिया गया है और एक टेम्पलेट वर्ग या विशेषता 'पैटर्न' जोड़ा गया है, तो इस फ़ील्ड की आवश्यकता नहीं है:
लेकिन अगर यह अभी भी भरा है, तो इसकी जाँच की जाएगी:

 <input type="text" name="field_1" value="" class="vf-numInt"/> 

भेजें मुझे शोभा नहीं देता!

प्रपत्र के भीतर किसी अन्य तत्व पर हैंडलर को स्थापित करने के लिए, आपको इसमें vf- जमा वर्ग जोड़ना होगा:

 <form> <input type="text" required="required" name="name" class="vf-numInt"/> <input type="text" name="phone"/> <textarea name="area"></textarea> <span class="vf-submit"></span> </form> 

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

 <form id="formId"> <input type="text" required="required" name="name" class="vf-numInt"/> <input type="text" name="phone"/> <textarea name="area"></textarea> </form> <span class="vf-submit formId" ></span> 

मुझे केवल गलतियाँ चाहिए।

प्रपत्र सत्यापित करते समय jVForms सूचनाओं के प्रकार को बदलने में सक्षम है, इसके लिए तीन मान आवंटित किए गए हैं:

• बंद: सूचनाएं अक्षम करें;
• सभी: सही और गलत क्षेत्रों को उजागर करें;
• त्रुटि: केवल अमान्य फ़ील्ड हाइलाइट करें;

डिफ़ॉल्ट मान "सभी" है। इस मान को "ऑफ़" में बदलने के लिए, उदाहरण के लिए, इनिशियलाइज़िंग फंक्शन को पास करना आवश्यक है:

 <script> jVForms.initialize({ notice: 'Off' }); </script> 

और परिणाम क्या है?

नतीजतन, हमें एक छोटी पॉलीफ़िल मिली, जो साबुन की तरह सरल है। अब आधुनिक ब्राउज़रों में अंतर्निहित स्वचालित हाइलाइटिंग है, इसलिए jVForms.js का उपयोग करते समय कोई विरोधाभास और दृश्य अस्वीकृति नहीं होती है।

Git: jVForms.js

आपका ध्यान के लिए धन्यवाद!

यहाँ डेमो !