प्रपत्र सत्यापन विकास

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



हम जितना अधिक उपयोगकर्ता को संकेत दे सकते हैं कि भरने की प्रक्रिया के दौरान फॉर्म को सही तरीके से कैसे भरें, कम मौका है कि वह एक गलती करेगा। CSS3 फॉर्म सत्यापन उदाहरण पर एक नज़र डालें जो क्रोम 4+, सफारी 5+, या ओपेरा 9.6+ जैसे CSS3 UI छद्म वर्गों का समर्थन करने वाले ब्राउज़र में है। मैंने CSS-आधारित सत्यापन बनाने के लिए CSS3 UI pseudo-classes और HTML5 फॉर्म विशेषताओं का उपयोग किया। आइए देखें कि यह कैसे काम करता है।

CSS3 UI छद्म वर्ग

यूआई मॉड्यूल में कई छद्म वर्ग होते हैं जो अपने राज्य के आधार पर फ़ील्ड बनाने में मदद करते हैं।

• वैध
• अमान्य
• अपेक्षित
• ऐच्छिक
• में दूरी
• बाहर के रेंज
• केवल पढ़ने के लिए
• पढ़ने-लिखने की

ऊपर दिखाए गए डेमो में, मैंने सत्यापन करने के लिए required



, invalid



और valid



छद्म वर्गों का उपयोग किया।

input:focus:required:invalid {

background: pink url(ico_validation.png) 379px 3px no-repeat;

}

input:required:valid {

background-color: #fff;

background-position: 379px -61px;

}



* This source code was highlighted with Source Code Highlighter .

चूंकि हम इंगित करना चाहते हैं कि क्षेत्र केवल तभी सक्रिय नहीं है, जब हम फ़ील्ड के लिए invalid



शैली को कॉल करने के लिए focus



छद्म वर्ग का उपयोग करते हैं (स्वाभाविक रूप से, सभी आवश्यक फ़ील्ड को बहुत शुरुआत से invalid



रूप में चिह्नित करना एक खराब डिज़ाइन निर्णय होगा)।



सत्यापन से गुजरने वाले आवश्यक क्षेत्रों पर ध्यान आकर्षित करने के लिए, एक शैली एक विस्मयादिबोधक चिह्न के साथ एक आइकन दिखाती है, जो उपयोगकर्ता को चेतावनी देती है कि कुछ दर्ज किया जाना चाहिए। क्षेत्र की जांच करने के बाद, यदि वह प्रतिबंधों को पारित करता है, तो valid



छद्म वर्ग को कहा जाता है। अब हम focus



छद्म वर्ग को हटाते हैं ताकि क्षेत्र की वैधता का संकेत देने वाला हरा चेकमार्क बना रहे।



ऊपर सूचीबद्ध छद्म वर्गों के सभी मूल्य स्वयं के लिए बोलते हैं। in-range



और out-of-range



द out-of-range



छद्म-वर्गों का उपयोग min



और max



विशेषताओं के संयोजन में किया जाना चाहिए, चाहे वह input[type=range]



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



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

हमारी मदद करने के लिए अतिरिक्त प्रकार और विशेषताएँ।

HTML5 रूपों में, नए input



प्रकार, जैसे email



, url



और number



, को भी लागू किया जाता है। उदाहरण के लिए, email



valid



छद्म वर्ग को कॉल करता valid



जब उपयोगकर्ता सही ई-मेल पते में प्रवेश करता है, तो यही बात numer



और url



फ़ील्ड के लिए होती है। अलग-अलग ब्राउज़र में url



फील्ड को url



करना अलग है। ओपेरा में, टाइपिंग "http://"



एक मान्य फ़ील्ड को इंगित करता है, क्रोम में "http://w"



, और सफारी में, बस "http:"



टाइप कर रहा है।



placeholder



, required



, max



maxlength



, pattern



, min



, max



और step



जैसे मान्य फ़ील्ड में मदद करने के लिए कई और विशेषताएँ हैं।

< input id ="postcode" name ="postcode" type ="number" min ="1001" max ="8000" maxlength ="4" required />



* This source code was highlighted with Source Code Highlighter .

पिनकोड फ़ील्ड नए प्रकार की number



और कई नई विशेषताओं का उपयोग करता है। ऑस्ट्रेलिया में, एक ज़िप कोड केवल 4 अंक हो सकता है, इसलिए हम इसे सीमित करने के लिए maxlength



निर्धारित करते हैं। हम सूचकांक के अधिकतम और न्यूनतम मूल्यों को भी सीमित करना चाहते हैं, इसके लिए min



और max



विशेषताओं का उपयोग किया जाता है। required



विशेषता स्वयं के लिए बोलती है (आवश्यक फ़ील्ड)।



हम min



और max



साथ-साथ अधिक प्रतिबंध के लिए, step



विशेषता का उपयोग कर सकते हैं। डिफ़ॉल्ट रूप से, चरण एक पर सेट है। इसलिए, min



और max



बीच कोई भी संख्या मान्य है। यदि आप step



100 के मान को बदलते हैं, तो मान 100 से वेतन वृद्धि में min



लेकर max



सीमा तक की जाँच की जाएगी। उदाहरण के लिए, step



विशेषता 1001, 1101, 1201, 1301 और इसी तरह के क्षेत्र मूल्यों के लिए मान्य होगी।

नमूना खोज

अधिक विशिष्ट प्रतिबंधों वाले क्षेत्र पर invalid



छद्म वर्ग को कॉल करने के लिए, उदाहरण के लिए, फोन नंबर फ़ील्ड पर, हम pattern



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

< input type ="tel" id ="tel" name ="tel" pattern ="\d{10}" placeholder ="Please enter a ten digit phone number" required />





* This source code was highlighted with Source Code Highlighter .

इस उदाहरण में, रेगेक्स बहुत सरल है, "मैं केवल 10 अंकों को स्वीकार करता हूं और इससे ज्यादा कुछ नहीं।" इस प्रकार, फ़ील्ड तब तक अमान्य होगी जब तक कि नियमित अभिव्यक्ति निष्पादित नहीं होती है। ध्यान दें कि मैंने उपयोगकर्ता को संकेत देने के लिए placeholder



विशेषता का उपयोग किया था।



वास्तव में, हम pattern



विशेषता के मूल्य के लिए और अधिक जटिल नियमित अभिव्यक्ति जोड़कर अधिक शक्तिशाली स्थितियाँ निर्धारित कर सकते हैं, उदाहरण के लिए, पासवर्ड फ़ील्ड के लिए:

< input id ="password" name ="password" type ="password" title ="Minimum 8 characters, one number, one uppercase and one lowercase letter" required pattern ="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[AZ])(?=.*[az]).*" />



* This source code was highlighted with Source Code Highlighter .

अब हमारे पास अधिक कड़े प्रतिबंध हैं, जो हमें उपयोगकर्ता को अधिक सुरक्षित पासवर्ड दर्ज करने के लिए मजबूर करने की अनुमति देता है। पासवर्ड में कम से कम 8 अक्षर होने चाहिए, जिसमें एक नंबर, एक लोअरकेस और एक कैपिटल लेटर होना चाहिए।



उपयोगकर्ता की मदद करने के लिए, हम title



विशेषता का उपयोग करते हैं। हम इस मामले में placeholder



विशेषता का उपयोग नहीं करते हैं, क्योंकि यह केवल लघु संदेशों के लिए अभिप्रेत है।

सहायक युक्तियाँ जोड़ना

यदि उपयोगकर्ता फ़ील्ड पर मंडराता नहीं है, तो वह title



विशेषता में अतिरिक्त निर्देश कभी नहीं देखेगा। आप देख सकते हैं कि phone



, postcode



और password



फ़ील्ड के लिए उपयोगी संकेत दिखाई देते password



, यह तब मदद करता है जब उपयोगकर्ता को अतिरिक्त निर्देशों की आवश्यकता होती है।

< input id ="password" type ="password" />

< p class ="validation01" >

