अपने अगले प्रोजेक्ट के लिए फॉर्म चाहिए? यहां बताया गया है कि फॉर्मकिट के साथ फॉर्म कैसे बनाएं।
प्रपत्र उपयोगकर्ताओं के लिए आपके एप्लिकेशन से जुड़ने और खाता निर्माण, भुगतान प्रसंस्करण और सूचना संग्रह जैसे कार्यों के लिए आवश्यक डेटा प्रदान करने के लिए प्रवेश द्वार हैं। लेकिन बिल्डिंग फॉर्म एक कठिन काम हो सकता है, जिसके लिए व्यापक बॉयलरप्लेट कोड की आवश्यकता होती है जो समय लेने वाली और त्रुटि-प्रवण होती है
फॉर्मकिट पूर्व-निर्मित घटक प्रदान करके एक समाधान प्रदान करता है जो बॉयलरप्लेट कोड की आवश्यकता को समाप्त करता है। यहाँ इसका उपयोग कैसे करना है।
फॉर्मकिट क्या है?
फॉर्मकिट विशेष रूप से Vue 3 के लिए विकसित एक ओपन-सोर्स फॉर्म-बिल्डिंग फ्रेमवर्क है, जिसे उच्च-गुणवत्ता, उत्पादन-तैयार फॉर्म बनाने की प्रक्रिया को सरल बनाने के लिए डिज़ाइन किया गया है। यह लोकप्रिय का एक उन्नत संस्करण है व्यू फॉर्मूलेशन पुस्तकालय और सत्यापन नियमों के पूर्व-निर्धारित सेट के साथ 25 से अधिक अनुकूलन योग्य और सुलभ इनपुट विकल्प प्रदान करता है।
फॉर्मकिट जेएसओएन-संगत डायनेमिक स्कीमा के माध्यम से फॉर्म उत्पन्न करने की क्षमता भी प्रदान करता है, जिससे जटिल रूपों को जल्दी से बनाना आसान हो जाता है। इसके अतिरिक्त, फॉर्मकिट के पास डिस्कॉर्ड पर एक सक्रिय समुदाय है, जो उपयोगकर्ताओं के बीच सहयोग प्रदान करता है और सहयोग को बढ़ावा देता है। इसकी व्यापक सुविधाओं और समर्थन प्रणाली के साथ, फॉर्मकिट उन डेवलपर्स के लिए एक विश्वसनीय और कुशल उपकरण है जो अपने वीयू 3 परियोजनाओं के लिए फॉर्म बनाने की तलाश में हैं।
फॉर्मकिट फ्रेमवर्क की विशेषताएं
आपको फॉर्मकिट में फॉर्म-बिल्डिंग सुविधाओं का विस्तृत चयन मिलेगा।
1. एकल घटक एपीआई
फॉर्मकिट की दिलचस्प विशेषताओं में से एक इसकी एकल-घटक एपीआई है: अवयव। यह आपको सभी इनपुट प्रकारों तक पहुंच प्रदान करता है। यह देशी HTML तत्वों का उपयोग करने के बजाय फॉर्म तत्वों के निर्माण के लिए सीधी और आसान पहुँच प्रदान करता है।
2. पूर्व परिभाषित सत्यापन नियम
फॉर्मकिट फॉर्म सत्यापन के संचालन को सरल करता है सत्यापन प्रोप का उपयोग करके आपको सीधे इनपुट के लिए नियमों का एक सेट लागू करने की अनुमति देकर। इसमें 30 से अधिक विभिन्न पूर्व-निर्धारित नियम हैं जिन्हें आप अपनी पसंद के आधार पर चुन सकते हैं। वैकल्पिक रूप से, आप जटिल प्रतिबंधों के लिए विश्व स्तर पर या विशेष रूप से इनपुट पर पंजीकृत कस्टम नियम बना सकते हैं।
3. अनुकूलन योग्य स्टाइलिंग विकल्प
फॉर्मकिट बिना किसी डिफॉल्ट स्टाइलिंग विकल्पों के आता है, लेकिन इसका एक वैकल्पिक बेस थीम है - जेनेसिस। आपको इसे अलग से इंस्टॉल करना होगा।
सबसे पहले इंस्टॉल करके @ फॉर्मकिट/थीम पैकेट।
एनपीएम इंस्टॉल करें @formkit/themesफिर इसे अपने प्रोजेक्ट में इम्पोर्ट करें
आयात'@ फॉर्मकिट/थीम्स/जेनेसिस'अन्य स्टाइलिंग विकल्पों में कस्टम क्लास का उपयोग शामिल है जो आपको फॉर्मकिट के प्रदान किए गए मार्कअप पर अपनी खुद की स्टाइल और क्लासेस लागू करने की अनुमति देता है।
4. स्कीमा जनरेशन
फॉर्मकिट का स्कीमा जनरेशन एक उत्कृष्ट फीचर है जो फॉर्म फील्ड बनाने की प्रक्रिया को सरल करता है। एक स्कीमा वस्तुओं की एक सरणी है, जिसमें प्रत्येक वस्तु एक HTML तत्व का प्रतिनिधित्व करती है और आप केवल JSON प्रारूप में प्रतिनिधित्व कर सकते हैं.
स्कीमा सरणी में फॉर्मकिट नोड ऑब्जेक्ट होते हैं जो विभिन्न तत्वों के अनुरूप होते हैं, जैसे कि HTML तत्व, घटक या टेक्स्ट नोड। ये ऑब्जेक्ट पहले से मौजूद Vue चर को संदर्भित कर सकते हैं और किसी भी मार्कअप या घटक को संपादन योग्य विशेषताओं और प्रॉप्स के साथ प्रस्तुत कर सकते हैं, जिससे यह रूपों के निर्माण और अनुकूलन का एक कुशल तरीका बन जाता है। डिफ़ॉल्ट रूप से, यह विश्व स्तर पर पंजीकृत नहीं है, इसलिए आपको इसे आयात करने की आवश्यकता है।
आयात {फॉर्मकिटस्केमा} से'@formkit/vue'Vue3 में FormKit का घालमेल
Vue 3 एप्लिकेशन में फॉर्मकिट का उपयोग शुरू करने के लिए, पहले इसे अपने प्रोजेक्ट में इंस्टॉल करें। इस खंड में स्क्रैच से एक नए वीयू एप्लिकेशन का उपयोग करके एक डेमो शामिल होगा।
फॉर्मकिट का उपयोग करने के लिए पूर्वापेक्षाएँ
आरंभ करने से पहले, सुनिश्चित करें कि आपके पास निम्नलिखित हैं:
- Vue और JavaScript की मौलिक समझ
- आपके कंप्यूटर पर Node.js और npm सेट अप
एक बार जब आप गति में आ जाते हैं, तो आप अपना पहला ऐप बनाने के लिए तैयार होते हैं।
एक नया Vue एप्लिकेशन बनाना
सबसे पहले, एक नया Vue एप्लिकेशन इनिशियलाइज़ करने के लिए अपने टर्मिनल में नीचे दी गई कमांड चलाएँ:
एनपीएम इनिट व्यू@नवीनतमफिर अपनी पसंद के अनुसार प्रॉम्प्ट में बताए गए चरणों का पालन करें। प्रोजेक्ट पूरी तरह से स्थापित हो जाने के बाद, एप्लिकेशन में फॉर्मकिट स्थापित करने के लिए आगे बढ़ें।
एनपीएम इंस्टॉल करें @formkit/vue अगला, में मुख्य.जेएस फ़ाइल।
आयात {क्रिएटऐप} से'व्यू'
आयात'./style.css'
आयात अनुप्रयोग से'./App.vue'
// सेटअप फॉर्मकिट
आयात {प्लगइन, defaultConfig} से"@formkit/vue";
// उत्पत्ति विषय आयात करें
आयात"@ फॉर्मकिट/थीम/जेनेसिस";
createApp (ऐप)। उपयोग (लगाना, defaultConfig).माउंट ('#अनुप्रयोग')पैकेज @ फॉर्मकिट/vue निर्बाध स्थापना के लिए एक Vue प्लगइन और एक डिफ़ॉल्ट कॉन्फ़िगर सेटअप के साथ आता है। एक बार जब आप सेटअप पूरा कर लेते हैं, तो आप इसे शामिल करने के लिए पूरी तरह तैयार हो जाते हैं आपके Vue 3 एप्लिकेशन में घटक। साथ ही, जैसा कि पहले कहा गया है, आप जेनेसिस थीम के लिए सेटअप जोड़ सकते हैं।
फॉर्मकिट के साथ पुन: प्रयोज्य प्रपत्र बनाना
यह खंड प्रदर्शित करता है कि एक साधारण पंजीकरण फॉर्म बनाकर एक कार्यात्मक और अनुकूलन योग्य फॉर्म बनाने में फॉर्मकिट का उपयोग कैसे किया जाए।
बेहतर कोड संरचना के लिए, इस घटक के लिए एक अलग फ़ाइल बनाना अच्छा होता है: पंजीकरण प्रपत्र.vue
सबसे पहले, इस प्रारूप का उपयोग करके इनपुट तत्व को परिभाषित करें
प्रकार="मूलपाठ"
लेबल ="पहला नाम"
प्लेसहोल्डर ="अबिओला"
सत्यापन ="आवश्यक|लंबाई: 4"
मदद = "न्यूनतम 4 वर्ण दर्ज करें"
<फॉर्मकिट/>यह कोड दिखाता है कि एक प्रकार के टेक्स्ट का उपयोग करके टेक्स्ट इनपुट उत्पन्न करने के लिए फॉर्मकिट का उपयोग कैसे करें। सत्यापन प्रोप पाइप प्रतीक "|" का उपयोग करके नियमों को अलग करता है। हेल्प प्रोप इनपुट एलिमेंट के ठीक नीचे एक छोटा टेक्स्ट रखता है।
साथ ही, आप नीचे दिए गए जैसे अन्य इनपुट प्रकारों का पता लगा सकते हैं।
प्रकार="मूलपाठ"
लेबल ="उपनाम"
प्लेसहोल्डर ="एस्तेर"
सत्यापन ="आवश्यक|लंबाई: 4"
मदद = "न्यूनतम 4 वर्ण दर्ज करें"
/>
प्रकार="ईमेल"
लेबल ="मेल पता"
उपसर्ग-आइकन ="ईमेल"
सत्यापन ="आवश्यक|ईमेल"
प्लेसहोल्डर ="[email protected]"
/>
प्रकार="तारीख"
लेबल ="जन्म की तारीख"
मदद="अपने जन्मदिन को प्रारूप में दर्ज करें- DD/MM/YYYY"
सत्यापन ="आवश्यक"
/> वी-मॉडल ="कीमत"
प्रकार="रेडियो"
लेबल ="लिंग"
: विकल्प ="['पुरुष महिला']"
मदद="अपना लिंग चुनें"
/>
प्रकार="फ़ाइल"
लेबल ="अपनी फोटो अपलोड करें"
स्वीकार =".jpg, .png, .jpeg"
मदद="अपनी छवि चुनें"
/>
कोड दिखाता है कि कुछ अन्य इनपुट तत्वों का उपयोग कैसे करें और सत्यापन नियम कैसे निर्धारित करें।
फॉर्मकिट में "फॉर्म" नामक एक प्रकार का प्रोप शामिल है जो सभी इनपुट तत्वों को लपेटता है। यह प्रपत्र की सत्यापन स्थिति की निगरानी करता है और यदि कोई इनपुट अमान्य है तो उपयोगकर्ताओं को इसे जमा करने से रोकता है। इसके अतिरिक्त, यह स्वचालित रूप से सबमिट बटन उत्पन्न करता है।
प्रकार="प्रपत्र"
प्रपत्र-कक्षा="बाहरी कंटेनर"
सबमिट-लेबल ="पंजीकरण करवाना"
@जमा करना="पंजीकरण करवाना">
सब कुछ एक साथ मिलाकर पूर्ण रूप प्रस्तुत करता है, जैसा कि नीचे दी गई छवि में दिखाया गया है।
फॉर्मकिट के स्कीमा का उपयोग करके फॉर्म जनरेशन
JSON स्कीमा के साथ, इनपुट तत्वों के समान प्रपत्र उत्पन्न करना संभव है, जैसा कि पहले किया गया था। फ़ॉर्म जनरेट करने के लिए, बस अपनी स्कीमा सरणी प्रदान करें घटक का उपयोग करके योजना सहारा।
योजना सरणी
कॉन्स्ट स्कीमा = [
{
$ फॉर्मकिट: "ईमेल",
नाम: "ईमेल",
लेबल: "मेल पता",
प्लेसहोल्डर: "अपना ईमेल दर्ज करें",
सत्यापन: "आवश्यक|ईमेल",
},
{
$ फॉर्मकिट: 'पासवर्ड',
नाम: 'पासवर्ड',
लेबल: 'पासवर्ड',
सत्यापन: 'आवश्यक|लंबाई: 5,16'
},
{
$ फॉर्मकिट: 'पासवर्ड',
नाम: 'पासवर्ड की पुष्टि करें',
लेबल: 'पासवर्ड की पुष्टि कीजिये',
सत्यापन: 'अपेक्षित|पुष्टि करें',
सत्यापन लेबल: 'पासवर्ड पुष्टि',
},
];इसके बाद इसे फॉर्मकिट घटक में प्रोप में भेज दिया जाता है।
"प्रपत्र" प्रपत्र-कक्षा="बाहरी कंटेनर"सबमिट लेबल ="लॉग इन करें">
<फॉर्मकिट स्कीमा: स्कीमा="योजना" />
फॉर्मकिट> यह अंतिम उत्पन्न आउटपुट है:
Vue3 में बिल्डिंग फॉर्म के लिए एक तेज़ दृष्टिकोण
फॉर्मकिट वीयू 3 में फॉर्म बनाने के लिए एक तेज और अधिक कुशल दृष्टिकोण प्रदान करता है। फॉर्मकिट के साथ, आप बॉयलरप्लेट टेम्पलेट्स को स्क्रैच से बनाने की आवश्यकता को समाप्त कर सकते हैं, जिससे आप सीधे तर्क को लागू करने पर ध्यान केंद्रित कर सकते हैं। इस सुव्यवस्थित प्रक्रिया से न केवल समय की बचत होती है बल्कि उत्पादकता में भी वृद्धि होती है।
इसके अलावा, फॉर्मकिट सशर्त प्रतिपादन के माध्यम से रूपों के गतिशील प्रतिपादन को सक्षम करता है। यह सुविधा आपको उपयोगकर्ताओं के लिए इंटरैक्टिव और उपयोगकर्ता के अनुकूल इंटरफेस बनाने में सक्षम बनाती है, जहां कुछ शर्तों के आधार पर प्रपत्र तत्व प्रदर्शित या छिपाए जाते हैं।
