क्लाइंट-साइड सत्यापन
इनपुट को कहीं भेजने से पहले उसका सत्यापन कीजिए।
क्लाइंट-साइड सत्यापन, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
क्लाइंट पर सत्यापन क्यों करें
क्लाइंट-साइड सत्यापन तुरंत प्रतिक्रिया और अधिक सहज अनुभव देता है। याद रखें कि यह सुविधा है, सुरक्षा नहीं; सर्वर पर भी हमेशा सत्यापन करें।
सबमिट करते समय सत्यापन
एक सामान्य तरीका फ़ॉर्म भेजे जाने पर फ़ील्ड की जाँच करता है और कुछ भी अमान्य होने पर सबमिशन रद्द कर देता है।
form.addEventListener("submit", (e) => {
if (!isValid()) {
e.preventDefault();
}
});आवश्यक फ़ील्ड की जाँच
value से अतिरिक्त रिक्त स्थान हटाएँ और खाली input अस्वीकार करें। इससे केवल रिक्त स्थान वाली स्ट्रिंग स्वीकार नहीं होती।
function checkName() {
const v = nameInput.value.trim();
return v.length > 0;
}लंबाई के नियम
पासवर्ड जैसे फ़ील्ड के लिए अतिरिक्त रिक्त स्थान हटाने के बाद की लंबाई की तुलना न्यूनतम और अधिकतम सीमाओं से करें।
function checkPassword() {
const v = passwordInput.value;
return v.length >= 8 && v.length <= 64;
}पैटर्न मिलान
नियमित व्यंजक email के प्रारूप जैसे रूपों की जाँच करते हैं। पैटर्न सरल रखें और उन्हें सर्वर पर की जाने वाली जाँच के साथ इस्तेमाल करें।
function checkEmail() {
const v = emailInput.value.trim();
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}त्रुटि संदेश दिखाना
सुरक्षित रहने के लिए एक समर्पित त्रुटि तत्व और textContent का उपयोग करके फ़ील्ड के पास प्रतिक्रिया दिखाएँ, ताकि XSS से बचा जा सके।
function showError(field, msg) {
const err = field.nextElementSibling;
err.textContent = msg;
}त्रुटियाँ साफ़ करना
फ़ील्ड के मान्य होने पर संदेश रीसेट करें, ताकि पुरानी त्रुटियाँ बनी न रहें।
function clearError(field) {
field.nextElementSibling.textContent = "";
}रीयल-टाइम सत्यापन
उपयोगकर्ता के टाइप करने या फ़ील्ड छोड़ने पर रीयल-टाइम प्रतिक्रिया देने के लिए input या blur इवेंट पर सत्यापन करें।
emailInput.addEventListener("blur", () => {
if (!checkEmail()) showError(emailInput, "Invalid email");
else clearError(emailInput);
});aria-invalid से सुलभता
aria-invalid सेट करें और त्रुटियों को aria-describedby से जोड़ें, ताकि सहायक तकनीक समस्याओं की घोषणा कर सके।
emailInput.setAttribute("aria-invalid", "true");पहली त्रुटि पर फ़ोकस करना
सबमिशन विफल होने पर फ़ोकस पहली अमान्य फ़ील्ड पर ले जाएँ, ताकि उपयोगकर्ता उसे तुरंत ठीक कर सकें।
function focusFirstError(fields) {
const bad = fields.find((f) => !f.valid);
if (bad) bad.el.focus();
}सर्वर पर भी सत्यापन करें
JavaScript को अक्षम करके या अनुरोध तैयार करके क्लाइंट सत्यापन को दरकिनार किया जा सकता है। सर्वर को अंतिम प्रामाणिक स्रोत मानें।
त्वरित जाँच
सुरक्षा दृष्टिकोण।
पुनरावलोकन
मैन्युअल सत्यापन फ़ील्ड की जाँच करता है, जैसे आवश्यक होना, लंबाई और पैटर्न, और विफलता पर preventDefault से सबमिशन रद्द करता है। textContent से संदेश सुरक्षित रूप से दिखाएँ और साफ़ करें, input/blur पर रीयल-टाइम सत्यापन करें, aria-invalid से सुलभता सुधारें और पहली त्रुटि पर फ़ोकस करें। सर्वर पर हमेशा फिर से सत्यापन करें।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “क्लाइंट-साइड सत्यापन” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “क्लाइंट-साइड सत्यापन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“क्लाइंट-साइड सत्यापन” में मैं क्या सीखूँगा?
इनपुट को कहीं भेजने से पहले उसका सत्यापन कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“क्लाइंट-साइड सत्यापन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- इनपुट मान पढ़ना
- submit इवेंट
- क्लाइंट-साइड सत्यापन
- Constraint Validation API