Angular4 - Validator Pattern

תמלול ההרצאה: Angular4 - Validator Pattern

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

1. 00:02

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

2. 00:15

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

3. 00:24

   אתה מקבל פה התראה ש-address is required. עכשיו אנחנו רוצים לעשות דברים הרבה יותר מתוחכמים. לדוגמה אני לא רוצה שב-name מישהו יכניס לי נניח מספר אני לא רוצה שיהיו לי מספרים בתוך שם אני רוצה לתת לזה חוקים יותר יפים יותר מסובכים ובשביל זה יש לי שדה בואו נעצור את זה שנייה ונעיף את הדבאגר כאן

4. 00:45

   כדי לעשות חוקים יותר מסובכים ב-HTML 5 יש חוץ מ-required שראינו אותו אנחנו יכולים גם לשים pattern בפנים אנחנו יכולים לכתוב חוקים מה זה החוקים האלו?

5. 00:58

   בואו נלך לגוגל ונכתוב htmlvalidator pattern והחוקים הטובים יש ב-MDN שזה מוזילה האתר של מוזילה Develop Network באתר של מוזילה יש פה form data validation באתר של developersmozilla.org למה אני מראה לכם את זה כי יש פה כתוב פה מאוד ברור מה החוקים שהם למעשה החוקים של regular expression כל מי שמכיר regular expression זה למעשה הפאטרן

6. 01:26

   הזה לדוגמה אנחנו יכולים להגיד לו איזה תווים מותר או תו ABC או תו A to Z איזה תווים מותר במקום מסוים מתחילים מההתחלה ועד הסוף וכמה תווים כאלו מותר לדוגמה חייבים 5 פעמים A או חייבים 5 עד 7 פעמים A כאשר נקודה זה כל תו נקודה זה כל תו יכול להיות לדוגמה הדבר הזה מה זה אומר שחייבים להתחיל ב-L גדול או L קטן ואחרי

7. 01:51

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

8. 02:18

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

9. 02:45

   לא חוקי אוקיי אז עוד דוגמה לביטוי מורכב רק בוא נעשה פה הודעה name must begin must start with capital letter name must start with capital letter nb and must be at least three letters.

10. 03:04

    Numbers are not allowed. או ש-other characters are not allowed. Characters are not allowed. או Numbers are not allowed. I'll use the Numbers and other characters are not allowed.

11. 03:20

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

12. 03:39

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

13. 03:52

    פשוט באדום או בירוק בלי כל הסיפור הזה של Addresses Required, פשוט לצבוע את זה באדום וזהו. אז איך אנחנו עושים את זה? אם אנחנו ניכנס לאתר של Bootstrap, נעבור לגרסה 3.3, שזאת הגרסה שאני משתמש בה, ש-K4 עוד לא סופית, ופה ב-CSS, בעיצוב,

14. 04:11

    יש לי את כל הנושא של ה-Forms, של הטפסים. אתם יכולים לראות פה את ההסבר על מה זה Forum Control שעשינו, שמסביב לכל רכיב אנחנו חייבים לשים Forum Control ובפנים את ה-Label ואת ה-Textbox.

15. 04:22

    יש לנו פורום גרופ ופורום קונטרול מכאן אפשר אתם יכולים לראות מה שמעניין אותי זה ולידיישן ובוולידציות אפשר לצבוע את כל הריבוע באדום או בירוק לפי איזשהו תנאי וכל מה שצריך לעשות זה להוסיף has access אתם יכולים לראות פה הסבר bootstrap יש להם has warning has error has success וזה חייב להיות בתוך control label או פורום קונטרול

16. 04:45

    הרכיבים חייבים להיות control label או פורום קונטרול אז בואו נעשה את זה אז אנחנו רוצים למעשה להוסיף את ה-Has Arrow ברמת הגרופ כולו, שבגרופ יש לנו גם את הלייבל וגם את הרכיב.

17. 04:57

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