मुखपृष्ठ » वेब डिजाइन » एचटीएमएल 5 कांस्टीट्यूशन वैलिडेशन में

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

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

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

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

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

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

    1. उपयोगी

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

    2. सुरक्षित

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

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

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

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

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

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

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

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

    मूल्यांकन करने के लिए, एल्गोरिथ्म का उपयोग करता है इनपुट तत्वों के सत्यापन से संबंधित गुण, जैसे कि ,

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

    4. पैटर्न रेगेक्स सत्यापन के लिए

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

    उसके साथ पैटर्न विशेषता हम बाद में कर सकते हैं - उपयोगकर्ताओं को एक प्रारूप में अपना इनपुट जमा करने के लिए विवश करते हैं दिए गए नियमित अभिव्यक्ति से मेल खाता है.

    पैटर्न विशेषता के कई उपयोग मामले हैं, लेकिन यह विशेष रूप से उपयोगी हो सकता है जब हम चाहते हैं पासवर्ड फ़ील्ड को मान्य करें.

    नीचे दिए गए उदाहरण के लिए उपयोगकर्ताओं को एक पासवर्ड दर्ज करने की आवश्यकता होती है जो न्यूनतम 8 वर्ण लंबा हो, और इसमें कम से कम एक अक्षर और एक संख्या (रेगेक्स का उपयोग किया गया स्रोत) हो.

     

    कुछ और बातें

    इस लेख में, हमने इस बात पर ध्यान दिया था कि किस तरह इसका उपयोग किया जाए ब्राउज़र-आपूर्ति प्रपत्र सत्यापन HTML5 के मूल बाधा सत्यापन एल्गोरिथ्म द्वारा प्रदान किया गया। हमारी कस्टम सत्यापन स्क्रिप्ट बनाने के लिए, हमें बाधा सत्यापन API का उपयोग करने की आवश्यकता है जो मान्य सत्यापन कौशल को परिष्कृत करने में अगला कदम हो सकता है.

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

    तत्त्व.