כיצד ליישם אימות טפסים בצד הלקוח באמצעות JavaScript

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

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

---

---

הבנת מניפולציות DOM

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

למידע נוסף: הגיבור הנסתר של אתרי אינטרנט: הבנת ה- DOM

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







Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';



בקוד לעיל,

לתג יש מזהה פסקה . בעת כתיבת קוד ה- JavaScript, באפשרותך לגשת לרכיב זה על -ידי קריאת document.getElementById ('פסקה') שיטה ומניפולציה של ערכה.

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

---

---

אימות טפסים באמצעות JavaScript

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

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

---

---

כיצד להשיג לינוקס בכרומבוק

ה- HTML element משמש ליצירת טפסים אלה הפונים למשתמש. כך תוכל לאמת את הקלטים של טופס HTML:

1. אימות דוא'ל

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

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. אימות סיסמה

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

• אורך הסיסמה צריך להיות יותר מ- 6 תווים.
• ערך הסיסמה ושדה אישור הסיסמה חייבים להיות זהים.

HTML:




JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. אימות קלט רדיו

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

ניתן להשיג זאת באמצעות פעולות לוגיות כגון AND ( && ) ולא ( ! ) מפעיל באופן זה:

HTML:

Male

Female

Others


JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. בחר אימות קלט

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

למה סוללת המחשב הנייד שלי לא נטענת

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

HTML:


Select One
Mr
Mrs
Ms


JavaScript:

תוכנת מיפוי המוחות החופשית הטובה ביותר 2019

const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. אימות תיבת סימון

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

כדי לברר אם תיבת סימון מסומנת או לא, תוכל לגשת לתכונה המסומנת בכניסה לתיבת הסימון. להלן דוגמא:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}


מניעה עדיפה על ריפוי

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד ליצור טופס ב- HTML

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

קרא הבא נושאים קשורים

• תִכנוּת
• HTML
• JavaScript
• בניית אתרים
• הדרכות קידוד

על הסופר ניטין רנגנת(31 מאמרים פורסמו)

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

עוד מאת ניטין רנגנת

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה