जावास्क्रिप्ट के साथ क्लाइंट-साइड फॉर्म सत्यापन को कैसे कार्यान्वित करें

जावास्क्रिप्ट सबसे लोकप्रिय और बहुमुखी प्रोग्रामिंग भाषाओं में से एक है जिसे आप आज से शुरू कर सकते हैं। इस प्रोग्रामिंग भाषा को वेब की भाषा कहा गया है और यह आपकी वेबसाइटों में अन्तरक्रियाशीलता जोड़ने के लिए आवश्यक है।

प्रपत्र तत्व वेबसाइटों पर सबसे अधिक उपयोग किए जाने वाले HTML तत्वों में से एक है। ये फॉर्म यूजर से इनपुट लेते हैं और इसे ब्राउजर या सर्वर में प्रोसेस करते हैं। हालांकि, सुरक्षा मुद्दों और अवांछित बग से निपटने के लिए इन इनपुट्स को मान्य करना महत्वपूर्ण है।

---

---

डोम मैनिपुलेशन को समझना

इससे पहले कि हम जावास्क्रिप्ट के साथ क्लाइंट-साइड फॉर्म सत्यापन को लागू करने के लिए आगे बढ़ें, दस्तावेज़ ऑब्जेक्ट मॉडल को समझना आवश्यक है, जिसे आमतौर पर 'डीओएम' के रूप में जाना जाता है। डोम एक मानकीकृत एपीआई है जो जावास्क्रिप्ट को HTML वेब पेज पर तत्वों के साथ इंटरैक्ट करने की अनुमति देता है।

और जानें: वेबसाइटों के छिपे हुए नायक: डोम को समझना

ईवेंट श्रोताओं को जोड़ने और उपयोगकर्ता इनपुट प्राप्त करने के लिए, आपको DOM हेरफेर की मूल बातें समझने की आवश्यकता होगी। यहां एक उदाहरण दिया गया है जो बताता है कि आप DOM API और JavaScript का उपयोग करके वेबपेज की सामग्री को कैसे बदल सकते हैं:







Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';



उपरोक्त कोड में,

टैग की एक आईडी है अनुच्छेद . जावास्क्रिप्ट कोड लिखते समय, आप इस तत्व को कॉल करके एक्सेस कर सकते हैं document.getElementById ('पैराग्राफ') विधि और उसके मूल्य में हेरफेर।

अब जब आप डोम हेरफेर की मूल बातें समझ गए हैं, तो चलिए आगे बढ़ते हैं और फॉर्म सत्यापन को लागू करते हैं।

---

---

जावास्क्रिप्ट के साथ फॉर्म सत्यापन

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

सत्यापन में जाने से पहले, आइए HTML रूपों और उनके महत्व को समझने के लिए कुछ समय दें। HTML फॉर्म उन प्राथमिक तरीकों में से एक हैं जिनसे आप वेबसाइट के साथ इंटरैक्ट करते हैं क्योंकि वे आपको अपना डेटा दर्ज करने, परिवर्तन लागू करने, पॉप-अप लागू करने, सर्वर पर जानकारी जमा करने, और बहुत कुछ करने की अनुमति देते हैं।

---

---

ऐप खरीद में क्या मतलब है

एचटीएमएल इन उपयोगकर्ता-सामना करने वाले रूपों को बनाने के लिए तत्व का उपयोग किया जाता है। यहां बताया गया है कि आप HTML फॉर्म के इनपुट को कैसे सत्यापित कर सकते हैं:

1. ईमेल सत्यापन

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

एचटीएमएल:

जावास्क्रिप्ट:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. पासवर्ड सत्यापन

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

• पासवर्ड 6 वर्णों से अधिक लंबा होना चाहिए।
• पासवर्ड और पुष्टिकरण पासवर्ड फ़ील्ड का मान समान होना चाहिए।

एचटीएमएल:




जावास्क्रिप्ट:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. रेडियो इनपुट सत्यापन

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

यह का उपयोग करके प्राप्त किया जा सकता है लॉजिकल ऑपरेटर्स जैसे और ( && ) और नहीं ( ! ) ऑपरेटर इस तरह से:

