एचटीएमएल 5 कांस्टीट्यूशन वैलिडेशन में

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

यद्यपि हम स्मार्ट रूप से चुने गए यूएक्स डिज़ाइन पैटर्न के साथ अपने रूपों की उपयोगिता में सुधार कर सकते हैं, एचटीएमएल 5 में बाधा सत्यापन के लिए एक देशी तंत्र भी है जो हमें अनुमति देता है सही सामने में इनपुट त्रुटियों को पकड़ने.

इस पोस्ट में, हम पर ध्यान केंद्रित करेंगे ब्राउज़र-प्रदत्त बाधा सत्यापन, और कैसे डेवलपर्स विकास कर सकते हैं देखो HTML5 का उपयोग करके सुरक्षित उपयोगकर्ता इनपुट सुरक्षित करें.

हमें फ्रंट-एंड इनपुट वैलिडेशन की आवश्यकता क्यों है

इनपुट सत्यापन दो मुख्य लक्ष्य हैं। हमें जो सामग्री मिलनी चाहिए वह है:

1. उपयोगी

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

2. सुरक्षित

सुरक्षा का जिक्र करते समय, इसका मतलब है कि हमें इसकी जरूरत है दुर्भावनापूर्ण सामग्री के इंजेक्शन को रोकें - चाहे जानबूझकर या दुर्घटना से.

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

यदि डेवलपर्स ठीक से क्लाइंट साइड पर इनपुट को मान्य करते हैं, तो बैकएंड टीम को बहुत कम कमजोरियों से निपटना होगा. हैकिंग (एक साइट) अक्सर होती है अतिरिक्त डेटा जमा करना, या गलत प्रारूप में डेटा. डेवलपर्स इन जैसे सुरक्षा छिद्रों से लड़ सकते हैं, सफलतापूर्वक सामने के छोर से लड़ सकते हैं.

उदाहरण के लिए, यह PHP सुरक्षा गाइड ग्राहक की ओर से हमारे द्वारा की जाने वाली हर चीज की जांच करने की सिफारिश करता है। वे कई उदाहरण देकर फ्रंटएंड इनपुट सत्यापन के महत्व पर बल देते हैं, जैसे:

"इनपुट सत्यापन अत्यंत प्रतिबंधित मूल्यों के साथ सबसे अच्छा काम करता है, जैसे कि जब कुछ पूर्णांक, या अल्फ़ान्यूमेरिक स्ट्रिंग या HTTP URL होना चाहिए।"

सीमांत इनपुट सत्यापन में, हमारा काम है उचित बाधाओं को लागू करें उपयोगकर्ता इनपुट पर HTML5 की बाधा सत्यापन सुविधा हमें ऐसा करने का साधन प्रदान करती है.

एचटीएमएल 5 बाधा सत्यापन

HTML5 से पहले, सीमांत डेवलपर्स सीमित थे जावास्क्रिप्ट के साथ उपयोगकर्ता इनपुट को मान्य करना, जो एक थकाऊ और त्रुटि-प्रवण प्रक्रिया थी। क्लाइंट-साइड फ़ॉर्म सत्यापन को बेहतर बनाने के लिए, HTML5 ने एक परिचय दिया है बाधा सत्यापन एल्गोरिथ्म जो आधुनिक ब्राउज़रों में चलता है, और प्रस्तुत इनपुट की वैधता की जाँच करता है.

