AngularJS फॉर्म सत्यापन: टेक्स्टबॉक्स, बटन क्लिक (उदाहरण)

सत्यापन यह सुनिश्चित करने वाली प्रक्रिया है कि डेटा सही और पूर्ण है।

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

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

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

इस ट्यूटोरियल में, आप सीखेंगे-

• HTML5 का उपयोग करके फॉर्म सत्यापन
• $ गंदा, $ वैध, $ अमान्य, $ प्राचीन का उपयोग करके फॉर्म सत्यापन
• AngularJS Auto Validate का उपयोग करते हुए फ़ॉर्म सत्यापन
• लद्दा बटन के साथ उपयोगकर्ता प्रतिक्रिया

HTML5 का उपयोग करके फॉर्म सत्यापन

फॉर्म सत्यापन सर्वर द्वारा भेजे जाने से पहले उपयोगकर्ता द्वारा वेब फॉर्म में दर्ज की गई पूर्व-मान्य जानकारी की प्रक्रिया है। ग्राहक की ओर से जानकारी को हमेशा सत्यापित करना बेहतर होता है। ऐसा इसलिए है क्योंकि यदि उपयोगकर्ता द्वारा दर्ज की गई जानकारी गलत थी, तो उसे फिर से उपरिव्यय में जोड़ा जाता है।

आइए एक नजर डालते हैं कि HTML5 में सत्यापन को किस प्रकार किया जा सकता है।

हमारे उदाहरण में, हम उपयोगकर्ता को एक सरल पंजीकरण फॉर्म दिखाएंगे जिसमें उपयोगकर्ता को उपयोगकर्ता नाम, पासवर्ड, ईमेल आईडी और आयु जैसे विवरण दर्ज करने होंगे।

प्रपत्र में यह सुनिश्चित करने के लिए सत्यापन नियंत्रण होगा कि उपयोगकर्ता उचित तरीके से जानकारी दर्ज करता है।

Guru99 Global Event
    Enter your user name:

   Enter your password:   

   Enter your email:        

   Enter your age:           

         

कोड स्पष्टीकरण:

1. पाठ इनपुट प्रकार के लिए, हम 'आवश्यक' विशेषता का उपयोग कर रहे हैं। इसका मतलब यह है कि फॉर्म सबमिट होने पर टेक्स्टबॉक्स खाली नहीं हो सकता है, और टेक्स्टबॉक्स में किसी प्रकार का टेक्स्ट मौजूद होना चाहिए।
2. अगला इनपुट प्रकार पासवर्ड है। चूंकि इनपुट प्रकार को पासवर्ड के रूप में चिह्नित किया जाता है, जब उपयोगकर्ता क्षेत्र में किसी भी पाठ में प्रवेश करता है, तो यह मुखौटा हो जाएगा।
3. चूंकि इनपुट प्रकार को ईमेल के रूप में निर्दिष्ट किया गया है, बॉक्स में पाठ को पैटर्न से मेल खाने की आवश्यकता है इस ईमेल पते को स्पैमबॉट्स से संरक्षित किया जा रहा है। इसे देखने के लिए आपको जावास्क्रिप्ट सक्षम करना होगा। ।
4. जब इनपुट प्रकार को एक संख्या के रूप में चिह्नित किया जाता है, यदि कोई उपयोगकर्ता कीबोर्ड या वर्णमाला का उपयोग करके किसी भी वर्ण में प्रवेश करने की कोशिश करता है, तो यह टेक्स्टबॉक्स में दर्ज नहीं किया जाएगा।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

कार्रवाई में फ़ॉर्म सत्यापन देखने के लिए, स्क्रीन पर कोई जानकारी दर्ज किए बिना सबमिट बटन पर क्लिक करें।

सबमिट बटन पर क्लिक करने के बाद, एक पॉप-अप एक सत्यापन त्रुटि दिखाएगा जो फ़ील्ड को भरना होगा।

तो नियंत्रण के लिए सत्यापन जो आवश्यक के रूप में चिह्नित किया गया था, त्रुटि संदेश को प्रदर्शित करने का कारण बनता है यदि उपयोगकर्ता पाठ क्षेत्र में कोई मूल्य दर्ज नहीं करता है।

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

फिर गलत ईमेल आईडी दर्ज करें और सबमिट बटन पर क्लिक करें। सबमिट बटन पर क्लिक करने के बाद, एक पॉप-अप एक सत्यापन त्रुटि दिखाएगा जिसमें फ़ील्ड को @ प्रतीक की आवश्यकता होगी।

