क्या आपने कभी एक फॉर्म जमा करने की कोशिश की है, केवल वेब पेज के लिए आपको एक त्रुटि संदेश देने के लिए कि एक या अधिक फ़ील्ड अमान्य हैं? यदि ऐसा है, तो आपने प्रपत्र सत्यापन का अनुभव कर लिया है।
स्वच्छ, प्रयोग करने योग्य डेटा प्राप्त करने के लिए सत्यापन अक्सर आवश्यक होता है। ईमेल पतों से लेकर तारीखों तक, अगर इसे सटीक होने की आवश्यकता है, तो आपको इसे ध्यान से जांचना होगा।
फॉर्म सत्यापन क्या है?
प्रपत्र सत्यापन यह सुनिश्चित करने की प्रक्रिया है कि उपयोगकर्ता द्वारा प्रपत्र में दर्ज किया गया डेटा सही और पूर्ण है। आप आवश्यक विशेषता जैसे अंतर्निहित HTML सुविधाओं का उपयोग करके क्लाइंट साइड पर ऐसा कर सकते हैं। आप भी कर सकते हैं जावास्क्रिप्ट का उपयोग कर क्लाइंट पर मान्य करें, और प्रक्रिया को आसान बनाने में मदद के लिए बाहरी Next.js लाइब्रेरी हैं।
प्रपत्र सत्यापन आवश्यक होने के कई कारण हैं। सबसे पहले, यह सुनिश्चित करने में मदद करता है कि प्रपत्र में दर्ज किया गया डेटा पूर्ण और सही है। यह महत्वपूर्ण है क्योंकि जब आपका ऐप सर्वर या डेटाबेस में डेटा सबमिट करता है तो यह त्रुटियों को रोकने में मदद करता है।
दूसरा, प्रपत्र सत्यापन उपयोगकर्ता द्वारा अमान्य डेटा दर्ज करने पर प्रतिक्रिया प्रदान करके प्रपत्र की उपयोगिता को बेहतर बनाने में मदद कर सकता है। यह उपयोगकर्ता की ओर से निराशा और भ्रम से बचने में मदद कर सकता है।
अंत में, प्रपत्र सत्यापन यह सुनिश्चित करके प्रपत्र की सुरक्षा को बेहतर बनाने में मदद कर सकता है कि यह केवल मान्य डेटा सबमिट करता है।
Next.js में फॉर्म को कैसे मान्य करें
Next.js में प्रपत्रों को मान्य करने के दो तरीके हैं: अंतर्निर्मित विधियों का उपयोग करना या बाहरी पुस्तकालयों का उपयोग करना।
अंतर्निहित विधियों का उपयोग करना
HTML प्रपत्रों को मान्य करने के लिए कई विधियाँ प्रदान करता है, जिनमें से सबसे सामान्य है आवश्यक गुण। यह सुनिश्चित करता है कि कोई फ़ील्ड खाली नहीं हो सकता। आप इस विधि का उपयोग अपने नेक्स्ट.जेएस ऐप से कर सकते हैं, बस आपके द्वारा जेनरेट किए गए इनपुट टैग में विशेषता शामिल करके। HTML भी प्रदान करता है नमूना गुण। आप इसे एक साथ उपयोग कर सकते हैं अधिक जटिल सत्यापन के लिए नियमित अभिव्यक्ति.
इस उदाहरण में दो फ़ील्ड वाला एक फ़ॉर्म शामिल है: नाम और ईमेल। नाम फ़ील्ड आवश्यक है, और ईमेल फ़ील्ड नियमित अभिव्यक्ति से मेल खाना चाहिए।
आयात प्रतिक्रिया से 'प्रतिक्रिया'कक्षाMyFormका विस्तारप्रतिक्रिया.अवयव{
प्रदान करना() {
वापस करना (
<प्रपत्र >
<लेबल>
नाम:
<इनपुट प्रकार ="मूलपाठ" नाम ="नाम" आवश्यक />
</label>
<लेबल>
ईमेल:
<इनपुट प्रकार ="ईमेल" नाम ="ईमेल"
पैटर्न ="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<इनपुट प्रकार ="जमा करना" मूल्य ="जमा करना" />
</form>
)
}
}
निर्यातगलती करना MyForm
यह कोड रिएक्ट लाइब्रेरी को इम्पोर्ट करता है, फिर MyForm नामक एक क्लास बनाता है और एक फॉर्म एलिमेंट को रेंडर करता है। प्रपत्र तत्व के अंदर दो लेबल तत्व होते हैं।
पहले लेबल तत्व में एक आवश्यक टेक्स्ट इनपुट फ़ील्ड है। दूसरे लेबल तत्व में एक ईमेल इनपुट फ़ील्ड होता है जिसमें इसकी पैटर्न विशेषता में नियमित अभिव्यक्ति होती है।
अंत में, आपके पास सबमिट बटन है। जब कोई उपयोगकर्ता प्रपत्र सबमिट करता है, तो आवश्यक विशेषता यह सुनिश्चित करती है कि उन्होंने नाम फ़ील्ड भर दी है। ईमेल फ़ील्ड का पैटर्न विशेषता सुनिश्चित करती है कि ईमेल निर्दिष्ट प्रारूप में है। यदि इनमें से कोई भी स्थिति विफल होती है, तो फॉर्म जमा नहीं होगा।
अंतर्निहित विधियों का उपयोग करने के कुछ नुकसान हैं। सबसे पहले, आपके द्वारा सेट किए गए सभी अलग-अलग सत्यापन नियमों का ट्रैक रखना मुश्किल हो सकता है। दूसरा, यदि आपके पास बहुत सारे फ़ील्ड हैं, तो प्रत्येक के लिए आवश्यक विशेषता जोड़ना थकाऊ हो सकता है। अंत में, अंतर्निहित विधियां केवल बुनियादी सत्यापन प्रदान करती हैं। यदि आप अधिक जटिल सत्यापन करना चाहते हैं, तो आपको बाहरी पुस्तकालय का उपयोग करने की आवश्यकता होगी।
एक बाहरी पुस्तकालय का उपयोग करना
बिल्ट-इन विधियों के अलावा, कई बाहरी लाइब्रेरी भी हैं जिनका उपयोग आप प्रपत्रों को सत्यापित करने के लिए कर सकते हैं। कुछ लोकप्रिय पुस्तकालयों में फॉर्मिक, रिएक्ट-हुक-फॉर्म और यूप शामिल हैं।
बाहरी लाइब्रेरी का उपयोग करने के लिए, आपको पहले इसे इंस्टॉल करना होगा। उदाहरण के लिए, फॉर्मिक को स्थापित करने के लिए, निम्नलिखित कमांड चलाएँ:
NPM स्थापित करना फॉर्मिकएक बार जब आप पुस्तकालय स्थापित कर लेते हैं, तो आप इसे अपने घटक में आयात कर सकते हैं और इसका उपयोग अपने फॉर्म को मान्य करने के लिए कर सकते हैं:
आयात प्रतिक्रिया से 'प्रतिक्रिया'
आयात {फॉर्मिक, फॉर्म, फील्ड} से 'फॉर्मिक'कॉन्स्ट MyForm = () => (
<फॉर्मिक
प्रारंभिक मूल्य = {{नाम: '', ईमेल: '' }}
मान्य = {मूल्य => {
कॉन्स्ट त्रुटियां = {}
अगर (!मान।नाम) {
त्रुटियाँ। नाम = 'आवश्यक'
}
अगर (!मान।ईमेल) {
त्रुटियाँ। ईमेल = 'आवश्यक'
} अन्यअगर (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.परीक्षण (मान.ईमेल)
) {
त्रुटियाँ। ईमेल = 'अमान्य ईमेल पता'
}
वापस करना त्रुटियाँ
}}
onSubmit={(मान, {setSubmitting}) => {
सेटटाइमआउट (() => {
चेतावनी(JSON.stringify (मान, व्यर्थ, 2))
सेट सबमिट करना (असत्य)
}, 400)
}}
>
{({सबमिट कर रहा है}) => (
<प्रपत्र>
<फ़ील्ड प्रकार ="मूलपाठ" नाम ="नाम" />
<फ़ील्ड प्रकार ="ईमेल" नाम ="ईमेल" />
<बटन प्रकार ="जमा करना" अक्षम = {सबमिटिंग}>
जमा करना
</button>
</Form>
)}
</Formik>
)
निर्यातगलती करना MyForm
यहाँ, आप पहले आयात करते हैं फॉर्मिक, प्रपत्र, और मैदान फॉर्मिक लाइब्रेरी से घटक। अगला, MyForm नामक एक घटक बनाएँ। यह घटक एक ऐसा प्रपत्र प्रस्तुत करता है जिसमें दो फ़ील्ड होते हैं: नाम और ईमेल.
प्रारंभिक वैल्यू प्रोप फॉर्म फ़ील्ड के प्रारंभिक मान सेट करता है। इस स्थिति में, नाम और ईमेल फ़ील्ड दोनों खाली स्ट्रिंग्स हैं।
वैलिडेट प्रोप फॉर्म फील्ड के लिए वेलिडेशन नियम सेट करता है। इस मामले में, नाम फ़ील्ड आवश्यक है, और ईमेल फ़ील्ड नियमित अभिव्यक्ति से मेल खाना चाहिए।
ऑनसबमिट प्रॉप उस फंक्शन को सेट करता है जिसे रिएक्ट तब कॉल करेगा जब यूजर फॉर्म सबमिट करेगा। इस मामले में, फ़ंक्शन एक अलर्ट है जो फॉर्म फ़ील्ड के मान प्रदर्शित करेगा।
isSubmitting प्रोप निर्धारित करता है कि फॉर्म वर्तमान में सबमिट किया जा रहा है या नहीं। इस मामले में, आप इसे गलत पर सेट करते हैं।
अंत में, फॉर्मिक से फॉर्म घटक का उपयोग करके फॉर्म प्रस्तुत करें।
Next.js. में बाहरी पुस्तकालयों का उपयोग करने के लाभ
नेक्स्ट.जेएस में फॉर्म को मान्य करने के लिए फॉर्मिक जैसी बाहरी लाइब्रेरी का उपयोग करने के कई फायदे हैं। एक लाभ यह है कि उपयोगकर्ता को त्रुटि संदेशों को प्रदर्शित करना बहुत आसान होता है। उदाहरण के लिए, यदि कोई आवश्यक फ़ील्ड नहीं भरा गया है, तो फॉर्मिक स्वचालित रूप से एक त्रुटि संदेश प्रदर्शित करेगा जिसमें सुझाए गए सुधार शामिल हैं।
एक अन्य लाभ यह है कि फॉर्मिक अधिक जटिल सत्यापन नियमों को संभाल सकता है। उदाहरण के लिए, आप फॉर्मिक का उपयोग यह सत्यापित करने के लिए कर सकते हैं कि दो फ़ील्ड समान हैं (जैसे पासवर्ड और पासवर्ड पुष्टिकरण फ़ील्ड)।
अंत में, फॉर्मिक फॉर्म डेटा को सर्वर पर सबमिट करना आसान बनाता है। उदाहरण के लिए, आप फॉर्म डेटा को एपीआई में जमा करने के लिए फॉर्मिक का उपयोग कर सकते हैं।
प्रपत्रों का उपयोग करके उपयोगकर्ता जुड़ाव बढ़ाएँ
उपयोगकर्ता जुड़ाव बढ़ाने के लिए आप प्रपत्रों का उपयोग कर सकते हैं। जब कोई उपयोगकर्ता अमान्य डेटा दर्ज करता है, तो प्रतिक्रिया प्रदान करके आप हताशा और भ्रम से बचने में मदद कर सकते हैं।
बाहरी पुस्तकालयों का उपयोग करके, आप स्वत: पूर्णता और सशर्त फ़ील्ड जैसी सुविधाएँ जोड़ सकते हैं। ये आपके प्रपत्रों को और भी अधिक उपयोगकर्ता-अनुकूल बनाने में मदद कर सकते हैं। जब सही तरीके से उपयोग किया जाता है, तो उपयोगकर्ता जुड़ाव बढ़ाने और आपके लिए आवश्यक डेटा एकत्र करने में मदद करने के लिए प्रपत्र एक शक्तिशाली उपकरण हो सकते हैं।
सत्यापन के अलावा, Next.js में कई विशेषताएं हैं जिनका उपयोग आप उपयोगकर्ता जुड़ाव बढ़ाने के लिए कर सकते हैं।