मूल्यांकन करने के लिए, एल्गोरिथ्म का उपयोग करता है इनपुट तत्वों के सत्यापन से संबंधित गुण, जैसे कि , </code>, तथा <code><select></code>. यदि आप जानना चाहते हैं कि ब्राउज़र में कदम दर कदम बाधा कैसे होती है, तो इस व्हाट्सएप डॉक को देखें.</p> <p>HTML5 की बाधा सत्यापन सुविधा के लिए धन्यवाद, हम सभी को निष्पादित कर सकते हैं <strong>मानक इनपुट सत्यापन कार्य</strong> क्लाइंट की तरफ <strong>जावास्क्रिप्ट के बिना, केवल HTML5 के साथ</strong>.</p> <p>अधिक जटिल सत्यापन-संबंधी कार्य करने के लिए, HTML5 हमें एक प्रदान करता है <strong>बाधा सत्यापन जावास्क्रिप्ट एपीआई</strong> हम अपनी कस्टम सत्यापन स्क्रिप्ट सेट करने के लिए उपयोग कर सकते हैं.</p> <h4>सिमेंटिक इनपुट प्रकार के साथ मान्य</h4> <p>HTML5 पेश किया है <strong>सिमेंटिक इनपुट प्रकार</strong> वह - उपयोगकर्ता एजेंटों के लिए तत्व के अर्थ को इंगित करने के अलावा - का भी उपयोग किया जा सकता है <strong>उपयोगकर्ता इनपुट को मान्य करें</strong> एक निश्चित इनपुट प्रारूप में उपयोगकर्ताओं को सीमित करके.</p> <p>HTML5 से पहले मौजूद इनपुट प्रकारों के अलावा (<code>टेक्स्ट</code>, <code>पारण शब्द</code>, <code>जमा करें</code>, <code>रीसेट</code>, <code>रेडियो</code>, <code>चेकबॉक्स</code>, <code>बटन</code>, <code>छिपा हुआ</code>), हम निम्नलिखित का उपयोग भी कर सकते हैं <strong>शब्दार्थ HTML5 इनपुट प्रकार</strong>: <code>ईमेल</code>,<code>टेलीफोन</code>,<code>यूआरएल</code>,<code>संख्या</code>,<code>पहर</code>,<code>दिनांक</code>,<code>दिनांक समय</code>,<code>datetime-स्थानीय</code>, <code>महीना</code>,<code>सप्ताह</code>, <code>रेंज</code>, <code>खोज</code>,<code>रंग</code>.</p> <p>हम पुराने ब्राउज़रों के साथ सुरक्षित रूप से HTML5 इनपुट प्रकारों का उपयोग कर सकते हैं, क्योंकि वे एक के रूप में व्यवहार करेंगे <code><input type="text"></code> ब्राउज़र में फ़ील्ड जो उनका समर्थन नहीं करते हैं.</p> <p>आइए देखें कि उपयोगकर्ता द्वारा गलत इनपुट प्रकार में प्रवेश करने पर क्या होता है। कहें कि हमने निम्नलिखित कोड के साथ एक ईमेल इनपुट फ़ील्ड बनाया है:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">तुम्हारा ईमेल:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>जब उपयोगकर्ता एक स्ट्रिंग टाइप करता है जो ईमेल प्रारूप का उपयोग नहीं करता है, तो बाधा सत्यापन एल्गोरिथ्म <strong>फॉर्म जमा नहीं करता है</strong>, तथा <strong>एक त्रुटि संदेश देता है</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>एक ही नियम अन्य इनपुट प्रकारों पर भी लागू होता है, उदाहरण के लिए <code>प्रकार = "url"</code> उपयोगकर्ता केवल एक इनपुट प्रस्तुत कर सकते हैं जो URL प्रारूप का अनुसरण करता है (जैसे प्रोटोकॉल के साथ शुरू होता है, जैसे <code>एचटीटीपी://</code> या <code>एफ़टीपी: //</code>).</p> <p>कुछ इनपुट प्रकार एक डिज़ाइन का उपयोग करते हैं जो <strong>उपयोगकर्ताओं को गलत इनपुट प्रारूप दर्ज करने की अनुमति भी नहीं देता है</strong>, उदाहरण के लिए <code>रंग</code> तथा <code>रेंज</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">पीछे का रंग:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>अगर हम उपयोग करते हैं <code>रंग</code> इनपुट प्रकार उपयोगकर्ता को या तो रंग बीनने वाले से एक रंग चुनने या डिफ़ॉल्ट काले रंग के साथ रहने के लिए विवश किया जाता है। इनपुट फ़ील्ड है <strong>डिजाइन द्वारा विवश</strong>, इसलिए यह उपयोगकर्ता की त्रुटि के लिए बहुत मौका नहीं छोड़ता है.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>जब यह उपयुक्त हो, तो इसका उपयोग करने पर विचार करने लायक है <code><select></code> HTML टैग जो इन विवश-बाय-डिज़ाइन इनपुट प्रकारों के समान काम करता है; यह उपयोगकर्ताओं को ड्रॉपडाउन सूची से चुनने की सुविधा देता है.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">आपका पसंदीदा फल:</label> <select name="fruit"> <option value="apple">सेब</option> <option value="pear">नाशपाती</option> <option value="orange">नारंगी</option> <option value="raspberry">रसभरी</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>HTML5 के सत्यापन गुण का उपयोग करें</h4> <p>सिमेंटिक इनपुट प्रकारों का उपयोग करके उपयोगकर्ताओं को सबमिट करने की अनुमति पर कुछ अड़चनें आती हैं, लेकिन कई मामलों में हम थोड़ा आगे जाना चाहते हैं। यह तब है जब <strong>सत्यापन से संबंधित विशेषताएँ</strong> का <code><input></code> टैग हमारी मदद कर सकता है.</p> <p>सत्यापन-संबंधी विशेषताएँ कुछ इनपुट प्रकारों से संबंधित हैं (इनका उपयोग नहीं किया जा सकता है <em>सब</em> प्रकार) जिस पर वे आगे बाधा डालते हैं.</p> <h5>1. <code>अपेक्षित</code> हर तरह से एक वैध इनपुट प्राप्त करने के लिए</h5> <p> <code>अपेक्षित</code> विशेषता सबसे प्रसिद्ध HTML सत्यापन विशेषता है। यह है <strong>बूलियन विशेषता</strong> इसका मतलब है <strong>कोई मूल्य नहीं लेता है</strong>, हमें बस इसे अंदर रखना है <code><input></code> टैग यदि हम इसका उपयोग करना चाहते हैं:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>यदि उपयोगकर्ता आवश्यक इनपुट फ़ील्ड में एक मान दर्ज करना भूल जाता है, तो ब्राउज़र <strong>एक त्रुटि संदेश देता है</strong> वह उन्हें मैदान में भरने की चेतावनी देता है, और वे <strong>फॉर्म जमा नहीं कर सकते</strong> जब तक उन्होंने एक वैध इनपुट प्रदान नहीं किया है। इसलिए यह हमेशा महत्वपूर्ण है <strong>नेत्रहीन निशान</strong> उपयोगकर्ताओं के लिए आवश्यक फ़ील्ड.</p> <p> <code>अपेक्षित</code> विशेषता हो सकती है <strong>निम्नलिखित इनपुट प्रकारों के साथ एक साथ उपयोग किया जाता है</strong>: <code>टेक्स्ट</code>, <code>खोज</code>, <code>यूआरएल</code>, <code>टेलीफोन</code>, <code>ईमेल</code>, <code>पारण शब्द</code>, <code>दिनांक</code>, <code>दिनांक समय</code>, <code>datetime-स्थानीय</code>, <code>महीना</code>, <code>सप्ताह</code>,<code>पहर</code>, <code>संख्या</code>, <code>चेकबॉक्स</code>, <code>रेडियो</code>, <code>फ़ाइल</code>, प्लस के साथ <code><textarea></code>तथा <code><select></code> एचटीएमएल टैग.</p> <h5>2. <code>मिनट</code>, <code>अधिकतम</code> तथा <code>कदम</code> संख्या सत्यापन के लिए</h5> <p> <code>मिनट</code>, <code>अधिकतम</code> तथा <code>कदम</code> विशेषताएँ हमें सक्षम बनाती हैं <strong>संख्या इनपुट क्षेत्रों पर अड़चनें डालें</strong>. वे एक साथ इस्तेमाल किया जा सकता है <code>रेंज</code>, <code>संख्या</code>, <code>दिनांक</code>, <code>महीना</code>, <code>सप्ताह</code>, <code>दिनांक समय</code>, <code>datetime-स्थानीय</code>, तथा <code>पहर</code> इनपुट प्रकार.</p> <p> <code>मिनट</code> तथा <code>अधिकतम</code> विशेषताएँ आसानी से एक शानदार तरीका प्रदान करती हैं <strong>अनुचित डेटा को बाहर करें</strong>. उदाहरण के लिए, नीचे दिए गए उदाहरण से उपयोगकर्ता 18 से 120 के बीच की आयु जमा कर सकते हैं.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">आपकी उम्र:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>जब बाधा सत्यापन एल्गोरिथ्म उपयोगकर्ता इनपुट में से छोटा हो जाता है <code>मिनट</code>, या इससे बड़ा है <code>अधिकतम</code> मान, यह इसे बैकएंड तक पहुंचने से रोकता है, और एक त्रुटि संदेश देता है.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>कदम</code> गुण <strong>एक संख्यात्मक अंतराल निर्दिष्ट करता है</strong> एक संख्यात्मक इनपुट क्षेत्र के कानूनी मूल्यों के बीच। उदाहरण के लिए, यदि हम चाहते हैं कि उपयोगकर्ता केवल लीप वर्ष से ही हमें चुन सकें <code>कदम = "4"</code> क्षेत्र के लिए विशेषता। नीचे दिए गए उदाहरण में मैंने इस्तेमाल किया <code>संख्या</code> इनपुट प्रकार, जैसा कि नहीं है <code>type = "वर्ष"</code> HTML5 में.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">आपका पसंदीदा लीप वर्ष:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>पूर्व-निर्धारित बाधाओं के साथ, उपयोगकर्ता केवल 1972 और 2016 के बीच लीप वर्ष से चयन कर सकते हैं यदि वे छोटे-से-तीर का उपयोग करते हैं <code>संख्या</code> निवेष का प्रकार। वे इनपुट फ़ील्ड में मैन्युअल रूप से एक मान टाइप कर सकते हैं, लेकिन अगर यह बाधाओं को पूरा नहीं करता है, तो ब्राउज़र एक त्रुटि संदेश लौटाएगा.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>अधिकतम लंबाई</code> पाठ लंबाई सत्यापन के लिए</h5> <p> <code>अधिकतम लंबाई</code> विशेषता इसे संभव बनाती है <strong>अधिकतम वर्ण लंबाई निर्धारित करें</strong> पाठ इनपुट क्षेत्रों के लिए। यह साथ में इस्तेमाल किया जा सकता है <code>टेक्स्ट</code>, <code>खोज</code>, <code>यूआरएल</code>, <code>टेलीफोन</code>, <code>ईमेल</code> तथा <code>पारण शब्द</code> इनपुट प्रकार, और के साथ <code><textarea></code> HTML टैग.</p> <p> <code>अधिकतम लंबाई</code> विशेषता फ़ोन नंबर फ़ील्ड के लिए एक उत्कृष्ट समाधान हो सकती है जिसमें कुछ निश्चित वर्णों से अधिक नहीं हो सकता है, या संपर्क फ़ॉर्म के लिए जहां हम उपयोगकर्ताओं को एक निश्चित लंबाई से अधिक नहीं लिखना चाहते हैं.</p> <p>नीचे दिया गया कोड स्निपेट उत्तरार्द्ध के लिए एक उदाहरण दिखाता है, यह 500 संदेशों के लिए उपयोगकर्ता के संदेश को बाधित करता है. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">संदेश (अधिकतम 500 वर्ण):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

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

 
 * आपका पासवर्ड: