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

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

• מה זה אימות טופס?
• אימות טפסים ב- JS זוויתי
• שלבים באימות טפסים
• קוד

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

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

אם הביטוי הרגולרי וערך השדה זהים אז נוכל לומר שהצורה שלנו מאומתת. בטופס 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.

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

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