מדריך ASP.NET – שימוש בולידציה

IdoFlatow ‏ • Sela

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

מהי ולידציה ב – ASP.NET?

הולדיציה היא בדיקת הקלט לפני שאנחנו מבצעים איתו פעולה. לולידציה ישנם שני תפקידים עיקריים:

1. נוחות למשתמש – במידה והמשתמש טעה ניתן להציג לו את השגיאה בצורה נוחה ומהירה

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

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

מה עושים ה – Validators ב – ASP.NET? את שניהם! היתרון הגדול שלהם הינו שאיננו נדרשים לכתוב קוד עבור השרת ועבור הלקוח, ה – Validator יעשה את העבודה לשניהם.

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

שלב 1 – יצירת הטופס

ניצור את הטופס עם שתי תיבות טקסט וכפתור. ה – ASPX יראה כך:

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeBehind="ValidatorsDemo.aspx.cs"
  Inherits="Demos.ValidatorsDemo" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" Text="First Name" 
      AssociatedControlID="txtFirstName" runat="server" />
    <asp:TextBox runat="server" ID="txtFirstName" />
    <br />
    <asp:Label ID="Label2" Text="Last Name" runat="server" 
      AssociatedControlID="txtLastName" />
    <asp:TextBox runat="server" ID="txtLastName" /><br />
    <asp:Button Text="Submit" runat="server" ID="btnSubmit" />
  </div>
  </form>
</body>
</html>

כעת יש לנו טופס פשוט – ללא ולידציה

שלב 2 – הוספת Validators

אם נתבונן ב – Toolbox נראה שישנו איזור של Validation המכיל את ה – Validators של ASP.NET ופקד נוסף שנקרא ValidationSummary, תפקיד הפקד הזה הוא להציג את כל הודעות השגיאה, אם ישנן, באזור אחד.

נוסיף כעת את ה – Validators הדרושים לנו – במקרה הזה אנו נדרשים ל – RequiredFieldValidator. הגדרתו ב – ASPX תראה כך:

<asp:RequiredFieldValidator ID="firstNameValidator" 
  ControlToValidate="txtFirstName" runat="server" 
  ErrorMessage="Please enter First Name" Display="Dynamic" 
  ForeColor="Red" SetFocusOnError="True" 
  EnableClientScript="true"/>

נעבור על המאפיינים העיקריים:

1. ControlToValidate – ה – ID של הפקד עליו עורכים את הולידציה, המאפיין החשוב ביותר.

2. ErrorMessage – הודעת השגיאה של ה – Validator.

3. SetFocusOnError – האם להביא את הסמן לפקד שהולידציה שלו נכשלה.

4. Display – אופן התצוגה של השגיאה. כאן ישנן שלוש אפשרויות:

None – אל תציג כלל (אם נשתמש ב – ValidationSummary הודעת השגיאה תוצג בו).

Dynamic – הצג אם יש שגיאה.

Static – הצג אם יש שגיאה, אם לא שמור מקום ריק.

5. Text – מה שה – Validator מציג במקרה של הודעת שגיאה, אם לא הוגדר מוצג ה – ErrorMessage.

שימוש נפוץ הוא הצגת כוכבית בשדה הזה כאשר הודעת השגיאה (ErrorMessage) מוצגת ב – ValidationSummary.

6. EnableClientScripts – האם לאפשר ולידציה בצד הלקוח. כברירת מחדל ערך שדה זה הוא true.

כעת, לאחר שעברנו על המאפינים, נראה את הטופס שלנו לאחר הוספת ה – Validators

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeBehind="ValidatorsDemo.aspx.cs"
  Inherits="WebApplication17.ValidatorsDemo" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:Label ID="Label1" Text="First Name" 
      AssociatedControlID="txtFirstName" runat="server" />
    <asp:TextBox runat="server" ID="txtFirstName" />
    <asp:RequiredFieldValidator ID="firstNameValidator" 
      ControlToValidate="txtFirstName" runat="server" 
      ErrorMessage="Please enter First Name" Text="*" 
      Display="Dynamic" ForeColor="Red" SetFocusOnError="True" 
      EnableClientScript="true"></asp:RequiredFieldValidator>
    <br />
    <asp:Label ID="Label2" Text="Last Name" runat="server" 
      AssociatedControlID="txtLastName" />
    <asp:TextBox runat="server" ID="txtLastName" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" 
      ControlToValidate="txtLastName" runat="server" 
      ErrorMessage="Please enter Last Name" Text="*" 
      Display="Dynamic" ForeColor="Red" SetFocusOnError="True" 
      EnableClientScript="true"></asp:RequiredFieldValidator>
    <br />
    <asp:Button Text="Submit" runat="server" 
      ID="btnSubmit" OnClick="btnSubmit_Click" />
    <asp:ValidationSummary ID="ValidationSummary" 
      runat="server"/>
  </div>
  </form>
</body>
</html>

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

שלב 3 – הפעלת ולידציה בצד השרת

אם משנים את מאפייני EnableClientScripts בכל ה – Validators ל – false, הדף ישלח לשרת גם אם הולידציה נכשלה, כך שפעולות כגון שמירה לבסיס הנתונים יבוצעו למרות השגיאות, אם כי כשהעמוד יחזור לדפדפן, יוצגו הודעות השגיאה.

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

protected void btnSubmit_Click(object sender, EventArgs e)
{
  if (Page.IsValid)
  {
    RegisterUser();
  }
}

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

סוגי Validators

1. RequiredFieldValidator – מוודא שבפקד הנבדק קיים ערך.

2. RangeValidator – מוודא שהערך בפקד הנבדק הוא בין שני ערכים. מאפיינים עיקריים:

MaximumValue, MinimumValue (ערכי מינימום ומקסימום בהתאמה)
Type – סוג הנתון שיש בפקד (מספר, תאריך …)

3. CompareValidator – משווה את הערך בפקד הנבדק לעומת הערך בפקד אחר (או ערך קבוע) וקובע אם הוא תקין או לא בהתאם לסוג ההשוואה המוגדר. מאפיינים עיקריים:

ControlToCompare – הפקד בו נמצא הערך אליו משווים את הערך בפקד הנבדק
ValueToCompare – הערך אליו משווים את הערך בפקד הנבדק (אם גם ValueToCompare וגם ControlToCompare מוגדרים אזי הבדיקה תהיה מול ControlToCompare)
Type – סוג הנתון שיש בפקד
Operator – הבדיקה אותה עושים. אפשרויות:
Equal – הערך תקין אם שווה ל…

GreaterThan – הערך תקין אם גדול מ…
GreaterThanEqual – הערך תקין אם שווה או גדול מ –
LessThan – הערך תקין אם קטן מ…
LessThanEqual – הערך תקין אם שווה או קטן מ…
NotEqual – הערך תקין אם שונה מ…
DataTypeCheck – הערך תקין אם הוא מאותו סוג

4. RegularExpressionValidator – בדיקה האם הערך תואם ל-RegularExpression (טוב לבדיקה עבור שדות עם פורמט מוגדר כמו דואר אלקטרוני, מספר טלפון, כתובת אתר וכו')

מאפיין עיקרי: VaildationExpression – ה – RegularExpression לבדיקה.

5. CustomValidator – אם נרצה לפתח ולידציה משל עצמינו נוכל להשתמש ב – CustomValidator. כאן נצטרך לכתוב מתודה עבור OnServerValidate שתופעל כאשר ה – Validator

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

תגיות: .net, ASP.Net, מדריך, פיתוח, צד שרת