文章教程

8.2基础验证控件

8/31/2020 9:19:23 PM 人评论 次浏览

8.2 基础验证控件

ASP.NET中提供了6种服务器端的数据验证控件,其中包括5种基础验证控件和1种汇总控件。下面分别介绍这5种基础验证控件,包括必填验证控件、比较验证控件、范围验证控件、正则表达式验证控件以及自定义验证控件。

8.2.1 必填验证控件

在ASP.NET中,RequiredFieldValidator控件表示必填验证控件。必填验证控件用于确保用户不会跳过某一项输入。因此,可以将必填验证控件称为非空验证控件。例如,用户在登录页面进行登录时,必须输入用户名和密码,这时可以使用RequiredFieldValidator控件验证它们必须填写。

注意

无论是RequiredFieldValidator控件还是下面介绍的其他控件,它们都需要与另一个控件配合使用,不能单独使用。首先将要验证的控件添加到网页中,然后再添加验证控件,这样就可以轻松地将后者与前者关联。

简单来说,RequiredFieldValidator控件就是检查是否有输入值,语法如下。

    <ASP:RequiredFieldValidator id="Validator_Name" Runat="Server" ControlTo Validate="要检查的控件名"  ErrorMessage="出错信息"  Display="Static|Dymatic|None">
        占位符
    </ASP: RequiredFieldValidator>

在上述语法中,“占位符”表示Display属性的值为Static时,错误信息占有“占位符”那么大的页面空间。另外,从上述代码可以看出,RequiredFieldValidator控件与其他控件一样,也可以为其指定属性。除了上述属性外,它还可以包含其他属性,如表8-1所示。

表8-1 RequiredFieldValidator控件的常用属性

【范例1】

设计登录页面,该页面包含【用户名】输入框和【密码】输入框,通过Required FieldValidator控件指定输入框的内容必须填写。页面代码如下。

    <table width="100%" height="180" align="center">
        <tr>
          <td align="right" class="auto-style1">用户名:</td>
          <td><asp:TextBox ID="txtUserName" runat="server" CssClass="frame1">
          </asp:TextBox></td>
          <td><asp:RequiredFieldValidator ID="rfvUserName" runat="server" ControlToValidate="txtUserName">用户名不能为空</asp:RequiredField Validator> </td>
        </tr>
        <tr>
          <td align="right" class="auto-style1">密码:</td>
          <td><asp:TextBox ID="txtUserPass" runat="server" TextMode="Password" CssClass="frame1"></asp:TextBox></td>
          <td><asp:RequiredFieldValidator ID="rfvUserPass" runat="server" ControlToValidate="txtUserPass">密码不能为空</asp:RequiredField Validator> </td>
        </tr>
        <tr>
          <td class="auto-style1"></td>
          <td><asp:Button ID="btnLogin" runat="server" CssClass="login1"/></td>
        </tr>
    </table>

在上述代码中,通过RequiredFieldValidator控件分别验证【用户名】输入框和【密码】输入框的内容必须填写。

运行上述代码查看效果,如图8-1所示。

图8-1 登录页面

除了通过“占位符”的方式设置提示内容,还可以通过Text属性和ErrorMessage属性进行设置。如果“占位符”和Text属性同时设置,那么先显示“占位符”指定的内容。ErrorMessage属性的值表示验证失败时ValidationSummary控件中显示的错误文本。如果ErrorMessage属性和Text属性同时存在,则单击按钮时会显示Text属性的值;如果没有设置Text属性,而设置ErrorMessage属性,则单击按钮时会显示ErrorMessage属性的值。

【范例2】

更改范例1中RequiredFieldValidator控件的内容,为第一个必填验证控件指定Text属性,为第二个必填验证控件指定ErrorMessage属性和Text属性。相关代码如下。

    <asp:RequiredFieldValidator  ID="rfvUserName"  runat="server"  Control ToValidate="txtUserName"   ErrorMessage="  必  填  "></asp:RequiredField Validator>
    <asp:RequiredFieldValidator ID="rfvUserPass" runat="server" ControlTo Validate="txtUserPass"  ErrorMessage=" 必 填 "  Text=" 必 须 填 写 "></asp:    RequiredFieldValidator>

重新运行页面,单击页面中的【登录】按钮进行测试,如图8-2所示。

图8-2 指定Text属性和ErrorMessage属性

8.2.2 比较验证控件

在ASP.NET中,CompareValidator表示比较验证控件。比较验证控件可以将用户输入的一个常数值与另一个控件或者特定数据类型的值进行比较,比较时需要使用小于、等于或者大于等比较运算符。

CompareValidator控件包含多个属性,它的大多数属性都与RequiredFieldValidator控件一样,如ControlToValidate属性、Text属性、ErrorMessage属性和Display属性等。除了这些属性外,CompareValidator控件还包含一些特有属性,如表8-2所示。

表8-2 CompareValidator控件的特有属性

在表8-2中,Operator属性的值是枚举类型ValidationCompareOperator的值之一,该枚举类型的值有7个,它们分别是Equal(默认值,等值比较)、DataTypeCheck(只对数据类型进行比较)、GreaterThan(大于比较)、GreaterThanEqual(大于或等于比较)、LessThan(小于比较)、LessThanEqual(小于或等于比较)和NotEqual(不等于比较)。

注意

如果在ControlToCompare属性中指定控件,CompareValidator控件会将用户输入的内容与指定的控件进行比较。如果ControlToCompare和ValueToCompare属性同时指定了值,则ControlToCompare的优先级比较高。

1.控件值与控件值比较

用户在网站进行注册时,需要输入注册成功后的登录密码,为了安全,通常会要求用户重新确认密码。可以通过CompareValidator控件比较用户输入的值,将确认密码输入框的值与密码输入框的值进行比较,下面通过范例说明。

【范例3】

设计用户注册页面,该页面包含【用户名】输入框、【密码】和【确认密码】输入框以及【您的邮箱】输入框。通过RequiredFieldValidator控件指定所有输入框的内容必填,CompareValidator控件比较【密码】输入框和【确认密码】输入框的值。主要代码如下。

    <table width="100%" height="300">
        <tr>
          <td align="right" width="20%">用户名:</td>
          <td><asp:TextBox ID="txtUserName" runat="server" CssClass="frame-gray1"></asp:TextBox><asp:RequiredFieldValidator ID="rfvUserName" runat="server" ControlToValidate="txtUserName" Text="用户名必填">
          </asp:RequiredFieldValidator></td>
        </tr>
        <tr>
          <td align="right">密码:</td>
          <td><asp:TextBox ID="txtUserPass" runat="server" TextMode="Password" CssClass="frame-gray1"></asp:TextBox><asp:Required FieldValidator ID="rfvPass" runat="server" ControlToValidate="txtUserPass" Text="密码必填"></asp:RequiredFieldValidator></td>
        </tr>
        <tr>
          <td align="right">确认密码:</td>
          <td><asp:TextBox ID="txtUserPassAgain" runat="server" TextMode="Password" CssClass="frame-gray1"></asp:TextBox><asp:RequiredField Validator ID="rfvPassAgain" runat="server" ControlToValidate="txtUserPassAgain" Text="确认密码必填"></asp:RequiredFieldValidator>
          <asp:CompareValidator ID="cvPassAgain" runat="server" ControlTo Validate ="txtUserPassAgain" ControlToCompare="txtUserPass" Text="两次密码不一致"></asp:CompareValidator></td>
        </tr>
        <tr>
          <td align="right">您的邮箱:</td>
          <td><asp:TextBox ID="txtUserMail" runat="server" TextMode="Email" CssClass="frame-gray1"></asp:TextBox><asp:RequiredFieldValidator ID="rvfEmail" runat="server" ControlToValidate="txtUserMail" Text="邮箱必填"></asp:RequiredFieldValidator></td>
      </tr>
      <tr>
          <td></td>
          <td><asp:CheckBox ID="cbTrue"runat="server"/>我已阅读 <a href="#"
          target="_blank">用户注册协议</a></td>
      </tr>
      <tr>
          <td colspan="2" align="left"><p class="checkboxP"><asp:Button ID="btnRegister" runat="server" CssClass="register" BorderStyle="None" /></p></td>
      </tr>
    </table>

在上述代码中,分别在【用户名】、【密码】、【确认密码】和【您的邮箱】输入框之后添加RequiredFieldValidator控件,指定这些内容必须填写。同时还为【确认密码】输入框指定CompareValidator控件,设置该控件ControlToCompare属性的值为txtUserPass,它是【密码】输入框的ID属性值。

运行上述代码直接单击按钮进行测试,如图8-3所示。在【密码】输入框和【确认密码】输入框中输入内容,如图8-4所示。

图8-3 注册页面

图8-4 判断密码

从图8-4中可以看出,在【密码】框和【确认密码】框中输入内容后单击按钮时,提示“两次密码不一致”。但是,为什么在提示左侧会有空白呢?这是验证同时为确认密码框添加必填验证和比较验证,虽然必填验证已经通过,但是,此控件的Display属性的值为Static,因此,它还占据着一定的空间。如果不想显示多余的空白,可以将该控件Display属性的值设置为Dynamic。代码如下。

    <asp:RequiredFieldValidator  ID="rfvPassAgain"  runat="server"  Control ToValidate="txtUserPassAgain"  Display="Dynamic"  Text="确认密码必填">
    </asp:RequiredFieldValidator>

重新运行页面查看效果,如图8-5所示。

图8-5 Display属性的值为Dynamic

2.控件值与指定值比较

开发者还可以将控件的值与指定的常用值进行比较,如范例4所示。

【范例4】

大家经常会玩猜数字游戏,一方出数字,另一方猜。如果猜错,就一直让对方猜,直到猜对为止。在页面中添加一个TextBox控件,然后分别添加RequiredFieldValidator控件和CompareValidator控件,最后添加Button控件和Label控件。代码如下。

    输入一个10以内的数字:<asp:TextBox  ID="txtNumber"  runat="server">
    </asp:TextBox>
    <asp:RequiredFieldValidator ID="rvfNumber" runat="server" Text="请输入数字" Display="Dynamic" ControlToValidate="txtNumber"></asp:RequiredField Validator>
    <asp:CompareValidator ID="cvNumber" runat="server" Text="您猜的数字错误" Display="Dynamic" ControlToValidate="txtNumber"></asp:CompareValidator>
    <asp:Button  ID="btnNumber"  runat="server"  Text=" 测 试 "  OnClick="btnNumber_Click" /><br /><br />
    <asp:Label ID="lblResult" runat="server"></asp:Label>

在上述代码中,RequiredFieldValidator控件验证TextBox控件的值不能为空,CompareValidator控件将用户输入的值与指定的随机数值进行比较,Button控件执行操作,Label控件显示执行正确时的结果。

在后台中为页面的Load事件添加代码,首次加载时获取10以内的随机数字,并将其指定为CompareValidator控件的ValueToCompare属性值。代码如下。

    protected void Page_Load(object sender, EventArgs e) {
        if (! IsPostBack) {
          Random dom = new Random();
          int number = dom.Next(10);
          cvNumber.ValueToCompare = number.ToString();
        }
    }

在后台为Button控件添加Click事件,代码如下。

    protected void btnNumber_Click(object sender, EventArgs e) {
        if (IsValid) {
          lblResult.Text = "恭喜您,这个数字猜对了呢";
        }
    }

运行页面输入数字进行测试,如图8-6和图8-7所示分别为测试失败和成功时的效果。

图8-6 测试失败

图8-7 测试成功

8.2.3 范围验证控件

在ASP.NET中,RangeValidator表示范围验证控件。范围验证控件用于验证输入控件的值是否在指定的范围内。如某些公司在招聘员工时,会要求员工年龄在20~35岁之间,这就可以通过RangeValidator控件实现。

RangeValidator控件的大多数属性与RequiredFieldValidator控件类似,如ControlToValidate、Display和Text等。下面列出了RangeValidator专用的三个常用属性。

(1)MinimumValue属性:获取或设置验证范围的最小值。

(2)MaximumValue属性:获取或设置验证范围的最大值。

(3)Type属性:获取或设置在比较之间将所比较的值转换到的数据类型。Type属性的值是枚举类型ValidationDateType的值之一,其值说明如下。

①String:默认值,字符串数据类型,它的值被看作是System.String。

②Date:日期数据类型,只允许使用数字日期,不能指定时间部分。

③Integer:32位符号整数数据类型,它的值被看作是System.Int32。

④Double:双精度浮点数数据类型,它的值被看作是System.Double。

⑤Currency:货币数据类型,它的值被看作是System.Decimal。

【范例5】

在页面中添加【请输入年龄】输入框和【测试】按钮,指定用户年龄必须输入,并且它的值在15~40岁之间。通过RequiredFieldValidator控件指定必填,RangeValidator控件指定年龄的范围和类型。代码如下。

    请输入年龄:<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator   ID="rfvAge"   runat="server"   ControlTo Validate="txtAge"   Text="  必  须  输  入  "   Display="Dynamic"></asp:RequiredFieldValidator>
    <asp:RangeValidator   ID="rvAge"   runat="server"   ControlToValidate="txtAge"  Type="Integer"  MaximumValue="40"  MinimumValue="15"  Display="Dynamic" Text="年龄必须在15岁到40岁之间"></asp:RangeValidator>
    <asp:Button ID="btnAge" runat="server" Text="测试" />

8.2.4 正则表达式验证控件

在ASP.NET中,RegularExpressionValidator表示正则表达式验证控件。正则表达式控件用于验证指定用户输入的内容是否与某个正则表达式所定义的模式相匹配。这类验证允许用户检查可预知的字符序列,例如身份证号、电子邮件地址、电话号码和邮政编码中的字符序列等。

RegularExpressionValidator控件的大多数属性与RequiredFieldValidator相似,但是它还特有一个ValidationExpression属性。ValidationExpression属性用于获取或设置确定字段验证模式的正则表达式。

开发者在设置ValidationExpression属性时,可以使用提供的一些正则表达式。选择RegularExpressionValidator控件右击,选择【属性】命令打开【属性】窗格,在【属性】窗格中打开ValidationExpression属性,单击该属性后面的按钮,弹出如图8-8所示的【正则表达式编辑器】对话框。

图8-8 【正则表达式编辑器】对话框

在如图8-8所示对话框中,选择正则表达式后单击【确定】按钮即可。如果想自定义,可以选择图中的(Custom)选项,然后在【验证表达式】输入框中输入内容,再单击【确定】按钮即可。如下代码为一些常用的正则表达式。

    ^[0-9]*$                        //验证数字
    ^\d{n}$                         //验证n位的数字
    ^[A-Za-z]+$                     //验证由26个英文字母组成的字符串
    ^[\u4e00-\u9fa5A-Za-z0-9-_]*$//验证用户名或昵称只能是英文、数字、下划线和减号
    ^[A-Za-z0-9]+$                  //验证由数字和26个英文字母组成的字符串
    ^[\u4e00-\u9fa5], {0, }$        //验证汉字
    ^(0? [1-9]|1[0-2])$      //验证一年的12个月:正确格式为:“01”-“09”和“1”“12”
    ^((0? [1-9])|((1|2)[0-9])|30|31)$
                                //验证一个月的31天:正确格式为:01、09和1、31
    (86)*0*13\d{9}                          //中国手机号码
    (\(\d{3,4}\)|\d{3,4}-|\s)? \d{8}        //中国固定手机号码
    (\(\d{3,4}\)|\d{3,4}-|\s)? \d{7,14}     //中国电话号码(包括移动和固定电话)

无论是ValidationExpression属性提供的正则表达式,还是自定义的正则表达式,不同的字符代表不同的含义,常用的字符说明如下所示。

(1).:匹配除\n之外的任意单个字符。

(2)^:匹配输入的开始位置。

(3)$:匹配输入的结尾。

(4)*:匹配前面的子表达式零次或多次(大于等于0次),等价于{0,}。

(5)+:匹配前一个字符一次或多次。例如,“zo+”可以匹配“zoo”,但不匹配“z”。

(6)?:匹配前一个字符零次或一次。例如,“a? ve? ”可以匹配“never”中的“ve”。

(7)[A-Z]:表示任意大写字母。

(8)\d:表示任意一个数字。

(9)\w:匹配包括下划线的任意单词字符,等价于[A-Za-z0-9_]。

【范例6】

在页面中添加不同的输入框和RegularExpressionValidator控件,这些控件分别验证身份证号、固定电话、某年中的月份。代码如下。

    <div>
        请输入身份证号:<asp:TextBox ID="txtCardNo" runat="server"></asp:TextBox>
        <asp:RegularExpressionValidator ID="revCardNo" runat="server" Control ToValidate="txtCardNo" Display="Dynamic" Text="输入的身份证号有误" ValidationExpression="\d{17}[\d|X]|\d{15}">输入的身份证号有误</asp:Regular ExpressionValidator>
    </div>
    <div>
        请输入固定电话:<asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
        <asp:RegularExpressionValidator ID="revPhone" runat="server" Control ToValidate="txtPhone" Display="Dynamic" Text="输入的电话号码有误,格式为XXX-XXXXXXXX或者XXXX-XXXXXXXX" ValidationExpression="(\(\d{3,4}\)|\d{3,4}-|\s)? \d{8}"></asp:RegularExpressionValidator>
    </div>
    <div>
        请输入某年月份:<asp:TextBox ID="txtMonth" runat="server"></asp:Text Box>
        <asp:RegularExpressionValidator ID="revMonth" runat="server" ControlTo Validate="txtMonth" Display="Dynamic" ValidationExpression="^(0?[1-9]|1[0-2])$" Text="月份有错误,格式为:01"></asp:RegularExpression Validator>
    </div>
    <div style="margin-top: 20px"><asp:Button ID="btnTest" runat="server" Text=" 测 试 " /></div>

运行页面输入内容后单击按钮进行测试,如图8-9所示。

图8-9 正则表达式验证控件

8.2.5 自定义验证控件

如果开发者不想使用上述介绍的验证控件,那么还可以使用自定义验证控件。在ASP.NET中,CustomValidator表示自定义验证控件。自定义验证控件使开发者使用自己编写的验证逻辑检查用户的输入。

CustomValidator控件的多数常用属性可以参考RequiredFieldValidator控件,其常用的特有属性如表8-3所示。

表8-3 CustomValidator控制的特有属性

1.自定义客户端验证

CustomValidator控件既支持客户端脚本验证,又支持服务器端验证。在实现客户端验证时,需要在网页中定义脚本函数。函数原型如下:

    function ValidationFunctionName(source, arguments)

其中,ValidationFunctionName表示函数的名称,需要向函数中传入两个参数,source是对CustomValidator控件呈现的元素的引用,arguments是一个具有Value属性和IsValid属性的对象,该参数可以获取控件的值。

定义脚本函数完毕后,还需要设置CustomValidator控件的ClientValidationFunction属性,它指定客户端验证的脚本函数。

【范例7】

分别向两个输入框中输入数字,然后计算这两个数字之间所有数字的和,必须保证用户输入的第二个数字大于第一个数字。例如,如果输入第一个数字1,输入第二个数字5,那么将计算1+2+3+4+5的结果。步骤如下。

(1)创建Result.aspx页面,在页面的表单元素中添加四行两列的表格。其中,第一行表示输入的起始数字。代码如下。

    <asp:TextBox   ID="txtFirst"   runat="server"   CssClass="frame-gray1">
    </asp:TextBox>