तो नियंत्रण के लिए सत्यापन जो एक ईमेल नियंत्रण के रूप में चिह्नित किया गया था, त्रुटि संदेश दिखाई देगा यदि उपयोगकर्ता पाठ क्षेत्र में एक उचित ईमेल आईडी दर्ज नहीं करता है।

अंत में, जब आप किसी भी वर्ण को आयु पाठ नियंत्रण में दर्ज करने का प्रयास करते हैं, तो इसे स्क्रीन पर दर्ज नहीं किया जाएगा। नियंत्रण केवल एक मूल्य के साथ आबाद होगा जब एक नंबर नियंत्रण में दर्ज किया जाता है।

$ गंदा, $ वैध, $ अमान्य, $ प्राचीन का उपयोग करके फॉर्म सत्यापन

AngularJS सत्यापन के लिए अपने अतिरिक्त गुण प्रदान करता है। AngularJS सत्यापन प्रयोजनों के लिए नियंत्रण के लिए निम्नलिखित गुण प्रदान करता है

• $ गंदा - उपयोगकर्ता ने नियंत्रण के साथ बातचीत की है
• $ मान्य - फ़ील्ड सामग्री मान्य है
• $ अमान्य - फ़ील्ड सामग्री अमान्य है
• $ प्राचीन - उपयोगकर्ता ने अभी तक नियंत्रण के साथ बातचीत नहीं की है

नीचे दिए गए चरण हैं, जिन्हें कोणीय सत्यापन करने के लिए पालन करने की आवश्यकता है।

चरण 1) फॉर्म की घोषणा करते समय बिना किसी वैध संपत्ति का उपयोग करें। यह संपत्ति HTML5 को बताती है कि सत्यापन AngularJS द्वारा किया जाएगा।

चरण 2) सुनिश्चित करें कि फॉर्म में इसके लिए एक नाम निर्धारित है। ऐसा करने का कारण यह है कि, कोणीय सत्यापन करते समय, प्रपत्र नाम का उपयोग किया जाएगा।

चरण 3) सुनिश्चित करें कि प्रत्येक नियंत्रण के लिए एक नाम भी निर्धारित हो। ऐसा करने का कारण यह है कि, जब कोणीय सत्यापन किया जाता है, तो नियंत्रण नाम का उपयोग किया जाएगा।

चरण 4) नियंत्रण के लिए $ गंदे, $ अमान्य और $ वैध गुणों की जांच के लिए एनजी-शो निर्देश का उपयोग करें।

आइए एक उदाहरण देखें, जिसमें उपर्युक्त चरण शामिल हैं।

हमारे उदाहरण में,

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

Guru99 Global Event

Topic Name:
Username is required

कोड स्पष्टीकरण:

1. नोट हमने फॉर्म के लिए एक नाम दिया है जो "myForm" है। एंगुलरजेएस सत्यापन के लिए फॉर्म पर नियंत्रण तक पहुंचने के लिए यह आवश्यक है।
2. यह सुनिश्चित करने के लिए "novalidate" संपत्ति का उपयोग करना कि HTML फॉर्म AngularJS को सत्यापन करने की अनुमति देता है।
3. हम "$ गंदे" और "$ अमान्य" संपत्ति की जांच के लिए एनजी-शो निर्देश का उपयोग कर रहे हैं। इसका मतलब यह है कि अगर टेक्स्टबॉक्स को संशोधित किया गया है, तो "$ गंदे" संपत्ति मूल्य सही होगा। साथ ही, उस स्थिति में जहां टेक्स्टबॉक्स मान "$ अमान्य" है, यह संपत्ति सत्य हो जाएगी। इसलिए यदि दोनों गुण सत्य हैं, तो सत्यापन नियंत्रण के लिए विफल हो जाएगा। इसलिए, यदि दोनों मान सत्य हैं, तो एनजी-शो भी सच हो जाएगा, और लाल रंग वर्णों के साथ स्पैन नियंत्रण प्रदर्शित किया जाएगा।
4. इसमें, हम "$ त्रुटि" संपत्ति की जांच कर रहे हैं, जो सच का भी मूल्यांकन करता है क्योंकि हमने नियंत्रण के लिए उल्लेख किया है कि नियंत्रण के लिए मूल्य दर्ज किया जाना चाहिए। ऐसे मामले में, जहां पाठ बॉक्स में कोई डेटा दर्ज नहीं किया गया है, स्पान नियंत्रण "उपयोगकर्ता नाम आवश्यक है" पाठ प्रदर्शित करेगा।
5. यदि टेक्स्टबॉक्स नियंत्रण मान अमान्य है, तो हम सबमिट बटन को भी अक्षम करना चाहते हैं ताकि उपयोगकर्ता फ़ॉर्म सबमिट न कर सके। हम नियंत्रण के लिए "एनजी-अक्षम" संपत्ति का उपयोग कर रहे हैं, यह "$ गंदे" और "$ अमान्य" नियंत्रण की संपत्ति के सशर्त मूल्य के आधार पर करते हैं।
6. नियंत्रक में, हम केवल टेक्स्टबॉक्स मान के प्रारंभिक मान को 'AngularJS' पाठ पर सेट कर रहे हैं। यह केवल पाठ बॉक्स के लिए कुछ डिफ़ॉल्ट मान सेट करने के लिए किया जा रहा है जब प्रपत्र पहली बार प्रदर्शित होता है। यह बेहतर दिखाता है कि टेक्स्टबॉक्स फ़ील्ड के लिए सत्यापन कैसे होता है।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

जब फॉर्म शुरू में प्रदर्शित होता है, तो टेक्स्टबॉक्स "एंगुलरजेएस" का मान प्रदर्शित करता है और "सबमिट बटन" सक्षम होता है। जैसे ही आप पाठ को नियंत्रण से हटाते हैं, सत्यापन त्रुटि संदेश सक्षम हो जाता है, और सबमिट बटन अक्षम हो जाता है।

उपरोक्त स्क्रीनशॉट दो चीजों को प्रदर्शित करता है

• सबमिट बटन अक्षम है
• विषय पाठ बॉक्स में कोई विषय नाम नहीं है। इसलिए, यह त्रुटि संदेश "उपयोगकर्ता नाम आवश्यक है।"

AngularJS Auto Validate का उपयोग करते हुए फ़ॉर्म सत्यापन

सत्यापन के लिए कस्टम कोड लिखने की आवश्यकता के बिना, स्वचालित रूप से सभी नियंत्रणों को मान्य करने के लिए AngularJS में एक सुविधा है। यह "jcs-AutoValidate" नामक एक कस्टम मॉड्यूल को शामिल करके किया जा सकता है।

इस मॉड्यूल के साथ, आपको सत्यापन करने या त्रुटि संदेश दिखाने के लिए किसी विशेष कोड को रखने की आवश्यकता नहीं है। यह सब JCS-AutoValidate के अंदर कोड द्वारा नियंत्रित किया जाता है।

आइए इसे कैसे प्राप्त करें, इसका एक सरल उदाहरण देखें।

इस उदाहरण में,

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

Guru99 Event

Topic Name:

कोड स्पष्टीकरण:

1. सबसे पहले, हमें "jcs-auto-validate.js" स्क्रिप्ट को शामिल करने की आवश्यकता है जिसमें सभी ऑटो सत्यापन कार्यक्षमता है।
2. हमें यह सुनिश्चित करने की आवश्यकता है कि "div टैग" सहित प्रत्येक तत्व को "फॉर्म-ग्रुप" वर्ग में रखा गया है।
3. यह भी सुनिश्चित करने की आवश्यकता है कि प्रत्येक तत्व (जो एक HTML तत्व है जैसे इनपुट नियंत्रण, स्पैन नियंत्रण, div नियंत्रण और इतने पर) जैसे इनपुट नियंत्रण को भी फॉर्म-समूह कक्षा में रखा जाता है।
4. अपने AngularJS JS मॉड्यूल में jcs-autovalidate शामिल करें।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

डिफ़ॉल्ट रूप से जब आप अपना कोड चलाते हैं तो उपरोक्त फॉर्म HTML कोड के अनुसार दिखाया जाएगा।

यदि आप फ़ॉर्म सबमिट करने का प्रयास करते हैं, तो त्रुटि संदेश यह कहते हुए पॉप-अप होगा, "यह फ़ील्ड आवश्यक है।" यह सब JCS-AutoValidate विकल्प द्वारा किया जाता है।

उपयोगकर्ता लद्दा बटन के साथ प्रतिक्रिया करता है

