👨🏻‍🍳 💆🏻 🤺 जावास्क्रिप्ट भाग 1 में फॉर्म सत्यापन 🚥 🏌️ 🏠

प्रविष्टि

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

तो यह शुरू हो गया!

एक उदाहरण एक साधारण रूप है जिसमें नाम, मेलबॉक्स और लिंग के लिए फ़ील्ड हैं।

HTML फ़ाइल कोड:

<html> <head>     <style type="text/css">         input[type="text"] {                         border: 1px solid #D4E2F7;         }         input {             margin: 3px 0px 3px 15px;         }             </style>     <script type="text/javascript">           ....     </script> </head> <body>                  <form name="form" action="6.php" method="POST">         <input type="text" name="name" value="My name" /><br>         <input type="text" name="email" value="email@mail.com" /><br>         <input type="radio" name="sex" checked="checked" value="male" />male<br>         <input type="radio" name="sex" value="female" />female<br>         <input type="submit" value="Ok" />     </form> </body> </html>

अन्य सभी कोड <script> टैग में रखे जाएंगे।

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

  function createField() {        var members = new Array('required', 'regexp');        for(var i = 0; i < arguments.length; i++) {            this[members[i]] = arguments[i];        }    }    // absolute regexp    createField.prototype.regexp = /^[A-z0-9-_+. ,@]{1,}$/ig;    createField.prototype.valid = false;    createField.prototype.required = true;    createField.prototype.nullify = function() {        this.valid = false;    };

अगला, प्रोटोटाइप में, हम फ़ील्ड्स के डिफ़ॉल्ट मानों का संकेत देते हैं।

regexp - संबंधित क्षेत्र का मान संतुष्ट करने वाला regex होना चाहिए।

मान्य - रीजैक्स रेग रेगुलर एक्सप्रेशन के साथ फ़ील्ड मान की जाँच का परिणाम।

आवश्यक - इस क्षेत्र के आवश्यक होने का एक संकेतक (चाहे क्षेत्र खाली छोड़ना संभव हो)।

nullify () एक ऐसा तरीका है जो वैध क्षेत्र को उसकी मूल स्थिति में लौटाता है।

 var single = new Array(); single['name'] = new createField(); single['email'] = new createField(true, /^[A-z0-9._-]+@[A-z0-9.-]+\.[Az]{2,4}$/); single['sex'] = new createField(true, /male$/ig);

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

 var Singleton = {        fields : single,        regForm : false,        nullify_values : function() {            for(i in this.fields) {                this.fields[i].nullify();            }        },               ...        };

कोड के इस भाग में, हम एक सिंगलटन ऑब्जेक्ट घोषित करते हैं। फ़ील्ड फ़ील्ड का उद्देश्य स्पष्ट है। RegForm फ़ील्ड फॉर्म युक्त ऑब्जेक्ट है। इसके माध्यम से, हमें प्रपत्र फ़ील्ड्स और उनके मानों तक पहुँच प्राप्त होगी।

Nullify_values () विधि "सब -जेक्ट्स" के मान्य फ़ील्ड (क्योंकि फ़ील्ड ऑब्जेक्ट्स की एक सरणी है) के मूल स्थिति का मान लौटाता है।

और अंत में, सबसे दिलचस्प। सबमिट () विधि, जिसमें मुख्य कार्यक्षमता है।

 submit : function() { if(this.regForm) { // set property valid to false for every form field this.nullify_values(); var i = null; // walks through the form fields, pick and if required check their values for(i = 0; i < this.regForm.elements.length; i++) { // current field var oField = this.regForm.elements[i]; switch (oField.type) { case "button": case "submit": case "reset": break; case "checkbox": case "radio": if(!oField.checked) { break; } default : // javascript trim function analogue oField.value = oField.value.replace(/^\s*/, '').replace(/\s*$/, ''); if(!oField.value) { oField.value = ''; } // if this field is out of interest if(!this.fields[oField.name].required) { this.fields[oField.name].valid = true; this.regForm[i].style.border=""; } // if this field is required else { var match = this.fields[oField.name].regexp.test(oField.value); // ... and fits regular expression if(match) { this.fields[oField.name].valid = true; this.regForm[i].style.border=""; } this.fields[oField.name].regexp.test(oField.value); } } } // now all we need is to check if the whole form is valid // we perform it by comparing number of form fields and number of valid fields // they should be equal var validForm = 0; var fieldsLength = 0; for(i in this.fields) { fieldsLength++; if(this.fields[i].valid) { validForm++; } else { this.regForm[i].style.border="1px solid #FF0000"; break; } } if(validForm == fieldsLength) { this.regForm.submit(); } else { this.nullify_values(); return false; } } }

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

     single = null;    window.onload = function() {        var regForm = document.forms[0];        Singleton.regForm = regForm;        Singleton.regForm.onsubmit = function() {            return Singleton.submit();        };    };

और सबसे अंत में, हम एकल ऑब्जेक्ट को "शून्य" कर देते हैं ताकि हम गलती से सिंग्लटन.फिल्ड्स के मूल्यों को न बदल दें, फॉर्म को पकड़ें और इसे सबमिट इवेंट हैंडलर दें।

ostrenkoe

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

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

३ । क्यों, जब क्षेत्र की सामग्री नियमित अभिव्यक्ति को संतुष्ट करती है, तो क्या मैं फिर से जांच करता हूं? मेरे पास इसका कोई समझदारी भरा जवाब नहीं है। जाहिर है , मैंने देखा कि जब RegExp.test () फ़ंक्शन का उपयोग किया जाता है, तो यह पहले अपेक्षित परिणाम देता है, और फिर सटीक विपरीत। इस पंक्ति पर टिप्पणी करने का प्रयास करें और अपने लिए देखें कि व्यवहार कैसे अप्रत्याशित हो जाता है। सामान्य स्थिति में, यह नहीं देखा जाता है।

Tzimes

इस लिपि में इस मायने में काफी लचीलापन है कि स्थानांतरण के दौरान आपको केवल फ़ील्ड नामों ( एकल सरणी कुंजियों) और नियमित अभिव्यक्तियों को बदलने के लिए उन्हें जांचना होगा।

आप यहां स्क्रिप्ट देख सकते हैं।

और इसे यहाँ डाउनलोड करें ।

अंतभाषण

इसलिए फॉर्म की सामग्री की जांच के सरलीकृत कार्य के साथ, हमने मुकाबला किया। हालाँकि, निम्नलिखित प्रश्न बने रहे:

गलत तरीके से भरे क्षेत्र के लिए एक मनमाना शैली कैसे सेट करें?

अन्य घटनाओं के लिए सत्यापन कैसे जोड़ें, उदाहरण के लिए, जब डेटा की प्रविष्टि के रूप में फ़ील्ड चेक की आवश्यकता होती है?

एक संदेश कैसे प्रदर्शित करें जो उपयोगकर्ता को यह समझने में मदद करे कि त्रुटि क्या है?

यदि पृष्ठ पर एक से अधिक फ़ॉर्म हैं तो क्या करें?

मैं पोस्ट के दूसरे भाग में इन मुद्दों पर विचार करने का प्रयास करूंगा।

जावास्क्रिप्ट भाग 1 में फॉर्म सत्यापन

प्रविष्टि

तो यह शुरू हो गया!

ostrenkoe

Tzimes

अंतभाषण

More articles: