אימות טפסים בסיסי ב- JavaScript

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

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

זה היה תהליך ממושך והיה מכביד על השרת.

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

הנה קוד ה- HTML בו נשתמש בדוגמאות הבאות:

  Form Validation  // Form validation will go here     
    

     

      

       
Username
       

      
      

       
Email Address
       

      
      

       

       

      
     
    

אימות בסיסי

סוג אימות זה כולל בדיקת כל שדות החובה וודא שהם ממולאים כהלכה.

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

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } return true; } submitBtn.addEventListener('click', validate); 

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

שם נכנס אימות פורמט נתונים.

אימות פורמט נתונים

סוג אימות זה למעשה מסתכל על הערכים בטופס ומאמת שהם נכונים.

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

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

• כתובת חייבת להכיל תו אחד ולפחות נקודה אחת (.)
• התו @ לא יכול להיות התו הראשון בכתובת
• ה . חייב לבוא לפחות תו אחד אחרי התו @

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

const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } emailIsValid('[email protected]@camp.org') // false emailIsValid('[email protected]') // true

נוסף לקוד מהדוגמה האחרונה, הוא ייראה כך:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } if (!emailIsValid(emailAddress.value)) { alert("Please enter a valid email address."); emailAddress.focus(); return false; } return true; // Can submit the form data to the server } const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } submitBtn.addEventListener('click', validate); 

אילוצי טופס HTML5

חלק מהאילוצים הנפוצים ב- HTML5 הם typeהמאפיין (למשל type="password") maxlength, requiredו- disabled.

אילוץ פחות נפוץ הוא patternהמאפיין שלוקח ביטוי רגיל של JavaScript.

עוד מידע

• אימות נתוני טופס | MDN
• אימות אילוצים | MDN