(2)第二行表示输入的结尾数字,该数字必须比起始数字大。在TextBox控件后添加CustomValidator控件。代码如下。

    <asp:TextBox  ID="txtSecond"  runat="server"  CssClass="frame-gray1">
    </asp:TextBox>
    <asp:CustomValidator  ID="cvTest"  runat="server"  ControlToValidate="txtSecond"  Text=" 必 须 比 第 一 个 数 字 大 "  ClientValidationFunction="NumberTest"></asp:CustomValidator>

(3)添加执行操作的Button控件和显示结果的Label控件,并为Button控件添加Click事件。代码如下。

    <asp:Button  ID="btnResult"  runat="server"  Text=" 计 算 结 果 "  OnClick="btnResult_Click" />
    <asp:Label ID="lblMessage" runat="server"></asp:Label>

(4)创建名称为NumberTest的脚本函数,在该函数中获取起始数字和结尾数字,通过isNaN()函数判断输入的内容是否为数字。如果不是弹出提示,否则判断结尾数字是否小于等于起始数字,如果是则IsValid属性的值设置为false,否则为true。代码如下。

    function NumberTest(obj, args) {
        var first = document.getElementById("txtFirst").value;
        var second = document.getElementById("txtSecond").value;
        if (isNaN(first) || isNaN(second))   //如果不为数字
          alert("文本框内必须是数字。如1、2、3、4");
        else {
          if (second <= first) {
              args.IsValid = false;
          } else {
              args.IsValid = true;
          }
        }
    }

(5)为页面中的Button控件添加Click事件代码,在事件代码中判断IsValid属性的值是否通过验证,如果通过验证则通过for语句计算结果,并将结果显示到页面。代码如下。

    protected void btnResult_Click(object sender, EventArgs e) {
        if (IsValid) {     //如果通过验证
          int result = 0;
          for (int i = Convert.ToInt32(txtFirst.Text); i <= Convert.ToInt
          32(txtSecond.Text); i++) {
              result += i;
          }
          lblMessage.Text = "从" + txtFirst.Text + "到" + txtSecond.Text + "相加的数字和是:" + result;
        }
    }

(6)运行页面输入内容后进行测试,如图8-10所示为结尾数字小于起始数字时的效果,图8-11为计算后的结果。

图8-10 结尾数字小于起始数字

图8-11 将数字循环相加后的结果

2.自定义服务器端验证

通过CustomValidator控件实现服务器端验证时,需要在该控件的ServerValidate事件中添加代码。ServerValidate事件的原型如下。

    protected  void  CustomValidator1_ServerValidate(object  source,  Server ValidateEventArgs args) {
        //代码
    }

其中,source是对引发ServerValidate事件的自定义验证控件的引用;args是ServerValidateEventArgs对象,通过该对象的Value属性获取用户输入的内容,如果该内容有效,则args.IsValid的值为true,否则为false。

【范例8】

更改范例7的代码,为CustomValidator控件添加ServerValidate事件实现服务器端验证。首先删除CustomValidator控件的ClientValidationFunction属性和NumberTest()函数,为其添加ServerValidate事件。页面代码如下。

    <asp:CustomValidator  ID="cvTest"  runat="server"  ControlToValidate="txtSecond" Text="必须比第一个数字大" OnServerValidate="cvTest_Server Validate"></asp:CustomValidator>

然后在后台页面添加CustomValidator控件的ServerValidate事件,代码如下。

    protected  void  cvTest_ServerValidate(object  source,  ServerValidateEventArgs args) {
        int num1 = 0, num2 = 1;
        bool ret = true;
        try {
          num1 = Convert.ToInt32(txtFirst.Text);
          num2 = Convert.ToInt32(txtSecond.Text);
        } catch (Exception ex) {
          args.IsValid = false;
          ret = false;
          lblMessage.Text = "出现错误,原因是:" + ex.Message;
        }
        if (ret) {
          if (num2 <= num1) {
              args.IsValid = false;
          } else {
              args.IsValid = true;
          }
        }
    }

运行页面输入内容进行测试,效果图不再显示。

教程类别