HTML रूपों की मान्यता और बढ़ी हुई कार्यक्षमता

HTML फॉर्म सत्यापन बहुत कम ध्यान देते हैं। उदाहरण के लिए, यहां तक ​​कि habrahabr.ru पर भी , जब मैं कई बार पंजीकरण कर रहा था और साइट पर प्रवेश कर रहा था, मुझे एक त्रुटि संदेश मिला: या तो सुरक्षा कोड गलत तरीके से दर्ज किया गया था, फिर लॉगिन में मैंने लॉगिन के बजाय ईमेल का संकेत दिया। और ऐसा भी होता है कि उपयोगकर्ताओं को फोन नंबर या संगठन के विवरण में अंकों की संख्या के साथ गलत किया जाता है, वे रूसी पत्र "सी" को अंग्रेजी के साथ भ्रमित करते हैं, जब डेटा में विंडोज अतिरिक्त रिक्त स्थान में कॉपी और पेस्ट किया जाता है।

बेशक, यह सब घातक नहीं है। लेकिन सर्वर पर भेजने से पहले डेटा की जांच करना बेहद सुविधाजनक होगा। विशेष रूप से कैप्चा, क्योंकि आप अक्सर इसे एक त्रुटि के साथ दर्ज करते हैं।

इस समस्या को हल करने के कई तरीके थे: HTML5, jQuery Validate, zForms.ru और कई कम प्रसिद्ध पुस्तकालय। लेकिन इन सभी विधियों में उनकी कमियां थीं: HTML5 सभी ब्राउज़रों द्वारा समर्थित नहीं है और इसमें खाली फ़ील्ड नहीं भेजने का विकल्प नहीं है, नियमित अभिव्यक्ति के साथ असंगतता के बारे में एक संदेश सेट करें, फ़ील्ड में प्रवेश करने के लिए वैध वर्णों की सूची को सीमित करें, फ़ील्ड गोंद करने की क्षमता, csv प्रारूप या sums में चेकबॉक्स मान भेजें। मान।

ZForms.ru में कोई स्रोत नहीं हैं, यह इंगित करने का कोई तरीका नहीं है कि उपयोगकर्ता-फ़ंक्शन की जाँच संसाधन-गहन है और ऑनकेंज इवेंट पर करने की आवश्यकता है, ऑनकेयप पर नहीं। कार्यक्षमता एक बहुत ही बोझिल डिजाइन द्वारा निर्धारित की गई है, जो हमें फॉर्म को भरने से रोकती है जैसा हम चाहते हैं। और कई मापदंडों को फॉर्म में पास किया जाता है: onclick = "return {oOptions: {sPlaceHolder: '10 से अधिक वर्ण नहीं', iMaxLength: 10}}", जो वेबमास्टर के लिए सबसे आसान तरीका नहीं है।

jQuery Validate को javascript और jQuery के ज्ञान की आवश्यकता होती है। हालाँकि यह स्पष्ट है कि यहाँ आप अपनी इच्छानुसार HTML फॉर्म को प्रोग्राम कर सकते हैं।

लेकिन हमें वेबमास्टर के लिए एक सरल टूल की आवश्यकता थी, जहां हम इनपुट के लिए अतिरिक्त विशेषताओं को सेट कर सकते हैं, टैग का चयन कर सकते हैं, और सभी कार्यक्षमता स्वचालित रूप से कनेक्ट हो गई थी। इसलिए हमने ITForms.class.js लाइब्रेरी लिखी। पुस्तकालय मुक्त है और सक्रिय रूप से विकसित हो रहा है। यहाँ वह है जो पहले से समर्थित है:

1. <फ़ॉर्म ... डेटा-न-भेज-खाली-फ़ील्ड = 1> - यदि फ़ॉर्म टैग में डेटा-न-भेजें-खाली-फ़ील्ड = सत्य नहीं है, तो भेजने से पहले सभी रिक्त इनपुट फ़ील्ड हटा दिए जाएंगे। यह खोज फ़िल्टर के लिए बहुत सुविधाजनक है जब GET पद्धति का उपयोग करके जानकारी प्रसारित की जाती है।
2. <इनपुट ... डेटा-मिनट-लंबाई - पाठ फ़ील्ड के लिए वर्णों की न्यूनतम संख्या। data-min-length = 1 अनिवार्य रूप से इसका मतलब है कि क्षेत्र की आवश्यकता है।
3. <input ... data-regexp - नियमित अभिव्यक्ति के लिए पाठ क्षेत्र की जाँच करें।
4. <इनपुट ... डेटा-सक्षम-वर्ण - मान्य वर्णों की सूची, कीबोर्ड से अन्य वर्णों को दर्ज नहीं किया जा सकता है।
5. <इनपुट ... डेटा-प्लेसहोल्डर - टेक्स्ट फ़ील्ड में प्लेसहोल्डर सेट करता है। यह HTML5 के मानक कार्यान्वयन से भिन्न है कि यदि आप फ़ील्ड में वर्ण दर्ज करते हैं और फिर एक रिक्त मान सेट करते हैं, तो डेटा-प्लेसहोल्डर को प्रदर्शित नहीं किया जाएगा ताकि उपयोगकर्ता भ्रमित न हो। आपके पास मानक-प्लेसहोल्डर या डेटा-प्लेसहोल्डर चुनने के लिए किस व्यवहार का विकल्प है।
6. <input | select ... data-help - टेक्स्ट फील्ड पर फोकस सेट करते समय टूलटिप बनाता है।
7. <select ... data-combobox - वर्तमान सूची के लिए कॉम्बोक्स सेट करें।
8. <इनपुट ... डेटा-मिनट-मूल्य - संख्या और दिनांक का न्यूनतम मूल्य;
9. <इनपुट ... डेटा-अधिकतम-मूल्य - संख्या और दिनांक का अधिकतम मूल्य;
10. <कई का चयन करें = "एकाधिक" ... डेटा-मिनट-चयनित - चयनित-एकाधिक में चयनित तत्वों की न्यूनतम संख्या।
11. <कई का चयन करें = "एकाधिक" ... डेटा-अधिकतम-चयनित - चयन-एकाधिक में चयनित आइटम की अधिकतम संख्या।
12. <इनपुट प्रकार = फ़ाइल ... डेटा-फ़ाइल-प्रकार - अपलोड करने के लिए फ़ाइलों का प्रकार। कई प्रकार निर्दिष्ट किए जा सकते हैं, जिन्हें अल्पविराम द्वारा अलग किया जाता है।
13. <input | select ... data-user-func - अतिरिक्त सत्यापन के लिए उपयोगकर्ता-परिभाषित फ़ंक्शन को कॉल करें। सत्यापन सफल होने पर उपयोगकर्ता-परिभाषित फ़ंक्शन एक त्रुटि संदेश या एक रिक्त स्ट्रिंग लौटाता है। एक उपयोगकर्ता-परिभाषित फ़ंक्शन अन्य प्रपत्र फ़ील्ड के मूल्यों के आधार पर किसी क्षेत्र की वैधता की जांच कर सकता है। यह गतिशील रूप से फ़ील्ड मान लोड AJAX'om नए नए फ़ील्ड फ़ील्ड, डेटा, अन्य फ़ॉर्म फ़ील्ड बदलने के आधार पर भी हो सकता है। उदाहरण: data-user-func = "funcAlert ('1 पैरामीटर', '2 पैरामीटर');"
14. <input ... data-datepicker | data-datetimepicker | date-timepicker - वर्तमान क्षेत्र के लिए तीन कैलेंडर में से एक सेट करें।
15. <input ... data-async - यदि data-async = true है, तो प्रत्येक वर्ण दर्ज करने के बाद मान की जाँच की जाती है। यदि डेटा- async = false है, तो उस पर फ़ोकस हटाने या भेजने से पहले फ़ील्ड मान की जाँच की जाती है।
16. <इनपुट ... डेटा-स्लाइडर - स्लाइडर को बांधें। अधिक विस्तार से एक उदाहरण देखें।
17. यदि नियमित अभिव्यक्ति से मेल नहीं खाता है तो <input ... data-regexp-mis-msg - त्रुटि संदेश।

सार्वजनिक विधियाँ:
setCheckboxProperty (checkboxname, sendAs, minSelected, maxSelected);
// प्रेषक हो सकते हैं:
// 'सीएसवी' - तब चयनित चेकबॉक्स के मानों को चेकबॉक्सनाम = v1, v2, v2 ... vn के रूप में भेजा जाता है।
// 'योग' - तब चयनित चेकबॉक्स के मान बाइनरी जोड़े गए हैं s = v1 | v2 | v3 | vn और चेकबॉक्स का नाम = s भेजा गया है
// अन्य मामलों में और यदि कुछ भी निर्दिष्ट नहीं है, तो मानक रूप में चेकबॉक्स सर्वर को भेजे जाते हैं।
addMergeableField (फ़ील्डनाम, विभाजक, इनपुट्स) // उस फ़ील्ड का नाम जिससे अन्य क्षेत्रों के मानों को चिपकाया जाएगा, विभाजक, संयोजन करने के लिए फ़ील्ड की सूची
addEventListeners ($ ('jQuery चयनकर्ता') // गतिशील रूप से इनपुट तत्व को फॉर्म में जोड़ने के बाद, आपको इसके लिए ईवेंट हैंडलर जोड़ने की आवश्यकता है।
itform.setRadioProperty ('radioinput', 1); // सेट आवश्यक = 1 विकल्प को अनिवार्य बनाने के लिए।

आप देख सकते हैं कि यह सब कैसे काम करता है और itforms.ru पर लाइब्रेरी डाउनलोड करता है

हम टिप्पणियों और सुझावों का स्वागत करते हैं।

- एक महत्वपूर्ण इसके अलावा!

1. टिप्पणियों के लिए सभी को फिर से बहुत धन्यवाद, मैंने पहले ही कई को लागू किया है। अगला चरण बुनियादी प्रकारों का परिचय है।

2. itforms.class.js के स्रोत कोड को देखने के लिए एक बड़ा अनुरोध है। नामकरण चर और विधियों के साथ कुछ जाम हैं, कहीं सामान्य शैली टूटी हुई है, कहीं मैंने एक अच्छा नाम नहीं उठाया। कोष्ठक की शैली से, रिक्त स्थान के बजाय टैब, आदि। मैं बहस नहीं करूंगा, इसका स्वाद के बारे में बहस करने का कोई मतलब नहीं है, लेकिन अगर मामले पर टिप्पणी की जाती है, तो मुझे खुशी होगी। यह अच्छी तरह से blunders, कीड़े की खोज की जा सकती है।

योजनाएं भाषाएं जोड़ रही हैं। लेकिन सबसे पहले, मैं एल्गोरिथ्म को डीबग करना चाहता हूं ताकि कोड को अव्यवस्थित न किया जाए।