[原創]FineUI秘密花園（九） — 表單驗證

表單驗證是Web開發中必不可少的一個環節，用來限制使用者輸入資料的規範和一致性。那麼如何能夠簡化這一任務，讓開發人員通過簡單的屬性設定就能達到目的呢？

FineUI在這一點上也是下足了功夫，比Asp.Net原生的CompareValidator、RangeValidator、RequiredFieldValidator等控制項好用多了，眼見為實，下面就來詳細介紹如何在FineUI進行表單驗證。

 

如何驗證表單？

可以通過如下兩步來完成表單的驗證。

1. 為每個表單控制項設定驗證屬性。

比如為TextBox設定Required=”true”和ShowRedStar=”true”兩個屬性，表示此輸入為必填項，並且在標籤的後面顯示一個紅色的星號提示。詳細內容會在下一節講解。

 

2. 通過按鈕屬性設定需要驗證的表單。

ValidateForms：需要驗證的表單名稱列表（逗號分隔），可以指定點擊按鈕時同時驗證多個表單。

ValidateTarget：驗證失敗時提示對話方塊彈出位置，可以是Target.Self、Target.Parent、Target.Top。在架構頁面中，你可能希望彈出的提示資訊能夠覆蓋整個頁面，而不僅僅是IFrame的部分頁面。

 

 

除此之外，還有一些屬性用來控製表單驗證的行為，分為三個層級的控制：

1. Web.config層級的控制

分別有FormMessageTarget、FormOffsetRight、FormLabelWidth、FormLabelSeparator幾個參數來設定，在《FineUI秘密花園（三） — 深入Web.config》已有詳細描述。

 

2. PageManager層級的控制

同樣是這四個屬性，在《FineUI秘密花園（四） — 每個頁面需要一個PageManager》一文中也有詳細的描述。

 

3. Form、SimpleForm表單層級的控制

可以通過LabelWidth和LabelSeparator兩個屬性進行控制。

 

表單控制項與驗證相關的通用屬性

所謂的通用屬性指的是DropDownList、DatePicker、NumberBox、TextArea、TextBox等表單控制項都有的驗證屬性，可以分為以下幾類：

 

1. 是否為必填項

• Required（布爾）：是否為必填項
• RequiredMessage（字串）：為空白時提示資訊

 

2. Regex

• Regex（字串）：必須滿足的Regex
• RegexMessage（字串）：不滿足Regex時提示資訊
• RegexPattern（枚舉）：Regex常用類型
  • RegexPattern.NUMBER：數字
  • RegexPattern.ALPHA：大寫和小寫字母
  • RegexPattern.ALPHA_NUMERIC：字母和數字
  • RegexPattern.ALPHA_UNDERLINE：字母和底線
  • RegexPattern.ALPHA_NUMERIC_UNDERLINE：字母數字和底線
  • RegexPattern.ALPHA_LOWER_CASE：小寫字母
  • RegexPattern.ALPHA_UPPER_CASE：大寫字母
  • RegexPattern.EMAIL：電子郵箱
  • RegexPattern.URL：網址
  • RegexPattern.POSTAL_CODE：郵遞區號
  • RegexPattern.IP_ADDRESS：IP地址
  • RegexPattern.IDENTITY_CARD：社會安全號碼（不錯吧，還有國內的18位社會安全號碼）

其中RegexPattern非常有用，內建了很多我們經常用到的Regex。

 

3. 長度限制

• MaxLength（整數）：最大長度
• MaxLengthMessage（字串）：超過最大長度時提示資訊
• MinLength（整數）：最小長度
• MinLengthMessage（字串）：少於最小長度時提示資訊

 

4. 比較（包括與控制項值比較、與常量比較）

• CompareControl（字串）：需要比較的控制項ID
• CompareValue（字串）：需要比較的值
• CompareOperator（枚舉）：比較操作符
  • Operator.Equal（預設值）
  • Operator.GreaterThan
  • Operator.GreaterThanEqual
  • Operator.LessThan
  • Operator.LessThanEqual
  • Operator.NotEqual
• CompareType（枚舉）：比較的類型
  • CompareType.Float
  • CompareType.Int
  • CompareType.String（預設值）
• CompareMessage（字串）：不滿足比較條件時提示資訊

其中，CompareType有時會起到關鍵的作用，比如在比較兩個數字輸入框的值時，如果不設定CompareType，則輸入值“3”會大於“10”。

 

 

表單控制項特有的限制屬性

有一些控制項擁有自己特有的限制屬性，下面會列舉出來。

1. 日期選擇控制項（DatePicker）

• MinDate（日期）：最小日期限制
• MaxDate（日期）：最大日期限制

 

2. 數字輸入框（NumberBox）

• MinValue（浮點數）：最小值
• MaxValue（浮點數）：最大值
• NoNegative（布爾）：不允許負數
• NoDecimal（布爾）：不允許小數
• DecimalPrecision（整數）：小數點後的位元（預設為2）

 

用戶端驗證樣本

1. 同時驗證多個表單

這個非常簡單，只需要在ValidateForms中指定要驗證表單的ID即可（逗號分隔）。

<ext:Button ID="btnSubmitAll" Text="驗證兩個表單並提交" runat="server" OnClick="btnSubmitAll_Click"                        ValidateForms="extForm1,extForm2" />

 

2. 常用驗證舉例

 

結束日期大於開始日期：

   1:  <ext:DatePicker ID="DatePicker1" Label="開始日期" Required="true" runat="server">

   2:  </ext:DatePicker>

   3:  <ext:DatePicker ID="DatePicker2" Label="結束日期（大於開始日期）" Required="true" CompareControl="DatePicker1"

   4:      CompareOperator="GreaterThan" CompareMessage="結束日期應該大於開始日期！" runat="server">

   5:  </ext:DatePicker>

 

 

判斷兩個文字框相等：

   1:  <ext:TextBox ID="TextBox1" Required="true" Label="文字框 1" runat="server">

   2:  </ext:TextBox>

   3:  <ext:TextBox ID="TextBox2" Required="true" Label="文字框 2（等於文字框 1）" CompareControl="TextBox1"

   4:      CompareOperator="Equal" CompareMessage="文字框 2 應該等於文字框 1！" runat="server">

   5:  </ext:TextBox>

 

 

一個數字大於另一個數字：

   1:  <ext:NumberBox ID="NumberBox1" Required="true" Label="數字框 1" runat="server">

   2:  </ext:NumberBox>

   3:  <ext:NumberBox ID="NumberBox2" Required="true" Label="數字框 2（大於等於數字框 1）" CompareControl="NumberBox1"

   4:      CompareOperator="GreaterThanEqual" CompareMessage="數字框 2 應該大於等於數字框 1!" runat="server">

   5:  </ext:NumberBox>

 

 

按照整數類型比較兩個值：

   1:  <ext:Label ID="Label1" runat="server" Label="標籤 1" Text="88">

   2:  </ext:Label>

   3:  <ext:TextBox ID="TextBox3" Required="true" Label="文字框 3（大於等於標籤 1）" CompareControl="Label1"

   4:      CompareOperator="GreaterThanEqual" CompareType="Int" CompareMessage="文字框 3 應該大於等於標籤 1！"

   5:      runat="server">

   6:  </ext:TextBox>

 

 

如何進行伺服器端驗證？

除了用戶端驗證外，有時我們必須在後台進行驗證，比如使用者註冊時檢查使用者輸入的使用者名稱時候有效，就必須通過後台查詢資料庫才能知道。

 

此時，我們希望FineUI能夠提供一個簡單的介面來實現用戶端驗證相同的效果。幸運的是，FineUI考慮到了這個常見需求，並特意為此提供了介面，下面通過一個簡單的樣本說明。

 

比如，我們有一個使用者註冊表單，系統將“admin”作為系統保留字並限制使用者註冊，最終實現的效果如下：

 

實現代碼如下：

   1:  <ext:SimpleForm ID="SimpleForm1" runat="server" Width="500px" BodyPadding="5px" EnableBackgroundColor="true"

   2:      Title="使用者註冊表單">

   3:      <Items>

   4:          <ext:TextBox ID="tbxUserName" runat="server" Label="使用者名稱" MinLength="3" Required="True"

   5:              ShowRedStar="True" Text="admin">

   6:          </ext:TextBox>

   7:          <ext:TextBox ID="tbxPassword" runat="server" Label="密碼" Required="True" ShowRedStar="True"

   8:              TextMode="Password">

   9:          </ext:TextBox>

  10:          <ext:Button ID="btnRegister" runat="server" Text="註冊" OnClick="btnRegister_Click"

  11:              ValidateForms="SimpleForm1" ValidateTarget="Top">

  12:          </ext:Button>

  13:      </Items>

  14:  </ext:SimpleForm>

   1:  protected void btnRegister_Click(object sender, EventArgs e)

   2:  {

   3:      if (tbxUserName.Text == "admin")

   4:      {

   5:          tbxUserName.MarkInvalid(String.Format("'{0}' 是保留字，請另外選擇！", tbxUserName.Text));

   6:   

   7:          Alert.ShowInTop("表單伺服器端驗證失敗！");

   8:      }

   9:  }

其中，文本輸入框的MarkInvalid是代碼的關鍵，它會像用戶端驗證那樣為文本輸入框添加一個驗證失敗的提示表徵圖和文本。

除此之外，我們還提供了ClearInvalid方法，用來清空驗證失敗標誌。

 

是不是很簡單，沒有任何讓人費解的地方，這也是FineUI能夠吸引大批開發人員的原因之一。

 

小結

表單驗證是每個Web開發人員都會遇到的問題，FineUI為開發人員提供了一系列簡單的手段來快速完成一個常見任務，甚至不用寫一行C#代碼。對於需要在伺服器完整的複雜驗證邏輯，FineUI也提供了簡單的支援。

 

 

下一篇文章，我們會從Asp.Net的回傳機制入手，闡述FineUI中Ajax的實現以及如何為Asp.Net的提交按鈕添加Ajax特性。

 

 

 

註：《FineUI秘密花園》系列文章由三生石上原創，部落格園首發，轉載請註明出處。文章目錄 官方論壇