האם ניסית פעם לשלוח טופס, רק כדי שדף האינטרנט ייתן לך הודעת שגיאה שאומרת לך שאחד או יותר מהשדות אינם חוקיים? אם כן, אז חווית אימות טפסים.
אימות חיוני לעתים קרובות כדי לקבל נתונים נקיים ושמישים. מכתובות מייל ועד תאריכים, אם זה צריך להיות מדויק, אתה צריך לבדוק את זה בזהירות.
מהו אימות טופס?
אימות טופס הוא תהליך של הבטחה שהנתונים שהוכנסו לטופס על ידי משתמש נכונים ומלאים. אתה יכול לעשות זאת בצד הלקוח, באמצעות תכונות HTML מובנות כמו התכונה הנדרשת. אתה יכול גם לאמת על הלקוח באמצעות JavaScript, ויש ספריות חיצוניות של Next.js שיעזרו להקל על התהליך.
ישנן מספר סיבות מדוע אימות טופס חיוני. ראשית, זה עוזר להבטיח שהנתונים שהוזנו לטופס מלאים ונכונים. זה חשוב כי זה עוזר למנוע שגיאות כאשר האפליקציה שלך שולחת נתונים לשרת או למסד נתונים.
שנית, אימות טופס יכול לעזור לשפר את השימושיות של טופס על ידי מתן משוב כאשר משתמש מזין נתונים לא חוקיים. זה יכול לעזור למנוע תסכול ובלבול מצד המשתמש.
לבסוף, אימות טופס יכול לעזור לשפר את האבטחה של טופס על ידי הבטחה שהוא שולח נתונים חוקיים בלבד.
כיצד לאמת טפסים ב-Next.js
ישנן שתי דרכים לאמת טפסים ב-Next.js: שימוש בשיטות המובנות או שימוש בספריות חיצוניות.
שימוש בשיטות המובנות
HTML מספק מספר שיטות לאימות טפסים, הנפוצה שבהן היא נדרש תְכוּנָה. זה מבטיח ששדה לא יכול להיות ריק. אתה יכול להשתמש בשיטה זו מאפליקציית Next.js שלך, פשוט על ידי הכללת התכונה בתגי הקלט שאתה יוצר. HTML מספק גם א תבנית תְכוּנָה. אתה יכול להשתמש בזה יחד עם א ביטוי רגולרי לאימות מורכב יותר.
דוגמה זו כוללת טופס עם שני שדות: שם ואימייל. שדה השם נדרש, ושדה האימייל חייב להתאים לביטוי רגולרי.
יְבוּא לְהָגִיב מ 'לְהָגִיב'מעמדMyFormמשתרעלְהָגִיב.רְכִיב{
render() {
לַחֲזוֹר (
<טופס >
<תווית>
שֵׁם:
<סוג קלט="טֶקסט" שם="שֵׁם" נדרש />
</label>
<תווית>
אימייל:
<סוג קלט="אימייל" שם="אימייל"
דפוס="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<סוג קלט="שלח" ערך="שלח" />
</form>
)
}
}
יְצוּאבְּרִירַת מֶחדָל MyForm
הקוד הזה מייבא את ספריית React, ואז יוצר מחלקה בשם MyForm ומציג אלמנט טופס. בתוך אלמנט הטופס, ישנם שני רכיבי תווית.
רכיב התווית הראשון מכיל שדה קלט טקסט נדרש. רכיב התווית השני מכיל שדה קלט דוא"ל עם ביטוי רגולרי בתכונת התבנית שלו.
לבסוף, יש לך כפתור שלח. כאשר משתמש שולח את הטופס, התכונה הנדרשת מבטיחה שהוא מילא את שדה השם. תכונת התבנית של שדה האימייל מבטיחה שהמייל בפורמט שצוין. אם אחד מהתנאים הללו נכשל, הטופס לא יישלח.
יש כמה חסרונות לשימוש בשיטות המובנות. ראשית, יכול להיות קשה לעקוב אחר כל כללי האימות השונים שהגדרת. שנית, אם יש לך הרבה שדות, זה יכול להיות מייגע להוסיף את התכונה הנדרשת לכל אחד. לבסוף, השיטות המובנות מספקות רק אימות בסיסי. אם אתה רוצה לבצע אימות מורכב יותר, תצטרך להשתמש בספרייה חיצונית.
שימוש בספרייה חיצונית
בנוסף לשיטות המובנות, ישנן גם ספריות חיצוניות רבות בהן תוכלו להשתמש כדי לאמת טפסים. מספר ספריות פופולריות כוללות את פורמיק, react-hook-form ו-Yup.
כדי להשתמש בספרייה חיצונית, תחילה עליך להתקין אותה. לדוגמה, כדי להתקין את פורמיק, הפעל את הפקודה הבאה:
npm להתקין פורמיקלאחר שהתקנת את הספרייה, תוכל לייבא אותה לרכיב שלך ולהשתמש בה כדי לאמת את הטופס שלך:
יְבוּא לְהָגִיב מ 'לְהָגִיב'
יְבוּא { פורמיק, טופס, שדה } מ 'פורמיק'const MyForm = () => (
<פורמיק
initialValues={{ שם: '', אימייל: '' }}
validate={values => {
const שגיאות = {}
אם (!ערכים.שֵׁם) {
errors.name = 'נדרש'
}
אם (!ערכים.אימייל) {
errors.email = 'נדרש'
} אַחֵראם (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
) {
errors.email = 'כתובת אימייל לא חוקית'
}
לַחֲזוֹר שגיאות
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
עֵרָנִי(JSON.stringify (ערכים, ריק, 2))
setSubmitting(שֶׁקֶר)
}, 400)
}}
>
{({ isSubmitting }) => (
<טופס>
<סוג שדה="טֶקסט" שם="שֵׁם" />
<סוג שדה="אימייל" שם="אימייל" />
<סוג כפתור="שלח" disabled={issubmitting}>
שלח
</button>
</Form>
)}
</Formik>
)
יְצוּאבְּרִירַת מֶחדָל MyForm
כאן, תחילה אתה מייבא את פורמיק, טופס, ו שדה רכיבים מספריית פורמיק. לאחר מכן, צור רכיב בשם MyForm. רכיב זה מעבד טופס בעל שני שדות: שם ואימייל.
מאפיין initialValues מגדיר את הערכים ההתחלתיים של שדות הטופס. במקרה זה, שדות השם והדוא"ל הם מחרוזות ריקות.
ה-validate prop מגדיר את כללי האימות עבור שדות הטופס. במקרה זה, שדה השם נדרש, ושדה האימייל צריך להתאים לביטוי רגולרי.
מאפיין onSubmit מגדיר את הפונקציה שאליה תקרא React כאשר המשתמש ישלח את הטופס. במקרה זה, הפונקציה היא התראה שתציג את הערכים של שדות הטופס.
אבזר isSubmitting קובע אם הטופס נשלח כעת. במקרה זה, אתה מגדיר אותו ל-false.
לבסוף, רנדר את הטופס באמצעות רכיב הטופס מפורמיק.
היתרונות של שימוש בספריות חיצוניות ב-Next.js
ישנם מספר יתרונות לשימוש בספרייה חיצונית כמו פורמיק כדי לאמת טפסים ב-Next.js. יתרון אחד הוא שהרבה יותר קל להציג הודעות שגיאה למשתמש. לדוגמה, אם שדה חובה לא ממולא, פורמיק יציג באופן אוטומטי הודעת שגיאה הכוללת הצעה לתיקון.
יתרון נוסף הוא שפורמיק יכול להתמודד עם כללי אימות מורכבים יותר. לדוגמה, ניתן להשתמש בפורמיק כדי לוודא ששני שדות זהים (כגון שדה אישור סיסמה וסיסמה).
לבסוף, פורמיק מקל על הגשת נתוני הטופס לשרת. לדוגמה, אתה יכול להשתמש בפורמיק כדי לשלוח את נתוני הטופס ל-API.
הגבר את מעורבות המשתמש באמצעות טפסים
אתה יכול להשתמש בטפסים כדי להגביר את מעורבות המשתמש. על ידי מתן משוב כאשר משתמש מזין נתונים לא חוקיים, אתה יכול לעזור למנוע תסכול ובלבול.
באמצעות ספריות חיצוניות, תוכל להוסיף תכונות כגון השלמה אוטומטית ושדות מותנים. אלה יכולים לעזור להפוך את הטפסים שלך אפילו יותר ידידותיים למשתמש. בשימוש נכון, טפסים יכולים להיות כלי רב עוצמה שיעזור לך להגביר את מעורבות המשתמש ולאסוף את הנתונים הדרושים לך.
מלבד אימות, ל-Next.js יש תכונות רבות שבהן אתה יכול להשתמש כדי להגביר את מעורבות המשתמש.