ASP.NET驗證控件合集含代碼演示

文章目錄

1. 窗體驗證概述

爲了提高WEB開發人員的開發效率，並降低錯誤出現的機率，ASP.NET中提供了多種多樣的數據驗證控件供開發人員使用。

在開發網站的時候，經常需要對用戶提交的數據，比如說：驗證用戶填寫的密碼是不是符合指定的規則等等，這些都涉及到驗證。在ASP.NET中，窗體驗證主要分爲客戶端驗證和服務器端驗證，如圖所示

2. ASP.NET中的數據驗證控件

2.1. 空值驗證 RequiredFieldValidator控件

RequiredFieldValidator驗證控件用來驗證輸入文本中的信息內容是否爲空。

它有五個主要屬性

屬性	說明
ControlToValidate	表示要進行驗證的控件，指定輸入控件的ID。如果沒有指定有效輸入控件，則會在顯示頁面時引發異常。另外該ID的控件必須和驗證控件在相同的容器中
ErrorMessage	當驗證不通過時的提示信息
IsValid	設置所驗證數據的有效性
Display	設置錯誤提示信息的顯示方式
Text	如果Display爲Static，並且不出錯時，顯示的文本

如下面代碼，使用RequiredFieldValidator控件來驗證用戶是否輸入用戶名、密碼和郵箱

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用戶名："></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="請輸入用戶名" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="密碼："></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="請輸入密碼" ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
        </div>
        <div>
            <asp:Label ID="Label3" runat="server" Text="郵箱："></asp:Label> 
            <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="請輸入郵箱" ControlToValidate="TextBox3"></asp:RequiredFieldValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="註冊" />
        </div>
    </form>
</body>
...

效果如圖所示：

2.2. 一致性驗證 CompareValidator控件

CompareValidator控件是一個比較驗證控件，該控件可以將輸入控件的值與常數值或其他輸入控件的值相比較，以確定這兩個值是否與比較運算符(小於、等於、大於等等)指定的關係相匹配；

另外，該控件還有數據類型檢查的功能，如判斷輸入的是否爲數字、日期等等。

它有九個主要屬性

屬性	說明
ControlToCompare	指定用於比較的輸入控件的ID。默認是沒有的
ValueToCompare	指定要比較的值，默認是沒有的
ControlToValidate	指定要進行驗證的控件ID，這個屬性必須設置爲輸入控件ID，如果沒有指定有效輸入控件，那麼在顯示頁面時引發異常。另外該ID的空間必須和驗證控件在相同的容器中
ErrorMessage	當驗證不通過時顯示錯誤的信息
IsValid	設置所驗證數據的有效性
Display	設置錯誤信息的顯示方式
Text	如果Display爲Static，並且不出錯時，就顯示該文本
Type	設置用於比較的兩個值的數據類型。有String、Integer、Double、Date、Currency五個枚舉值，默認值爲String
Operator	設置驗證中使用的比較操作。有Equal、NotEqual、GreaterThan、GreaterThanEqual、LessThan、LessThanEqual、DataTypeCheck七個枚舉值，默認值爲Equal

如下面代碼，使用CompareValidator控件來驗證用戶兩次輸入的密碼是否一致

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用戶名："></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="密碼："></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label3" runat="server" Text="確認密碼："></asp:Label> 
            <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="兩次輸入的密碼不一致" ControlToCompare="TextBox2" ControlToValidate="TextBox3"></asp:CompareValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="註冊" />
        </div>
    </form>
</body>
...

效果如圖所示：

2.3. 範圍驗證 RangeValidator控件

RangeValidator控件用於驗證用戶的輸入是否在指定範圍內。

它有八個主要屬性：

屬性	說明
ControlToValidate	指定要進行驗證的控件ID，這個屬性必須設置爲輸入控件ID，如果沒有指定有效輸入控件，那麼在顯示頁面時引發異常。另外該ID的空間必須和驗證控件在相同的容器中
ErrorMessage	當驗證不通過時顯示錯誤的信息
IsValid	設置所驗證數據的有效性
Display	設置錯誤信息的顯示方式
Text	如果Display爲Static，並且不出錯時，就顯示該文本
Type	設置用於比較的兩個值的數據類型。有String、Integer、Double、Date、Currency五個枚舉值，默認值爲String
MaximumValue	設置要驗證範圍的最大值，待驗證值必須<=MaximumValue ，默認值爲空
MinimumValue	設置要驗證範圍的最小值，待驗證值必須>=MinimumValue ，默認值爲空

例如下面的代碼設計了一個用戶註冊頁面，在該頁面中要求用戶輸入出生日期，出生日期要求限制在1990/1/1 ~2050/1/1之間，如果超過這個範圍則顯示提示信息。

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label4" runat="server" Text="出生日期："></asp:Label> 
            <asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="格式不正確" ControlToValidate="TextBox4" MaximumValue="2050/1/1" MinimumValue="1900/1/1" Type="Date"></asp:RangeValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="註冊" />
        </div>
    </form>
</body>
...

效果如圖所示，上圖是在範圍內的日期，下圖是超出範圍的日期

2.4. 正則驗證 RegularExpressionValidator控件

RegularExpressionValidator驗證控件用來驗證輸入控件的值是否與某個正則表達式所定義的模式相匹配，如身份證號碼、電子郵件地址、電話號碼、郵政編碼等。

它有六個主要屬性

屬性	說明
ControlToValidate	指定要進行驗證的控件ID，這個屬性必須設置爲輸入控件ID，如果沒有指定有效輸入控件，那麼在顯示頁面時引發異常。另外該ID的空間必須和驗證控件在相同的容器中
ErrorMessage	當驗證不通過時顯示錯誤的信息
IsValid	設置所驗證數據的有效性
Display	設置錯誤信息的顯示方式
Text	如果Display爲Static，並且不出錯時，就顯示該文本
ValidationExpression	設置作爲驗證條件的正則表達式該屬性提供了一些常用的正則表達式，例如電子郵件格式、電話號碼格式等等

例如下面的代碼通過設置RegularExpressionValidator控件的ControlToValidate屬性ValidationExpression屬性驗證用戶輸入的E-mail格式和用戶名格式是否正確，用戶名的輸入自定義了一個正則表達式來限制用戶名只能輸入字母、下畫線及數字。

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用戶名："></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="用戶名只能是字母、下劃線或者數字" ControlToValidate="TextBox1" ValidationExpression="\w+([-+.']\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Label ID="Label4" runat="server" Text="電子郵件："></asp:Label> 
            <asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="請輸入正確的郵件格式" ControlToValidate="TextBox4" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="註冊" />
        </div>
    </form>
</body>
...

效果如下面四幅圖所示

2.5. 用戶定義驗證 CustomValidator控件

CustomValidator控件可以讓用戶自定義驗證功能。例如，可以創建一個驗證控件用於檢查在文本框中輸入的值是否爲偶數。

它有七個主要屬性

屬性	說明
ControlToValidate	指定要進行驗證的控件ID，這個屬性必須設置爲輸入控件ID，如果沒有指定有效輸入控件，那麼在顯示頁面時引發異常。另外該ID的空間必須和驗證控件在相同的容器中
ErrorMessage	當驗證不通過時顯示錯誤的信息
IsValid	設置所驗證數據的有效性
Display	設置錯誤信息的顯示方式
ClientValidationFunction	設置用於驗證的自定義函數的名稱
EnableClientScript	設置是否啓用客戶端驗證
Visible	設置該控件的可見性

例如下面的代碼，實現了當用戶輸入的密碼少於6位時，彈出對話框。

...
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function myValidator() {
            var password = document.getElementById("TextBox2").value
            if (password.length < 6) {
                alert("密碼不能少於六位");
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用戶名："></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="密碼："></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="密碼不能少於六位" ControlToValidate="TextBox2" ClientValidationFunction="myValidator">
            </asp:CustomValidator>
        </div>
        <div>
            <asp:Label ID="Label3" runat="server" Text="確認密碼："></asp:Label> 
            <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="註冊" />
        </div>
    </form>
</body>
...

效果如下圖所示：

2.6. 驗證錯誤彙總 ValidationSummany控件

ValidationSummary控件是錯誤彙總控件，主要用於收集本頁中所有驗證控件的錯誤信息，將它們組織好並一起顯示出來，錯誤列表可以通過列表、項目符號列表或單個段落的形式進行顯示。

它有六個主要屬性

屬性	說明
HeaderText	控件彙總信息
DisplayMode	設置錯誤信息的顯示格式
ShowMessageBox	設置是否以彈出方式顯示每個被驗證控件的錯誤信息
ShowSummary	設置是否使用錯誤彙總信息
EnableClientScript	設置是否使用客戶端驗證
Validate	執行驗證並且更新IsValid屬性

例如下面的代碼，集中了所有的報錯信息，並彈出提示框

...
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="用戶名："></asp:Label> 
            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="用戶名只能是字母、下劃線或者數字" ControlToValidate="TextBox1" ValidationExpression="\w+([-+.']\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Label ID="Label4" runat="server" Text="出生日期："></asp:Label> 
            <asp:TextBox ID="TextBox4" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="格式不正確" ControlToValidate="TextBox4" MaximumValue="2050/1/1" MinimumValue="1900/1/1" Type="Date">
            </asp:RangeValidator>
        </div>
        <div>
            <asp:Label ID="Label2" runat="server" Text="電子郵件："></asp:Label> 
            <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="請輸入正確的郵件格式" ControlToValidate="TextBox4" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
            </asp:RegularExpressionValidator>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="註冊" />
        </div>
        <div>
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="True" />
        </div>
    </form>
</body>
...

效果如圖所示，點擊註冊按鈕後，先顯示上圖的彈窗彙總，然後再顯示下圖的列表彙總

ASP.NET驗證控件合集含代碼演示

文章目錄

1. 窗體驗證概述

2. ASP.NET中的數據驗證控件

2.1. 空值驗證 RequiredFieldValidator控件

2.2. 一致性驗證 CompareValidator控件

2.3. 範圍驗證 RangeValidator控件

2.4. 正則驗證 RegularExpressionValidator控件

2.5. 用戶定義驗證 CustomValidator控件

2.6. 驗證錯誤彙總 ValidationSummany控件

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

ASP.NET驗證控件合集含代碼演示

軟件工程導論—軟件與軟件工程

SQL 單表查詢

Servlet—HttpServletRequest與HttpServletResponse對象常用方法

Windows定時任務每隔一段時間(最小到秒級)執行一次指定的Python腳本

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

ASP.NET驗證控件合集 含代碼演示

文章目錄

1. 窗體驗證概述

2. ASP.NET中的數據驗證控件

2.1. 空值驗證 RequiredFieldValidator控件

2.2. 一致性驗證 CompareValidator控件

2.3. 範圍驗證 RangeValidator控件

2.4. 正則驗證 RegularExpressionValidator控件

2.5. 用戶定義驗證 CustomValidator控件

2.6. 驗證錯誤彙總 ValidationSummany控件

ASP.NET驗證控件合集含代碼演示