डेटा सत्यापन किसी भी वेब एप्लिकेशन का एक अनिवार्य हिस्सा है क्योंकि यह सुनिश्चित करने में मदद करता है कि अपलोड किया जा रहा डेटा डेवलपर्स द्वारा लगाई गई कुछ आवश्यकताओं को पूरा करता है। डेटा को सर्वर और क्लाइंट दोनों पक्षों पर मान्य किया जा सकता है लेकिन क्लाइंट-साइड सत्यापन अक्सर उपयोगकर्ताओं का समय बचाता है और अच्छा, आसान उपयोगकर्ता अनुभव साबित करता है। क्लाइंट-साइड डेटा सत्यापन आसानी से किया जा सकता है और इसमें बहुत कम समय लगता है।
इस कैसे-करें मार्गदर्शिका में हम HTML, JavaScript/jQuery का उपयोग करके एक फॉर्म बनाने की प्रक्रिया से गुजरेंगे जो अपलोड किए जा रहे आकार की फ़ाइल को मान्य करता है। इस सत्यापन का लाभ यह है कि हम उपयोगकर्ताओं को केवल एक निश्चित आकार की फाइलें अपलोड करने के लिए प्रतिबंधित कर सकते हैं और सुनिश्चित कर सकते हैं कि वे हमारी आवश्यकताओं का सख्ती से पालन करते हैं। यदि फ़ाइल गलत आकार की है, तो हम फ़ाइल को सर्वर पर अपलोड किए बिना उपयोगकर्ता को संदेश भेज सकते हैं जिससे कीमती समय की बचत होती है।
वेबपेज बनाएं
सबसे पहले, हम एक साधारण HTML वेबपेज बनाएंगे:
डॉक्टरेट एचटीएमएल >
< एचटीएमएल >
< सिर >
< शीर्षक >
का सत्यापन फ़ाइल आकार जबकि जावास्क्रिप्ट का उपयोग करके अपलोड करना / jQuery
शीर्षक >
सिर >
< तन शैली = 'पैडिंग-टॉप: 10px; टेक्स्ट-एलाइन: सेंटर;' >
< पी > अपलोड करें फ़ाइल पी >
< इनपुट पहचान = 'फ़ाइल' प्रकार = 'फ़ाइल' शैली = 'पैडिंग-लेफ्ट: 95px;' />
< बीआर >< बीआर >
< बटन क्लिक पर = 'आकार सत्यापन ()' > डालना बटन >
तन >
एचटीएमएल >
कोड को समझना:
वेबपेज के मुख्य भाग में, हमने केवल a . का उपयोग किया है , <इनपुट> ,
और एक <बटन> उपनाम। <इनपुट> टैग का उपयोग किया जाता है ताकि उपयोगकर्ता एक फ़ाइल चुन सके और फिर का उपयोग करके प्रदर्शित बटन का उपयोग करके इसे अपलोड कर सके <बटन> उपनाम।
<बटन> टैग कॉल करता है आकार सत्यापन () क्लिक इवेंट पर फ़ंक्शन जो तब फ़ाइल के आकार को निर्धारित करता है और फ़ाइल के आकार के आधार पर एक उपयुक्त अलर्ट प्रिंट करता है।
जावास्क्रिप्ट आकार को परिभाषित करें सत्यापन () फ़ंक्शन
अब जावास्क्रिप्ट कोड लिखते हैं जो परिभाषित करता है आकार सत्यापन () समारोह।
< लिखी हुई कहानी >
समारोह आकार सत्यापन ( ) {
वर इनपुट = document.getElementById ( 'फ़ाइल' ) ;
था फ़ाइल = इनपुट.फाइल्स;
यदि ( फ़ाइल लंबाई == 0 ) {
चेतावनी ( 'कोई फ़ाइल नहीं चुनी गई' ) ;
वापसी असत्य ;
}
var fileSize = Math.round ( ( फ़ाइल [ 0 ] ।आकार / 1024 ) ) ;
यदि ( फाइल का आकार < = 5 * 1024 ) {
चेतावनी ( 'अपलोड किया गया' ) ;
} वरना {
चेतावनी (
'त्रुटि! फ़ाइल बहुत बड़ी है' ) ;
}
}
लिखी हुई कहानी >
कोड को समझना:
के शरीर के अंदर आकार सत्यापन () फ़ंक्शन हम पहले <इनपुट आईडी = 'फ़ाइल' /> टैग प्राप्त करते हैं और फिर इसका उपयोग करते हैं वर फ़ाइल = inputElement.files; लाइन ताकि हम अपलोड की जा रही फ़ाइल तक पहुँच प्राप्त कर सकें। फिर हम जांचते हैं कि क्या कोई फ़ाइल अपलोड की गई है, यदि नहीं, तो हम एक त्रुटि संदेश का संकेत देंगे और असत्य लौटाकर फ़ंक्शन से बाहर हो जाएंगे।
फिर हम फ़ाइल के आकार को निर्धारित करने के लिए कुछ गणित का उपयोग करते हैं। यदि फ़ाइल उपयुक्त आकार की है अर्थात, 5MB (इस मामले में), तो इसे अपलोड किया जाता है।
अन्यथा, एक त्रुटि संदेश वाला पॉप-अप प्रदर्शित होता है।
निष्कर्ष
भले ही क्लाइंट-साइड सत्यापन बहुत अधिक कुशल है, फिर भी यह सर्वर-साइड सत्यापन का विकल्प नहीं है और ज्यादातर मामलों में इसे दरकिनार किया जा सकता है। सर्वर और क्लाइंट-साइड सत्यापन दोनों को लागू करना हमेशा सबसे अच्छा अभ्यास है ताकि आप अपने आवेदन की दक्षता और सटीकता दोनों सुनिश्चित कर सकें।