एचटीएमएल:

Male

Female

Others


जावास्क्रिप्ट:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. इनपुट सत्यापन का चयन करें

NS HTML तत्व का उपयोग ड्रॉप-डाउन सूची बनाने के लिए किया जाता है। NS के अंदर टैग तत्व ड्रॉप-डाउन सूची में उपलब्ध विकल्पों को परिभाषित करता है। इनमें से प्रत्येक टैग में उनके साथ एक मूल्य विशेषता जुड़ी होती है।

कैसे बताएं कि आपको इंस्टाग्राम पर किसने अनफॉलो किया?

डिफ़ॉल्ट या प्रारंभिक विकल्प के लिए, आप इसके मान को एक खाली स्ट्रिंग के रूप में सेट कर सकते हैं ताकि इसे एक अमान्य विकल्प के रूप में समझा जा सके। अन्य सभी विकल्पों के लिए, उपयुक्त मान विशेषता सेट करें। यहां एक उदाहरण दिया गया है कि आप कैसे सत्यापित कर सकते हैं a इनपुट तत्व:

एचटीएमएल:


Select One
Mr
Mrs
Ms


जावास्क्रिप्ट:

एयरपॉड्स को एंड्रॉइड से कैसे कनेक्ट करें

const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. चेकबॉक्स सत्यापन

चेकबॉक्स प्रकार के इनपुट तत्व डिफ़ॉल्ट रूप से उन बॉक्स के रूप में प्रस्तुत किए जाते हैं जिन्हें सक्रिय होने पर चेक या चेक किया जाता है। एक चेकबॉक्स आपको प्रपत्र में जमा करने के लिए एकल मानों का चयन करने की अनुमति देता है। चेकबॉक्स 'नियम और शर्तें स्वीकार करें' इनपुट के लिए एक लोकप्रिय विकल्प हैं।

यह पता लगाने के लिए कि कोई चेकबॉक्स चेक किया गया है या नहीं, आप चेकबॉक्स इनपुट पर चेक की गई विशेषता तक पहुंच सकते हैं। यहाँ एक उदाहरण है:

एचटीएमएल:


I agree to the terms and conditions

जावास्क्रिप्ट:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}


इलाज से बेहतर रोकथाम है

एक सुरक्षित और सुरक्षित अनुभव प्रदान करने के लिए आपको विज़िटर से प्राप्त होने वाले सभी इनपुट को मान्य करने की हमेशा अनुशंसा की जाती है। क्रॉस-साइट स्क्रिप्टिंग हमले और SQL इंजेक्शन करने के लिए हैकर्स हमेशा इनपुट फ़ील्ड में दुर्भावनापूर्ण डेटा दर्ज करने का प्रयास करते हैं।

अब जब आप समझ गए हैं कि अपने HTML इनपुट्स को कैसे मान्य किया जाए, तो क्यों न इसे एक फॉर्म बनाकर और उन रणनीतियों को लागू करने का प्रयास करें जिन्हें आपने ऊपर देखा है?

साझा करना साझा करना कलरव ईमेल HTML में फॉर्म कैसे बनाएं

अपने उपयोगकर्ताओं को HTML प्रपत्रों के साथ आपकी वेबसाइटों पर डेटा दर्ज करने दें।

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• एचटीएमएल
• जावास्क्रिप्ट
• वेब विकास
• कोडिंग ट्यूटोरियल

लेखक के बारे में Nitin Ranganath(31 लेख प्रकाशित)

नितिन एक शौकीन चावला सॉफ्टवेयर डेवलपर और एक कंप्यूटर इंजीनियरिंग छात्र है जो जावास्क्रिप्ट तकनीकों का उपयोग करके वेब एप्लिकेशन विकसित कर रहा है। वह एक फ्रीलांस वेब डेवलपर के रूप में काम करता है और अपने खाली समय में लिनक्स और प्रोग्रामिंग के लिए लिखना पसंद करता है।

नितिन रंगनाथी की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें