PracticU

Validation - ולידציה

בלי כתוביותעם כתוביות
PracticU › קורס ASP.NET › Validation - ולידציה
מילון מושגים:
JavaScript - שפת תכנות שרצה בעיקר בדפדפן ומוסיפה אינטראקטיביות לדפי אינטרנט. רצה גם בצד השרת באמצעות Node.js.
דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.
Integer - סוג נתונים למספר שלם, כלומר מספר ללא חלק עשרוני.
אופרטור - סימן בקוד שמבצע פעולה על ערכים, כמו חיבור, השוואה או פעולה לוגית.
אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.
כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.
בקשה - פנייה שלקוח שולח לשרת כדי לקבל מידע או לבצע פעולה. השרת מחזיר עליה תגובה.

Validation - ולידציה
ולידציה היא בדיקה של הקלט שהמשתמש הכניס, לפני שהוא מגיע לקוד הלוגי. ב-ASP.NET היא נעשית בעזרת רכיבי Validator מלשונית Validation בתיבת הכלים. הם מציגים הודעה ליד השדה, ואם הקלט שגוי הם מונעים את השליחה לשרת.
הרעיון: שני צדדים
הבדיקה רצה בשני מקומות. בצד הלקוח רצה JavaScript שמונע שליחה מיותרת, ובצד השרת הבדיקה חוזרת על עצמה. הסיבה לחזרה היא שייתכן דפדפן שלא מריץ JavaScript, או שהמשתמש לא אישר אותו. בדמו נשנתה רמת האבטחה של הדפדפן כדי לראות שהבדיקה בשרת עובדת גם כש-JavaScript חסום.
הרכיבים
1. RequiredFieldValidator: בודק שהשדה אינו ריק. מגדירים את ControlToValidate לשדה, מוחקים את ה-ErrorMessage, ומציבים * כטקסט, בצבע אדום.
2. RangeValidator: בודק שהערך נמצא בטווח, למשל ציון פסיכומטרי בין 200 ל-800. חשוב להגדיר את Type כ-Integer, אחרת ההשוואה נעשית כמחרוזת, ו-4000 ייראה כ"בין 200 ל-800".
3. RegularExpressionValidator: בודק את הערך לפי ביטוי רגולרי. בדמו נבחר ביטוי מוכן לכתובת אימייל מתוך רשימת הביטויים של הרכיב.
4. CompareValidator: משווה בין שני שדות (למשל אימייל ואימות האימייל) או בין שדה לערך קבוע. ב-DropDownList משתמשים בו עם ValueToCompare = 0 ואופרטור NotEqual, כי RequiredFieldValidator לא יודע שהפריט הראשון "בחר" אינו בחירה אמיתית.
5. CustomValidator: בדיקה שהמפתח כותב בעצמו. בדמו נבדק שאורך תעודת הזהות הוא תשע ספרות. בצד הלקוח הבדיקה היא פונקציית JavaScript שמקבלת args.Value ומעדכנת args.IsValid. בצד השרת היא אירוע ServerValidate עם אותה לוגיקה.
6. ValidationSummary: מציג רשימה מרוכזת של כל השדות שנכשלו, ויכול גם להציג הודעת alert.
פרטים חשובים
- ולידטור לא בודק שדה ריק אלא אם הוסיפו לו RequiredFieldValidator. CustomValidator למשל לא נקרא כשהשדה ריק.
- בשרת בודקים את Page.IsValid לפני פעולה, כדי שהקוד לא ירוץ עם קלט שגוי.
- ב-Display ניתן להגדיר Dynamic, כך שההודעה לא תופס מקום כשאין שגיאה. בדמו הוצמדה כוכבית לתיבת הטקסט בזכות זה.
כפתורים שונים
כשיש בדף כמה כפתורים, לחצן שלא אמור להפעיל את הבדיקות מקבל ValidationGroup אחר מזה של שאר הרכיבים. בדמו כפתור "חזור לדף הבית" נשאר ללא קבוצה ולכן לא הפעיל את הבדיקות.
שימו לב
בקצרה: הבדיקה בצד הלקוח חוסכת בקשה לשרת, והבדיקה בצד השרת היא זו שמגנה על האתר.
השיעור הבא בקורס: Site Navigation - ניווט באתר

פרקי ההרצאה: Validation - ולידציה

  1. 00:00

    מניעת שגיאות עם ולידציה

  2. 00:37

    קליטת שם פרטי

  3. 04:10

    שליחת מידע ריק

  4. 05:04

    היכן לבצע את הבדיקה

  5. 07:21

    בעיית בדיקה בצד הלקוח

  6. 08:31

    בדיקה בשני הצדדים

  7. 09:28

    פקדי ה-Validation

תמלול ההרצאה: Validation - ולידציה

הטקסט המלא של הדקות הראשונות בהרצאה «Validation - ולידציה» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:01

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

  2. 00:17

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

  3. 00:35

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

  4. 01:17

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

  5. 01:44

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

  6. 02:49

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

  7. 03:29

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

  8. 04:08

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

  9. 04:18

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

  10. 04:43

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

  11. 05:04

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

  12. 05:20

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

  13. 05:41

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

  14. 05:52

    אז ראשית, אם הייתי עושה את הבדיקה הזאת בצד של השרת לא הייתה שום בעיה, אם הלקוח היה לוחץ על לחצן שלח הייתה מתבצעת ריצה לשרת, אנחנו יכולים לראות את ה-progress bar פה למטה, השרת היה מבצע בדיקה האם יש לי מידע בתיבת הטקסט או לא, ובמידה ולא הוא מחזיר תשובה שלילית ללקוח,

  15. 06:18

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

  16. 06:36

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

  17. 06:53

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

  18. 07:21

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

  19. 07:38

    במחשב הלקוח, מחשב שמריץ את הדפדפן, הבדיקה יכולה להתבצע בהפרת שפת סקריפט שהדפדפן מכיר ומסוגל להריץ.

  20. 07:46

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

  21. 08:05

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

  22. 08:20

    זאת הגדרה של הדפדפן. במצב כזה הבדיקות בצד הלקוח לא יתבצעו ואכן יגיע מידע לא תקין בצד של השרת. אז התשובה לשאלה ששאלתי מקודם היא היכן צריכה להתבצע הבדיקה?

  23. 08:33

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

  24. 08:54

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

  25. 09:15

    במצב כזה הבדיקה צריכה לחזור שוב פעם במחשב השרת בשפת SP.NET כמובן עם שפת C-Sharp בכדי למנוע מצב שבו לקוח שלא בדק ב-JavaScript אכן שלח לי מידע שגוי.

  26. 09:28

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

  27. 09:41

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

לקורס המלא: קורס ASP.NET אונליין

ההרצאה הקודמת: Error Handling - טיפול בשגיאות

ההרצאה הבאה: Site Navigation - ניווט באתר

הרצאות קשורות מקורסים אחרים

  • ולידציה - Validation
  • ולידציה על קלט המשתמש - Validation
  • ולידציה בריאקט - React Validation
  • ביצוע ולידציה על POST Requests

קורסים נוספים במסלול

  • קורס Entity Framework Core - עבודה עם מסד נתונים בדוט-נט
  • קורס דוט-נט - NET Core. - עם Rest API
  • קורס MVC
  • קורס Git ו-GitHub עם Visual Studio