כיצד ליישם אימות טפסים ב- JS Angular?

מאמר זה יספק לך ידע מפורט ומקיף כיצד ליישם אימות טפסים ב- JS Angular עם דוגמאות

אימות הוא שיטה ל לְאַמֵת המשתמש. הוא משמש בכל טכנולוגיות האינטרנט כמו ו . אך כיום המיקוד שלנו יהיה על אימות ב- JS זוויתי בסדר הבא:



מהו אימות טפסים?

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



validation-in-angular-jsאם הביטוי הרגולרי וערך השדה זהים אז נוכל לומר שהצורה שלנו מאומתת. בטופס HTML, ישנם סוגים שונים של אימות כמו דוא'ל, חובה, מינימום, מקסימום, סיסמה וכו '.

אימות טפסים ב- JS זוויתי

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



  • $ תקף : מאפיין זה מספר אם השדה תקף או לא על ידי החלת הכלל המתאים לכך.

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

  • וטהור : זה יחזיר נכון בשדה קלט הטופס לא נעשה שימוש.



  • מלוכלך $ : זה יחזיר נכון בשדה קלט הטופס בשימוש.

  • נגע $ : BooleanTrue אם הקלט טשטש.

כדי לגשת לטופס: .

כדי לגשת לקלט: ..

עכשיו נסביר את אימות הטופס ב- JS זוויתי עם דוגמה ולכן ראשית אנו יוצרים שני קבצים, אחד הוא app.js ואחר הוא index.html. הקובץ index.htm שלנו מכיל טופס HTML פשוט בעל אימות זוויתי וקובץ app.js שלנו מכיל את קוד ה- backend לטיפול באימות הטופס בדף index.html.

כיצד להשתמש ב- br ב- html

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

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

שלבים באימות טפסים

בצורה שלנו, יצרנו 6 שדות בצורה שלנו אלה הם שם פרטי, שם משפחה, דוא'ל, טלפון, סיסמה והודעה.

  1. ראשית, אנו מוסיפים את מאמת השדות הנדרש, מאמת זה אומר למשתמשים כי נדרש שדה ספציפי.

  2. הבא הוא שדה הדוא'ל אם משתמש לא נותן דוא'ל חוקי כלשהו, ​​מאמת הדוא'ל שלנו משליך שגיאת אימות דוא'ל.

  3. הגדרנו את המינימום ואת האורך המקסימלי באימות הסיסמה שלנו האורך המינימלי הוא 5 והאורך המקסימלי הוא 8 כך שהמשתמש יכול לתת סיסמה תקפה בין 5 ל -8 תווים.

  4. לבסוף, הגדרנו את הטלפון ואת שדות ההודעות הנדרשים ובאופן ספציפי, אנו מיישמים אימות מספר בטלפון שהוגש.

קוד לאימות טפסים ב- JS Angular

index.html

דוגמה להיקף זוויתי שם פרטי 

הגשה זו נדרשת

התוכנה הטובה ביותר לתכנות Java
שם משפחה

הגשה זו נדרשת

אימייל

הגשה זו נדרשת

לא דוא'ל חוקי

מכשיר טלפון

הגשה זו נדרשת

זה לא טלפון תקף

סיסמה

הגשה זו נדרשת

סיסמה בין 5 ל -8 תווים

הוֹדָעָה

הגשה זו נדרשת

שלח

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', פונקציה ($ scope) {})

בואו נדבר על הוראת אימות כלשהי המשמשת בצורה:

  • נדרש : לאספקת השדה הנדרש
  • ng-show : כדי להציג את הודעת השגיאה על סמך התנאי (בדוק את מאפייני האימות)
  • של אורך דק : למתן אורך מינימלי
  • ng- maxlength : לספק את האורך המרבי
  • של דפוס : כדי להתאים לדפוס ספציפי
  • מודל ng : קושר את השדה עם מאפייני אימות כמו $ error, $ valid וכו '.

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

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

יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות במאמר זה ונחזור אליך.