צריכים טפסים לפרויקט הבא שלכם? הנה איך ליצור טפסים עם FormKit.

טפסים הם השער למשתמשים לעסוק באפליקציה שלך ולספק נתונים חיוניים למשימות כמו יצירת חשבון, עיבוד תשלומים ואיסוף מידע. אבל בניית טפסים עלולה להיות משימה מרתיעה, הדורשת קוד תבנית נרחב שגוזל זמן ונוטה לשגיאות

FormKit מציעה פתרון על ידי אספקת רכיבים מובנים מראש המבטלים את הצורך בקוד לוח. הנה איך להשתמש בו.

מה זה FormKit?

FormKit היא מסגרת לבניית טפסים בקוד פתוח שפותחה במיוחד עבור Vue 3, שנועדה לפשט את התהליך של יצירת טפסים איכותיים ומוכנים לייצור. זוהי גרסה משופרת של הפופולרי ניסוח Vue הספרייה ומספקת למעלה מ-25 אפשרויות קלט הניתנות להתאמה אישית ונגישות, יחד עם קבוצה מוגדרת מראש של כללי אימות.

FormKit מציע גם את היכולת ליצור טפסים באמצעות סכמות דינמיות תואמות JSON, מה שמקל על יצירת טפסים מורכבים במהירות. בנוסף, ל-FormKit יש קהילה פעילה בנושא Discord, המספקת תמיכה ומטפחת שיתוף פעולה בין משתמשים. עם התכונות המקיפות ומערכת התמיכה שלה, FormKit הוא כלי אמין ויעיל עבור מפתחים המעוניינים לבנות טפסים לפרויקטים של Vue 3 שלהם.

תכונות של FormKit Framework

instagram viewer

תמצא מבחר רחב של תכונות לבניית טפסים ב-FormKit.

1. API של רכיב יחיד

אחת התכונות המעניינות של FormKit היא ה-API של רכיב יחיד: רְכִיב. זה נותן לך גישה לכל סוגי הקלט. זה נותן גישה ישירה וקלה ליצירת רכיבי טופס במקום צורך להשתמש ברכיבי HTML מקוריים.

2. כללי אימות מוגדרים מראש

Formkit מפשט את הטיפול באימות טפסים על ידי מתן אפשרות להחיל קבוצה של כללים ישירות על התשומות באמצעות אבזר האימות. יש לו למעלה מ-30 כללים שונים מוגדרים מראש שתוכל לבחור בהתאם להעדפה שלך. לחלופין, ניתן ליצור כללים מותאמים אישית הרשומים באופן גלובלי או ספציפי על קלט עבור הגבלות מורכבות.

3. אפשרויות סטיילינג הניתנות להתאמה אישית

FormKit מגיע ללא אפשרויות סגנון ברירת מחדל, אך יש לו ערכת נושא בסיסית אופציונלית - Genesis. אתה צריך להתקין את זה בנפרד.

על ידי התקנה תחילה של @formkit/themes חֲבִילָה.

npm להתקין @formkit/themes

לאחר מכן ייבא אותו לפרויקט שלך

יְבוּא'@formkit/themes/genesis'

אפשרויות סגנון אחרות כוללות שימוש במחלקות מותאמות אישית המאפשרות לך להחיל סגנונות ומחלקות משלך על הסימון המסופק של FormKit.

4. יצירת סכימה

יצירת הסכימה של FormKit היא תכונה מצוינת המפשטת את תהליך יצירת שדות טופס. סכימה היא מערך של אובייקטים, כאשר כל אובייקט מייצג אלמנט HTML ו אתה יכול לייצג רק בפורמט JSON.

מערך הסכימה מורכב מאובייקטים של צומת FormKit המתאימים לאלמנטים שונים, כגון רכיבי HTML, רכיבים או צמתי טקסט. אובייקטים אלה יכולים להתייחס למשתני Vue קיימים מראש ולעבד כל סימון או רכיב עם תכונות ואביזרים הניתנים לעריכה, מה שהופך אותו לשיטה יעילה לבנייה והתאמה אישית של טפסים. כברירת מחדל, הוא אינו רשום ברחבי העולם, לכן עליך לייבא אותו.

יְבוּא { FormKitSchema } מ'@formkit/vue'

שילוב FormKit ב-Vue3

כדי להתחיל להשתמש ב-FormKit ביישום Vue 3, ראשית, התקן אותו בתוך הפרויקט שלך. סעיף זה יכלול הדגמה באמצעות אפליקציית vue חדשה מאפס.

תנאים מוקדמים לשימוש ב-FormKit

לפני שתתחיל, ודא שיש לך את הדברים הבאים:

  • הבנה בסיסית של Vue ו-JavaScript
  • הגדר את Node.js ו-npm במחשב שלך

ברגע שאתה מעודכן, אתה מוכן ליצור את האפליקציה הראשונה שלך.

יצירת אפליקציית Vue חדשה

ראשית, הפעל את הפקודה למטה בטרמינל שלך כדי לאתחל יישום Vue חדש:

npm init vue@הכי מאוחר

לאחר מכן בצע את השלבים המפורטים בהנחיה בהתאם להעדפתך. לאחר שהפרויקט הותקן לחלוטין, המשך להתקנת FormKit באפליקציה.

npm להתקין @formkit/vue

לאחר מכן, ב- main.js קוֹבֶץ.

יְבוּא { createApp } מ'וו'
יְבוּא'./style.css'
יְבוּא אפליקציה מ'./App.vue'
// הגדרת Formkit
יְבוּא { פלאגין, defaultConfig } מ"@formkit/vue";
// ייבא את הנושא בראשית
יְבוּא"@formkit/themes/genesis";
createApp (App).use(חיבור, defaultConfig).mount('אפליקציה#')

החבילה @formkit/vue מגיע עם תוסף Vue והגדרת ברירת מחדל להתקנה חלקה. לאחר השלמת ההגדרה, אתה מוכן לשלב את רכיב לתוך יישום Vue 3 שלך. כמו כן, אתה יכול להוסיף את ההגדרה לנושאים של בראשית כפי שצוין קודם לכן.

יצירת טפסים לשימוש חוזר עם FormKit

חלק זה מדגים כיצד להשתמש ב-FormKit בבניית טופס פונקציונלי וניתן להתאמה אישית על ידי יצירת טופס הרשמה פשוט.

למבנה קוד טוב יותר, כדאי ליצור קובץ נפרד עבור רכיב זה: RegistrationForm.vue

ראשית, הגדר את רכיב הקלט באמצעות פורמט זה

סוּג="טֶקסט"
 תווית="שם פרטי"
 מציין מיקום="אביולה"
 אימות="נדרש|אורך: 4"
עֶזרָה = "הזן מינימום 4 תווים"
<FormKit/>

קוד זה מראה כיצד להשתמש ב-FormKit כדי ליצור קלט טקסט באמצעות סוג טקסט. אבזר האימות מפריד בין כללים באמצעות סמל הצינור "|". אביזר העזרה ממקם טקסט קטן ממש מתחת לרכיב הקלט.

כמו כן, אתה יכול לחקור סוגי קלט אחרים כמו אלה למטה.

סוּג="טֶקסט"
 תווית="שם משפחה"
 מציין מיקום="אסתר"
 אימות="נדרש|אורך: 4"
עֶזרָה = "הזן מינימום 4 תווים"
 />
סוּג="אימייל"
 תווית="כתובת דוא"ל"
 prefix-icon="אימייל"
 אימות="נדרש|אימייל"
 מציין מיקום="[email protected]"
 />
סוּג="תַאֲרִיך"
 תווית="תאריך לידה"
עֶזרָה="הזן את יום ההולדת שלך בפורמט- DD/MM/YYYY"
 אימות="נדרש"
 />
 v-model="ערך"
סוּג="רָדִיוֹ"
 תווית="מִין"
 :אפשרויות="['זכר נקבה']"
עֶזרָה="בחר את מינך"
 />
סוּג="קוֹבֶץ"
 תווית="תעלה את התמונה שלך"
 לקבל=".jpg,.png,.jpeg"
עֶזרָה="בחר את התמונה שלך"
 />

הקוד מראה כיצד להשתמש בחלק ממרכיבי הקלט האחרים ולהגדיר את כללי האימות.

FormKit כולל אבזר סוג הנקרא "טופס" העוטף את כל רכיבי הקלט. הוא עוקב אחר מצב האימות של הטופס וחוסם משתמשים מלשלוח אותו אם קלט כלשהו אינו חוקי. בנוסף, הוא יוצר אוטומטית כפתור הגשה.

סוּג="טופס"
 טופס-מעמד="מיכל חיצוני"
 submit-label="הירשם"
@שלח="הירשם">

שילוב הכל יחד מציג את הטופס המלא, כפי שמוצג בתמונה למטה.

יצירת טפסים באמצעות סכימה של FormKit

עם סכימות JSON, ניתן ליצור טפסים הדומים לרכיבי קלט, כפי שנעשה קודם לכן. כדי ליצור את הטופס, פשוט ספק את מערך הסכימה שלך ל- רכיב על ידי שימוש ב- סכֵימָה לִתְמוֹך.

מערך ה- Scheme

const סכימה = [
 {
 $formkit: "אימייל",
 שֵׁם: "אימייל",
 תווית: "כתובת דוא"ל",
 מציין מיקום: "הכנס את האימייל שלך",
 מַתַן תוֹקֵף: "נדרש|אימייל",
 },
 {
 $formkit: 'סיסמה',
 שֵׁם: 'סיסמה',
 תווית: 'סיסמה',
 מַתַן תוֹקֵף: 'נדרש|אורך: 5,16'
 },
 {
 $formkit: 'סיסמה',
 שֵׁם: 'אישור סיסמה',
 תווית: 'אשר סיסמה',
 מַתַן תוֹקֵף: 'נדרש|אישור',
 validationLabel: 'אימות סיסמה',
 },
 ];

לאחר מכן הוא מועבר לאביזר ברכיב FormKit.

"טופס" טופס-מעמד="מיכל חיצוני"submitlabel="התחברות">
<FormKitSchema:סכֵימָה="סכֵימָה" />
FormKit>

זה הפלט הסופי שנוצר:

גישה מהירה יותר לבניית טפסים ב-Vue3

FormKit מספק גישה מהירה ויעילה יותר לבניית טפסים ב-Vue 3. עם FormKit, אתה יכול לבטל את הצורך ביצירת תבניות של תבנית בסיס מאפס, מה שמאפשר לך להתמקד ביישום ההיגיון ישירות. תהליך יעיל זה לא רק חוסך זמן אלא גם משפר את הפרודוקטיביות.

בנוסף, FormKit מאפשר עיבוד דינמי של טפסים באמצעות עיבוד מותנה. תכונה זו מאפשרת לך ליצור ממשקים אינטראקטיביים וידידותיים למשתמשים, שבהם רכיבי טופס מוצגים או מסתתרים בהתבסס על תנאים מסוימים.