JavaScript/טפסים: הבדלים בין גרסאות בדף

מתוך ויקיספר, אוסף הספרים והמדריכים החופשי
תוכן שנמחק תוכן שנוסף
Ergo12 (שיחה | תרומות)
←‏בדיקת טופס: שימוש ב <syntaxhighlight>
שורה 4: שורה 4:
==בדיקת טופס==
==בדיקת טופס==
סביר להניח שפעמים רבות רציתם אבל לא ידעתם, איך בודקים אם המשתמש הכניס תוכן חוקי לשדות בטופס (from).
סביר להניח שפעמים רבות רציתם אבל לא ידעתם, איך בודקים אם המשתמש הכניס תוכן חוקי לשדות בטופס (from).
הדרך בה נבדוק את הטופס תפתור לכם את הבעיות, אך לא את כולם - כי היא מתבססת על תכנות בצד לקוח (JavaScript), כשתלמדו שפות צד-שרת ([[PHP]], [[ASP]], וכו'). חשוב לזכור כי תכנות בצד הלקוח אינו תמיד נתון לשליטת האתר, לדוגמה - המשתמש יכול לחסום Javascript. לכן, וידוא של נתונים בצד הלקוח אינו מספיק וחייב להתבצע גם בצד השרת.
הדרך בה נבדוק את הטופס תפתור לכם את הבעיות, אך לא את כולם - כי היא מתבססת על תכנות בצד לקוח (JavaScript). אין מנוס מעבודה בצד-שרת, ולכן דרושות גם שפות לצד זה ([[PHP]], [[ASP]], וכו'). חשוב לזכור כי תכנות בצד הלקוח אינו תמיד נתון לשליטת האתר, לדוגמה - המשתמש יכול לחסום Javascript. יתרה מכך, מדובר לא רק על נכונות הנתונים, אלא גם על בטיחות השרת. לכן, וידוא של נתונים בצד הלקוח אינו מספיק וחייב להתבצע גם בצד השרת.


נסביר את הרעיון מאחורי בדיקת הטופס, בדוגמא:
נסביר את הרעיון מאחורי בדיקת הטופס, בדוגמא:
שורה 13: שורה 13:
נפתח דף חדש, נקרא לו '''index.html''' ובתוכו -
נפתח דף חדש, נקרא לו '''index.html''' ובתוכו -


<syntaxhighlight lang="html">
<pre style="direction: ltr">
<form method="post" action="process.php" onsubmit="return validate( this )">
<form method="post" action="process.php" onsubmit="return validate( this )">
<!-- Username input -->
<!-- Username input -->
שורה 20: שורה 20:
<input type="submit" value="Submit" />
<input type="submit" value="Submit" />
</form>
</form>
</syntaxhighlight>
</pre>


'''שימו לב''' לתכונת האירוע - התכונה '''onSubmit''' שעושה בידיוק את מה שמרומז בשמה - כאשר הטופס נשלח היא '''מחזירה''' בעזרת מילת המפתח '''return''' את הנתונים לפונקציה שנקראת <span dir="ltr" style="direction: ltr;">'''validate ( )'''</span> בעזרת מילת המפתח '''this''',(לא חובה) אפשר לומר שזהו חלק אינטגרלי מהתהליך של בדיקת הטופס למעשה, אם תחסירו אחת ממילות המפתח, JavaScript תזעיק טעות כללית.
'''שימו לב''' לתכונת האירוע - התכונה '''onSubmit''' שעושה בידיוק את מה שמרומז בשמה - כאשר הטופס נשלח היא '''מחזירה''' בעזרת מילת המפתח '''return''' את הנתונים לפונקציה שנקראת <span dir="ltr" style="direction: ltr;">'''validate ( )'''</span> בעזרת מילת המפתח '''this''',(לא חובה) אפשר לומר שזהו חלק אינטגרלי מהתהליך של בדיקת הטופס למעשה, אם תחסירו אחת ממילות המפתח, JavaScript תזעיק טעות כללית.

גרסה מ־10:51, 23 בדצמבר 2017

JavaScript

התחלת העבודה

הוראת תנאי

אובייקטים

מערכים

לולאות

פונקציות

אובייקט המסמך

אוביקטים נוספים

JavaScript למתקדמים

ספריות

בינה מלאכותית


גרסה להדפסה

רצוי לחזור תחילה על HTML/טפסים.

בדיקת טופס

סביר להניח שפעמים רבות רציתם אבל לא ידעתם, איך בודקים אם המשתמש הכניס תוכן חוקי לשדות בטופס (from). הדרך בה נבדוק את הטופס תפתור לכם את הבעיות, אך לא את כולם - כי היא מתבססת על תכנות בצד לקוח (JavaScript). אין מנוס מעבודה בצד-שרת, ולכן דרושות גם שפות לצד זה (PHP, ASP, וכו'). חשוב לזכור כי תכנות בצד הלקוח אינו תמיד נתון לשליטת האתר, לדוגמה - המשתמש יכול לחסום Javascript. יתרה מכך, מדובר לא רק על נכונות הנתונים, אלא גם על בטיחות השרת. לכן, וידוא של נתונים בצד הלקוח אינו מספיק וחייב להתבצע גם בצד השרת.

נסביר את הרעיון מאחורי בדיקת הטופס, בדוגמא:

נפתח דף חדש, נקרא לו index.html ובתוכו -

<form method="post" action="process.php" onsubmit="return validate( this )">
	<!-- Username input -->
    Username: <input type="text" name="username" id="username" maxlength="24" />
	<!-- Submit button -->
    <input type="submit" value="Submit" />
</form>

שימו לב לתכונת האירוע - התכונה onSubmit שעושה בידיוק את מה שמרומז בשמה - כאשר הטופס נשלח היא מחזירה בעזרת מילת המפתח return את הנתונים לפונקציה שנקראת validate ( ) בעזרת מילת המפתח this,(לא חובה) אפשר לומר שזהו חלק אינטגרלי מהתהליך של בדיקת הטופס למעשה, אם תחסירו אחת ממילות המפתח, JavaScript תזעיק טעות כללית.

לסיכום שלב א' - בניית טופס ב-HTML ובתוכו לקרוא לפונקציה בעזרת onSubmit.

  • שלב ב' - כעת יש לתכנן את הפונקציה validate ( ) ובתוכה בדיקת הטופס.

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

פונקציה בשם validate שמקבלת ארגומנט (ערך) מהטופס שבנינו בשלב קודם, על ידי המילה this אנו שולחים את כל האלמנטים בטופס (שדות, כפתורי בחירה ורדיו, ועוד'):

<script type="text/javascript">
  function validate( element ) {
  // ... Statements ...
  }
</script>

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

<script type="text/javascript">
  function validate( element ) {
    // Get element value ...
    var un = element.username.value;
    // Validate element's value ...
    if ( un == null || un == "" ) {
    alert("אנא הכנס ערך בשדה שם משתמש.");
    submit.username.focus(); 
    return false;
    }
    // Validate restricted characters ...
    if (un.indexOf("%")>-1 || un.indexOf("<")>-1 || un.indexOf(">")>-1 || un.indexOf("\\")>-1 || un.indexOf("/")>-1) {
    alert("שם המשתמש לא תקין.");
    submit.username.focus();
    return false;
    } 
  }
</script>

הפונקציה בודקת האם שם המשתמש (Username) מכיל תווים והאם יש תויים לא חוקיים כמו <, >, ', \, /, %. בעזרת הפונקציה indexOf ( ) אנו בודקים אם קיים תוו מסוים כלומר אם האינדקס שלו גדול מ- אז הוא קיים. שימו לב לצורה שבא פונים לאלמנט (שדה טקסט במקרה הזה) var un = element.username.value;.