"लद्दा" बटन एक विशेष ढाँचा है जिसे बटन दबाए जाने पर दृश्य प्रभाव देने के लिए जावास्क्रिप्ट के ऊपर बटन के लिए बनाया जाता है।

इसलिए यदि एक बटन को "लैडा" विशेषता दी जाती है और दबाया जाता है, तो एक स्पिन प्रभाव दिखाया जाएगा। इसके अलावा, अतिरिक्त दृश्य प्रभाव प्रदान करने के लिए बटन के लिए अलग-अलग डेटा शैलियाँ उपलब्ध हैं।

आइए एक उदाहरण देखें, "लद्दा" बटन को कार्रवाई में कैसे देखें। हम केवल एक सरल फ़ॉर्म देखने जा रहे हैं जिसमें एक सबमिट बटन है। जब बटन दबाया जाता है, तो बटन पर एक स्पिन प्रभाव दिखाया जाएगा।

Guru99 Event
Submit

कोड स्पष्टीकरण:

1. हम "सबमिट करें" नामक फ़ंक्शन को कॉल करने के लिए "एनजी-सबमिट" निर्देश का उपयोग कर रहे हैं। इस फ़ंक्शन का उपयोग सबमिट बटन के लैडा विशेषता को बदलने के लिए किया जाएगा।
2. लड्डू की विशेषता लड्डा ढांचे का एक विशेष गुण है। यह यह विशेषता है जो नियंत्रण के लिए स्पिन प्रभाव को जोड़ता है। हम चर जमा करने के लिए लैडा विशेषता का मान सेट कर रहे हैं।
3. डेटा-स्टाइल प्रॉपर्टी फिर से एक अतिरिक्त विशेषता है जिसे लद्दा फ्रेमवर्क द्वारा पेश किया गया है, जो सबमिट बटन पर एक अलग दृश्य प्रभाव जोड़ता है।
4. काम करने के लिए लड्ढा फ्रेमवर्क के लिए 'AngularJS-ladda' मॉड्यूल को AngularJS.JS एप्लिकेशन में जोड़ना होगा।
5. प्रारंभ में, हम एक चर के मान को परिभाषित और सेट कर रहे हैं जिसे 'सबमिट' करना गलत है। यह मान सबमिट बटन के लैडा विशेषता के लिए सेट किया गया है। शुरू में इसे झूठा करने के लिए हम कह रहे हैं कि हम चाहते हैं कि लादेन बटन का अभी तक प्रभाव नहीं है।
6. हम एक फ़ंक्शन घोषित कर रहे हैं जिसे सबमिट बटन दबाए जाने पर कहा जाता है। इस फ़ंक्शन में, हम 'सबमिट' को सही पर सेट कर रहे हैं। इससे सबमिट बटन पर लागू होने वाला लड्डू प्रभाव होगा।

यदि कोड सफलतापूर्वक निष्पादित किया जाता है, तो ब्राउज़र में अपना कोड चलाते समय निम्न आउटपुट दिखाया जाएगा।

आउटपुट:

जब फॉर्म को शुरू में प्रदर्शित किया जाता है, तो सबमिट बटन को इसके सरल रूप में दिखाया जाता है।

जब सबमिट बटन दबाया जाता है, तो नियंत्रक में सबमिट चर सत्य पर सेट होता है। यह मान सबमिट बटन के "लड्डा" विशेषता के पास जाता है जो बटन के स्पिन प्रभाव का कारण बनता है।

सारांश

• टेक्स्टबॉक्स HTML नियंत्रण के लिए सत्यापन 'आवश्यक' विशेषता का उपयोग करके किया जा सकता है।
• HTML5 में, पासवर्ड, ईमेल और नंबर जैसे नए नियंत्रण जोड़े गए हैं जो सत्यापन का अपना सेट प्रदान करते हैं।
• फार्म के नियंत्रण में $ गंदा, $ वैध, $ अमान्य और $ प्राचीन मूल्यों को देखकर एंगुलरजेएस में औपचारिक रूप से देखभाल की जाती है।
• JCS- ऑटो वैलिडेट मॉड्यूल का उपयोग करके AngularJS अनुप्रयोगों में ऑटो सत्यापन भी प्राप्त किया जा सकता है।
• बटन दबाए जाने पर उपयोगकर्ता को एक बढ़ाया दृश्य महसूस करने के लिए एक Angular.js एप्लिकेशन में लद्दा बटन जोड़े जा सकते हैं।