[原創]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（字符串）：必須滿足的正則表達式
• RegexMessage（字符串）：不滿足正則表達式時提示信息
• RegexPattern（枚舉）：正則表達式常用類型
  • 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非常有用，內置了很多我們經常用到的正則表達式。

 

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. 常用驗證舉例

 

結束日期大於開始日期：

<ext:DatePicker ID="DatePicker1" Label="開始日期" Required="true" runat="server">
</ext:DatePicker>
<ext:DatePicker ID="DatePicker2" Label="結束日期（大於開始日期）" Required="true" CompareControl="DatePicker1"
    CompareOperator="GreaterThan" CompareMessage="結束日期應該大於開始日期！" runat="server">
</ext:DatePicker>

 

 

判斷兩個文本框相等：

<ext:TextBox ID="TextBox1" Required="true" Label="文本框 1" runat="server">
</ext:TextBox>
<ext:TextBox ID="TextBox2" Required="true" Label="文本框 2（等於文本框 1）" CompareControl="TextBox1"
    CompareOperator="Equal" CompareMessage="文本框 2 應該等於文本框 1！" runat="server">
</ext:TextBox>

 

 

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

<ext:NumberBox ID="NumberBox1" Required="true" Label="數字框 1" runat="server">
</ext:NumberBox>
<ext:NumberBox ID="NumberBox2" Required="true" Label="數字框 2（大於等於數字框 1）" CompareControl="NumberBox1"
    CompareOperator="GreaterThanEqual" CompareMessage="數字框 2 應該大於等於數字框 1!" runat="server">
</ext:NumberBox>

 

 

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

<ext:Label ID="Label1" runat="server" Label="標簽 1" Text="88">
</ext:Label>
<ext:TextBox ID="TextBox3" Required="true" Label="文本框 3（大於等於標簽 1）" CompareControl="Label1"
    CompareOperator="GreaterThanEqual" CompareType="Int" CompareMessage="文本框 3 應該大於等於標簽 1！"
    runat="server">
</ext:TextBox>

 

 

如何進行服務器端驗證？

除了客戶端驗證外，有時我們必須在后台進行驗證，比如用戶注冊時檢查用戶輸入的用戶名時候有效，就必須通過后台查詢數據庫才能知道。

 

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

 

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

 

實現代碼如下：

<ext:SimpleForm ID="SimpleForm1" runat="server" Width="500px" BodyPadding="5px" EnableBackgroundColor="true"
    Title="用戶注冊表單">
    <Items>
        <ext:TextBox ID="tbxUserName" runat="server" Label="用戶名" MinLength="3" Required="True"
            ShowRedStar="True" Text="admin">
        </ext:TextBox>
        <ext:TextBox ID="tbxPassword" runat="server" Label="密碼" Required="True" ShowRedStar="True"
            TextMode="Password">
        </ext:TextBox>
        <ext:Button ID="btnRegister" runat="server" Text="注冊" OnClick="btnRegister_Click"
            ValidateForms="SimpleForm1" ValidateTarget="Top">
        </ext:Button>
    </Items>
</ext:SimpleForm>

protected void btnRegister_Click(object sender, EventArgs e)
{
    if (tbxUserName.Text == "admin")
    {
        tbxUserName.MarkInvalid(String.Format("'{0}' 是保留字，請另外選擇！", tbxUserName.Text));

        Alert.ShowInTop("表單服務器端驗證失敗！");
    }
}

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

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

 

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

 

小結

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

 

 

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

 

 

 

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