Validations
בשיעור זה אנו לומדים כיצד לבצע אימות קלט בצד הלקוח באמצעות ג'אווה סקריפט. אנו בונים טופס רישום מלא, מחברים אליו פונקציית בדיקה דרך אירוע הלחצן, משתמשים ב-DOM לקבלת הערכים מתיבות הטקסט והרשימה, ומשלבים ביטויים סדירים לאימות אימייל וטלפון סלולרי, תוך ראיית שתי שיטות לשליחת הטופס.
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: Validations
תמלול ההרצאה: Validations
הטקסט המלא של הדקות הראשונות בהרצאה «Validations» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות זה איך אנחנו יכולים לבצע ולידציה על קלט של משתמש. לצורך כך אנחנו הולכים להשתמש גם באירועים בכדי לקרוא לפונקציה ב-JavaScript שתבצע את הבדיקה, גם בכל מה שלמדנו על הדום Document Object Model בכדי לקבל את הנתונים שהמשתמש הכניס מתיבות הטקסט והסלקט, וגם ב-Regular Expression בכדי ממש להצליח ולבצע בדיקות קצת יותר מורכבות,
כמו לדוגמא אימייל או טלפון וכולי. אז בואו נראה איך אנחנו יכולים לעשות את זה. אז ראשית בואו נגדיר לעצמנו את הטופס יש לנו פה תגיד פורם המאפיין אקשן הולך להפנות אותנו לדף שהתפקיד שלו זה לשמור את הפרטים בואו נקרא לו סייב נקודה כרגע ויהיה htm למרות שבמציאות זה אמור להיות דף עם סיומת asp או asp.net כלומר aspx או php כל דף שיכול להתבצע
בצד השרת html לא רץ בצד השרת. אבל כרגע לצורך העניין זה יהיה בסדר. יש לנו פה את הגיט פורם ובואו נניח שיש לנו כאן איזשהו ספן של first name יש לנו תיבת טקסט עבור first name input type זה טקסט ניתן לה id txt first name וניתן לה גם name של txt first name כאשר בואו ניזכר מה ההבדל בין id לבין name.
התפקיד של name זה בכדי שהמידע מהרכיב יוכל להגיע לצד של השרת כלומר לדף הזה כשמבצעים submit והתפקיד של ה-id זה בכדי שרכיבים אחרים בדף ה-html או javascript או css יוכלו לגשת בצד של הלקוח לרכיב בעזרת ה-id שלו כמובן שהם יכולים לגשת גם בעזרת ה-name אבל טוב שיהיה גם id לרכיבים מסוימים שאנחנו רוצים לגשת אליהם עם javascript.
בואו נניח שזה דבר אחד שאנחנו רוצים. בואו נניח שאנחנו רוצים גם שם משפחה. אז יש לנו פה את ה-Last Name ויש לנו פה ID.TXT.Last Name.
יש לנו Name זה גם כן TXT.Last Name. בנוסף נגדיר שאנחנו רוצים את ה-Gender כלומר המין של המשתמש. יש לנו פה Span Gender ולצורך כך בואו נגדיר Select.
ל-Select כמובן גם כן יש ID Cell Gender ו-Name Cell Gender ובתוכו יש לנו אופשנים של Male ואופשן של Female כאשר ה-Value שלהם גם צריך להיות משהו שמתאר את זה לדוגמה גם כן Male ו-Value Female ובואו נניח שיש לנו עוד אופשן אחד שמתאר Select Gender וה-Value שלו בואו נניח שהוא הוא נרשום נ"ל, אז זה בעצם הג'נדר.
מעבר לג'נדר, בואו נגדיר פה ירידת שורה ונגדיר אימייל, ספאן עבור אימייל, אם כמובן תיבת טקסט נוכל להעתיק אותה מכאן, שתתאר לנו input type שווה טקסט, ID txt, אימייל וגם ה-name txt, אימייל ואותו הדבר נגדיר עבור טלפון, יש לנו פה phone, txt, phone, txt, phone.
בקשר ללחצנים, בואו נגדיר לחצן אחד של input type=submit value send ועוד input type= reset value clear כדי שהמשתמש יוכל לנקות את התיבות. עכשיו אנחנו צריכים להגדיר את הדף הזה, save.
בואו נצרף new file חדש מסוג html עבור שמירת הנתונים בצד השרת. נגדיר פה open וזה בעצם הדף שנגדיר פה איזשהו h1, saving the data.
כאן יש לנו save. בואו נשמור אותו באותה תיקייה, save.htm ואנחנו יכולים לסגור אותו ולבדוק כרגע האם המידע אכן מגיע לדף היעד. אז נריץ את הדף שלנו ואנחנו יכולים להכניס נתונים, הם יכולים להיות נכונים, הם יכולים להיות לא נכונים, אנחנו יכולים גם לא להכניס שום דבר בתיבות מסוימות,
וללחוץ על send והגענו לדף היעד ואנחנו רואים כאן למעלה את כל המידע שמגיע אלינו ב-query string אנחנו יכולים לראות את המידע לפי ה-name וזה בדיוק הסיבה שהיינו צריכים את ה-name שווה והערכים ששלחנו בתיבות הטקסט.
אמפרסנד מפריד בין הפריטים השונים כאן אנחנו רואים txt last name שווה ואנחנו רואים את המידע שנכנס כרגע הוא לא נכנס ולכן יש לנו פה מחוזת ריקה לאחר מכן sell gender שווה וכו' וכו'.
אנחנו בעצם רוצים עכשיו לבצע מספר בדיקות אימות קלט בכדי לראות שהמידע באמת הוא תקין מבחינתנו. בואו נתחיל לחשוב איך אנחנו יכולים לעשות את זה.
אז ראשית מתי אנחנו רוצים לבצע את הבדיקה? אנחנו רוצים לבצע את הבדיקה כמובן כאשר לוחצים על הלחצן submit. אוקיי, מה זאת אומרת שאנחנו צריכים להשתמש ביכולות שלמדנו בקשר לאירועים?
ולכן אנחנו צריכים לקחת את האירוע onclick ובאירוע onclick שמתבצע כמובן כשלוחצים קליק על הלחצן לקרוא לפונקציה בוא נקרא לפונקציה שנקראת ולידייק והיא תבצע את הבדיקות אימות קלט.
במידה והיא מצאה שגיאה הפונקציה הולכת להציג הודעת שגיאה למשתמש בלי לרוץ לצד של השרת. אבל הפונקציה הזאת היא צריכה גם לדעת לבטל את לחצן הסבמיט ואנחנו ראינו שבשביל לעשות את זה היא צריכה להחזיר לנו true או false.
אם הפונקציה מחזירה true אז אנחנו רוצים שהיא תאשר את הפעולה של הלחצן ואכן הדף יגיע לדף היעד. אם היא תחזיר לנו פולס אנחנו רוצים לבטל את פעולת הסאבמיט לצורך כך אנחנו צריכים להחזיר את הערך שחוזר מהפונקציה על ידי המילה ריטרן.
עכשיו אנחנו יכולים לגשת ובג'אווה סקריפט לבנות את הפונקציה הזאת. אז בואו נעתיק אותה נלך לאזור של הג'אווה סקריפט נבנה function validate ובתוך הפונקציה אנחנו הולכים לבצע את הבדיקות.
במידה והייתה שגיאה אנחנו מציגים הודעה ומחזירים פולס. במידה והכל בסדר בסוף הפונקציה נחזיר true. אז בואו נתחיל לחשוב מה הבדיקות שאנחנו רוצים לעשות.
אז בואו נניח שמבחינתנו המשתמש חייב להכניס או שם פרטי או שם משפחה או שניהם. זאת אומרת שאנחנו צריכים לבדוק האם המידע שנכנס בתיבת הטקסט של ה-TXT first name שונה ממחרוזת ריקה או המידע שנכנס יותר נכון וגם המידע שנכנס ל-last name שונה ממחרוזת ריקה.
במידה ושניהם ביחד מחוזת ריקה זה לא בסדר אני מכניס או מציג איזושהי הודעת שקיעה. לצורך כך אני צריך לקחת את הערכים מתיבות הטקסט. אז בואו נגדיר כאן משתנים var first name ונגיע למידע על ידי document.getElementByID נשלח את התיבה טקסט את ה-ID של התיבה טקסט txt first name וקיבלנו בחזרה את כל הדבר הזה שווה
בעצם בחזרה. אובייקט בעץ אדום שמתאר את תיבת הטקסט. אם אני רוצה לקחת את הערך שנמצא בתוך תיבת הטקסט, עליי להיכנס למאפיין value שזה המידע שרשום בתוך תיבת הטקסט, ואז לקחתי את הטקסט עצמו.
אותו הדבר נבצע על ה-last name, ואז יש לנו פה גם txt last name נקודה