מדריך CSHTML – בדיקות תקינות קלט

מהן בדיקות תקינות קלט

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

במקרים כאלו נרצה לזהות את הערך הלא תקין ולתת הודעה מתאימה למשתמש כדי שיתקן את הערכים שהזין.

הוספת בדיקות תקינות קלט

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

@{
    var result = "";
    if(IsPost)
    {
        var num1 = Request["num1"].AsInt();
        var num2 = Request["num2"].AsInt();
        var action = Request["operation"];
 
        int res = 0;
        if(action == "add")
        {
            res = num1 + num2;
        }
        else if (action == "sub")
        {
            res = num1 - num2;
        }
        else if (action == "mul")
        {
            res = num1 * num2;
        }
        else if (action == "div")
        {
            res = num1 / num2;
        }
        result = res.ToString();
    }
}

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

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

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

לצורך ביצוע הבדיקות נשתמש במספר פונקציות:

• IsEmpty() – לצורך בדיקה האם המשתמש הזין ערך בשדה
• IsInt() – לצורך בדיקה האם הערך בשדה הינו מספרי

במידה ומצאנו שגיאה, נשתמש בפונקציה Validation.AddFieldError כדי לציין מהו השדה שאינו תקין ולהוסיף הודעת שגיאה למשתמש.

נוסיף את הקוד הבא לצורך בדיקות התקינות לפי ביצוע החישוב.

@{
    var result = "";
    if(IsPost)
    {
        if ( Request["num1"].IsEmpty() )
        {
            Validation.AddFieldError("num1", "Please enter the first number");
        }
        else if ( !Request["num1"].IsInt() )
        {
            Validation.AddFieldError("num1", "Please enter a number in the first text box");
        }
        
        if ( Request["num2"].IsEmpty() )
        {
            Validation.AddFieldError("num2", "Please enter the second number");
        }
        else if ( !Request["num2"].IsInt() )
        {
            Validation.AddFieldError("num2", "Please enter a number in the second text box");
        }
        else if ( (Request["num2"].AsInt() == 0) && (Request["operation"] == "div" ) )
        {
            Validation.AddFieldError("num2", "Cannot divide by zero");
        }            
        
        ...
    }
}

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

if ( Validation.Success )
{
    var num1 = Request["num1"].AsInt();
    var num2 = Request["num2"].AsInt();
    var action = Request["operation"];

    int res = 0;
    if(action == "add")
    {
        res = num1 + num2;
    }
    else if (action == "sub")
    {
        res = num1 - num2;
    }
    else if (action == "mul")
    {
        res = num1 * num2;
    }
    else if (action == "div")
    {
        res = num1 / num2;
    }
    result = res.ToString();
}

כדי להציג למשתמש את כל הודעות השגיאה שנאספו במהלך בדיקות התקינות, עלינו להוסיף את הפקודה Html.ValidationSummary() לדף שלנו. לדוגמא, מתחת לטופס.

<form method="post" action="">
    ...
</form>
@Html.ValidationSummary()

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

רק אם נזין ערכים תקינים, יבוצע החישוב.

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