< span class ="invalid" > Minimum 8 characters, one number, one uppercase letter and one lowercase letter </ span >

< span class ="valid" > Your password meets our requirements, thank you. </ span >

</ p >



* This source code was highlighted with Source Code Highlighter .

ऊपर दिए गए मार्कअप में दोनों राज्यों के अतिरिक्त कंटेनर हैं - फ़ील्ड वैध है और मान्य नहीं है। इस प्रकार, जब क्षेत्र मान्य नहीं है, तो इसमें ऐसी जानकारी होगी जो उपयोगकर्ता को सही डेटा दर्ज करने में मदद करेगी। जब सब कुछ सही हो जाता है, तो हमारा संदेश और एक हरे रंग की चेक मार्क उसे समझाती है कि क्षेत्र सही ढंग से भरा हुआ है।

.validation01 {

background: red;

color: #fff;

display: none;

font-size: 12px;

padding: 3px;

position: absolute;

right: -110px;

text-align: center;

top: 0;

width: 100px;

}

input:focus + .validation01 {

display: block;

}

input:focus:required:valid + .validation01 {

background: green;

}

input:focus:required:valid + .validation01 .invalid {

display: none;

}

input:focus:required:invalid + .validation01 .valid {

display: none;

}



* This source code was highlighted with Source Code Highlighter .

संकेत को दिखाने या छिपाने के लिए, क्षेत्र की स्थिति के आधार पर, हम पड़ोसी को वांछित संकेत वाले पड़ोसी तत्व को जोड़ने के साथ छद्म वर्गों की एक श्रृंखला को इंगित कर सकते हैं। फ़ील्ड को सही तरीके से भरने के बाद, पृष्ठभूमि का रंग हरे रंग में बदल जाता है और संबंधित संदेश प्रदर्शित होता है।

इस दृष्टिकोण की यूएक्स समस्याएं

किसी क्षेत्र की आवश्यकता होने पर अमान्य छद्म वर्ग का उपयोग करने में एक बड़ी समस्या है और अतिरिक्त शर्तें हैं जो पूरी होनी चाहिए। उदाहरण के लिए, जब फ़ील्ड की आवश्यकता होती है और इसका प्रकार ईमेल होता है, तो यह तब तक मान्य नहीं होगा जब तक कि इसकी सभी शर्तें पूरी नहीं हो जाती हैं और invalid



लिए शैलियों का उपयोग बहुत शुरुआत से ही किया जाएगा, उपयोगकर्ता द्वारा कुछ भी दर्ज करने से पहले। इसीलिए हमने invalid



शैलियों को दिखाने के लिए focus



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



इसका समाधान radio



और checkbox



input



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



स्थिति को ठीक कर सकता है और आपको सत्यापन स्थिति के आधार पर फ़ील्ड के लिए इष्टतम शैली लागू करने की अनुमति दे सकता है।



इसके अलावा, हम जावास्क्रिप्ट के बिना कुछ बहुत बड़ी कार्यक्षमता कर सकते हैं। हम कह सकते हैं कि यदि क्षेत्र में फ़ोकस है तो वह किस स्थिति में है, यदि आवश्यक हो, तो उसे नियमित अभिव्यक्ति में निर्दिष्ट एक निश्चित पैटर्न के अनुरूप बताएं, न्यूनतम और अधिकतम मान और बहुत कुछ इंगित करें। लेकिन क्या होगा अगर यह पर्याप्त नहीं है? अगर हम और चाहते हैं तो क्या होगा? सौभाग्य से, एचटीएमएल 5 रूपों पर अध्याय भी सत्यापन प्रतिबंध सत्यापन एपीआई को परिभाषित करता है ।

वैधता सीमा मान्यकरण एपीआई

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



प्रत्येक प्रपत्र फ़ील्ड में एक नई validity



विशेषता होती है। validity



विशेषता एक वैधता स्थिति प्रदान करती है जो वर्तमान वैधता की स्थिति प्रदान करती है। ValidityState



ऑब्जेक्ट में कई बूलियन चर होते हैं जो यह निर्धारित करते हैं कि किसी विशेष तत्व की स्थिति क्या है। मूल रूप से, उनके उत्तर सही / गलत हैं जो डेवलपर को यह समझने में सक्षम करते हैं कि क्षेत्र में क्या गलत है:

• valueMissing
  
  यदि आवश्यक फ़ील्ड खाली है, तो यह विशेषता सही है।
• typeMismatch
  
  नए इनपुट प्रकारों तक फैली हुई है। उदाहरण के लिए, यदि ईमेल मूल्य सही नहीं है, तो यह विशेषता सही हो जाएगी।
• patternMismatch
  
  यदि तत्व में एक पैटर्न विशेषता है और इसका मान नियमित अभिव्यक्ति की शर्तों से मेल नहीं खाता है, तो विशेषता सही हो जाएगी।
• बहुत लंबा
  
  यदि किसी तत्व का मान उसकी अधिकतम गति से अधिक है, तो यह विशेषता सही हो जाएगी।
• रेंजउंडरफ्लो और रेंजऑवरफ्लो
  
  यदि तत्व मान न्यूनतम या अधिकतम विशेषताओं के बाहर है, तो यह विशेषता सही हो जाएगी।
• stepMismatch
  
  जब चरण विशेषता वाला कोई तत्व आवश्यक मान से मेल नहीं खाता है, तो यह विशेषता सही हो जाएगी।
• वैध
  
  यदि उपरोक्त मानों में से कोई भी सत्य है, तो यह विशेषता गलत होगी। अन्यथा, यदि सभी शर्तें पूरी हो जाती हैं, तो यह सच हो जाएगा।

वह सब नहीं है

invalid



ईवेंट एक और उपयोगी सुविधा प्रदान करता है। इसे फ़ील्ड द्वारा बुलाया जाएगा, जबकि इसका मूल्य अमान्य है। तो, इसके साथ, हम उनकी वर्तमान स्थिति के अनुसार खेतों की शैलियों को बदल सकते हैं।



इसके अलावा, checkValidity()



पद्धति को किसी एक क्षेत्र या सामान्य रूप में निष्पादित किया जा सकता है, जो सही या गलत है।

डेमो करने के लिए लागू है

आइए हमारे पिछले डेमो को लें और इसे सत्यापन प्रतिबंध सत्यापन एपीआई के साथ सुधारें। वेब फॉर्म लेख में इनलाइन सत्यापन में ल्यूक व्रॉब्ल्वस्की से हमने जो सीखा और अपने स्वयं के डेटा को लेते हुए, हम इन विचारों को अपने डेमो फॉर्म में एक इष्टतम सत्यापनकर्ता बनाने के लिए लागू कर सकते हैं।



पहली चीज जिसे हम ठीक कर सकते हैं वह है अमान्य क्षेत्र के लिए तत्काल शैलीकरण। क्षेत्र की शैली को तुरंत बदलने के बजाय, यह दिखाते हुए कि उपयोगकर्ता गलत डेटा दर्ज कर रहा है, हम तब तक प्रतीक्षा करते हैं जब तक उपयोगकर्ता फ़ील्ड छोड़ नहीं देता।



यदि डेटा आवश्यकताओं को पूरा करता है, भले ही फ़ील्ड फ़ोकस में हो, तो हम उपयोगकर्ता को बताएंगे कि फ़ील्ड मान्य है। हम क्षेत्र की वैधता की जांच करने के लिए input



लिए घटनाओं को जोड़कर ऐसा करते हैं। यदि सब कुछ सही है, तो हम शैलियों को अपडेट करते हैं और तुरंत परिणाम दिखाते हैं।



यदि फ़ील्ड का गलत मान है और उपयोगकर्ता अगले फ़ील्ड पर जाता है, तो blur



घटना फ़ील्ड की वैधता की जांच करेगी, और फिर invalid



शैलियों को लागू करेगी। ताकि उपयोगकर्ता त्रुटि के बारे में जान सके। यह त्रुटि शैलियों के प्रदर्शन को बनाए रखेगा जब तक कि वे ठीक न हो जाएं।

पुराने ब्राउज़रों के बारे में क्या?

सभी विषयों में, आधुनिक ब्राउज़रों के लिए नए उत्पादों और समर्थन पर चर्चा की जाती है, यह सब अच्छा है, लेकिन वास्तविक दुनिया के बारे में नहीं भूलना चाहिए, जहां हमें पुराने ब्राउज़र का समर्थन करना चाहिए। ऐसा करने के लिए, मैंने आपको ऐसा करने में मदद करने के लिए एक स्क्रिप्ट लिखी।



HTML5 रूपों और सत्यापन प्रतिबंध सत्यापन API का समर्थन नहीं करने वाले ब्राउज़रों के लिए, स्क्रिप्ट इस कार्यक्षमता का अनुकरण करती है। इस कार्यक्षमता का समर्थन करने वाले ब्राउज़रों के लिए, स्क्रिप्ट समर्थन की उपलब्धता को निर्धारित करेगी और ब्राउज़र टूल का उपयोग करके कार्यक्षमता को निष्पादित किया जाएगा। आइए एक जोड़े गए स्क्रिप्ट के साथ डेमो के अगले अपडेट पर एक नज़र डालें। आईई या फ़ायरफ़ॉक्स में स्क्रिप्ट की कार्यक्षमता देखने के लिए जांचें, वांछित कार्यक्षमता का समर्थन करने वाले ब्राउज़रों के समान।

ब्राउज़र का समर्थन

स्क्रिप्ट का परीक्षण किया गया है और निम्नलिखित ब्राउज़रों में काम करता है:

• IE6 +
• फ़ायरफ़ॉक्स 1+ - FF4 में अंतर्निहित समर्थन होगा;
• Chrome 4+ - मूल समर्थन;
• सफारी 3.2+ - सफारी 5 में अंतर्निहित समर्थन है;
• ओपेरा 9.6+ - मूल समर्थन।

एक स्क्रिप्ट द्वारा उत्सर्जित कार्य:

• प्रत्येक फ़ील्ड में एक validity
  
  
  
  ऑब्जेक्ट है, जो वर्तमान स्थिति को जानना संभव बनाता है;
• checkValidity()
  
  
  
  विधि checkValidity()
  
  
  
  यह दर्शाता है कि फॉर्म या कोई एकल तत्व मान्य नहीं है;
• विशेषताएँ placeholder
  
  
  
  , required
  
  
  
  , min
  
  
  
  , max
  
  
  
  और step
  
  
  
  ;
• टेक्‍स्‍टेरिया के लिए placeholder
  
  
  
  और required
  
  
  
  विशेषताओं के लिए समर्थन;
• select
  
  
  
  तत्व के लिए required
  
  
  
  समर्थन सहायता;
• अंतर्निहित नियमित अभिव्यक्ति का उपयोग करके input
  
  
  
  लिए ईमेल और url
  
  
  
  प्रकारों की जाँच की जाएगी।

चेक की बहुतायत

HTML5 रूपों और CSS3 UI मॉडल के लिए ब्राउज़र समर्थन में सुधार होने लगा है। Opera9 वेब प्रपत्र 2.0 का समर्थन करना जारी रखेगा, जब तक कि वे HTML5 रूपों के साथ संयुक्त न हों। क्रोम 4 संस्करण से क्रोम में दिखाई दिया, सफारी ने इसे हाल ही में संस्करण 5 की रिलीज के साथ प्राप्त किया, फ़ायरफ़ॉक्स को आगामी बीटा संस्करण 4 और IE9 में समर्थन जोड़ना चाहिए, यदि वे इस गति से विकास करना जारी रखते हैं, तो उन्हें समर्थन भी मिलना चाहिए।



हम सीएसएस 3 और एचटीएमएल 5 अनुभागों के साथ अद्भुत चीजें कर सकते हैं। सभी ब्राउज़र समर्थन में सुधार करते हैं और यह फ़ॉर्म सत्यापन विधि व्यवहार्य हो जाती है, किसी भी सरल या जटिल रूपों को मान्य करने में सक्षम होती है।