asp.net夜话之九:验证控件---(下)


RegularExpressionValidator控件

  RegularExpressionValidator控件就是利用正则表达式来验证其它控件的值的控件。除了具有BaseValidator所有的属性之外,它还具有一个常见属性:ValidationExpression。这个属性就是用来设置用于匹配所要验证控件的值的正则表达式。

  RegularExpressionValidator控件提供了一个正则表达式编辑器,内置了一些常见的正则表达式,当我们在属性窗口设置RegularExpressionValidator控件时会看到如下效果:

  点击ValidationExpression一栏右边的省略号会出现如下界面:

  如果时一些常用的正则验证,可以使用使用提供标准表达式。

  下面是RegularExpressionValidator控件用法的例子:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="RegularExpressionValidatorDemo.aspx.cs"Inherits="RegularExpressionValidatorDemo"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
  <title>RegularExpressionValidator控件的例子</title>
</head>
<body>
  <formid="form1"runat="server">
  <div>
  <tableborder="1"width="600">
  <tr><tdcolspan="2"align="center">
    周公婚恋交友网</td></tr>
  <tr><td>
    真实姓名</td><td>
    <asp:TextBoxID="txtUserName"runat="server"></asp:TextBox>
    <asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="txtUserName"
      ErrorMessage="姓名必须填写"Display="Dynamic"></asp:RequiredFieldValidator>
      <asp:RegularExpressionValidatorID="RegularExpressionValidator1"runat="server"ErrorMessage="姓名是2到4个汉字"ControlToValidate="txtUserName"Display="Dynamic"ValidationExpression="[u4e00-u9fa5]{2,4}"></asp:RegularExpressionValidator></td></tr>
    <tr><td>
    手机号</td><td>
    <asp:TextBoxID="txtMobile"runat="server"></asp:TextBox>
    <asp:RequiredFieldValidatorID="RequiredFieldValidator2"runat="server"ControlToValidate="txtMobile"
      ErrorMessage="姓名必须填写"Display="Dynamic"></asp:RequiredFieldValidator>
      <asp:RegularExpressionValidatorID="RegularExpressionValidator2"runat="server"ControlToValidate="txtMobile"
        ErrorMessage="不正确的手机号"ValidationExpression="((13[0-9])|(15[89]))d{8}"></asp:RegularExpressionValidator></td></tr>
    <tr><td>
    <asp:ButtonID="Button2"runat="server"Text="提交"/>
  </td><td>
    <inputid="Reset3"type="reset"value="重置"/></td></tr>
  </table>
  </div>
  </form>
</body>
</html>

  在例子中要求真实姓名必须是2到4个汉字,手机号必须是13开头或者是158、159开头的并且总长度是11位数字。以下是运行效果:

  CustomValidator控件

  CustomValidator控件也成为自定义验证控件,通过RequiredFieldValidator控件结合CompareValidator控件、RangeValidator控件或RegularExpressionValidator控件之中的一个或多个就能满足asp.net开发中的90%以上的验证要求,但是有一些特殊的验证用上述控件组合无法达到验证要求,比如要求用户填写一个奇数。为了满足一些特殊的验证要求,在asp.net中还有一个CustomValidator控件,在这个控件中可以自己写验证规则。

  CustomValidator类是BaseValidator抽象类,所以CustomValidator控件拥有BaseValidator中定义的属性,除此之外,CustomValidator控件还有以下常见属性:

属性名 说明
ClientValidationFunction 用于在客户端执行验证的客户端函数名
ValidateEmptyText 是否验证空文本,即当所验证控件值为空时时候执行客户端验证

  CustomValidator控件用于在客户端验证的函数有两个参数,第一个是表示被验证的控件,第二个表示事件数据。第二个参数有两个属性:IsValid用于表示被验证控件是否通过验证,Value属性表示被验证的控件的值。下面就是一个客户端验证函数的例子:

<scriptlanguage="javascript"type="text/javascript">
    //obj表示被验证的控件
    //args表示事件数据,args有两个属性
    //IsValid指示控件是否通过验证
    //Value表示被验证的控件的值
    functionCheckEven(obj,args)
    {
      varnumberPattern=/d+/;
      //由于控件的ValidateEmptyText设置为true
      //所以当控件没有值时进行客户端验证
      if(!numberPattern.test(args.Value))//用javascript进行客户端正则验证
      {
        args.IsValid=false;//表示未通过验证,出现错误提示
      }
      elseif(args.Value%2==0)
      {
        args.IsValid=true;//表示通过验证,不出现错误提示
      }
      else
      {
        args.IsValid=false;//表示未通过验证,出现错误提示
      }
    }
</script>

  除了客户端验证之外,在CustomValidator控件中还能自己写服务器端写验证方法,它有一个OnServerValidate事件,同它的客户端处理函数一样,处理这个事件的委托也需要两个参数,第一个是表示被验证的控件,第二个表示事件数据。第二个参数有两个属性:IsValid用于表示被验证控件是否通过验证,Value属性表示被验证的控件的值。它服务器端验证方法设置界面如下:

  下面我们用一个例子来说明CustomValidator控件的用法,在这里例子里用户被要求输入两个数,一个必须是2的倍数,一个必须是3的倍数。用CustomValidator控件就能很轻松完成这个功能。

  下面是前台代码:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="CustomValidatorDemo.aspx.cs"Inherits="CustomValidatorDemo"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
  <title>CustomValidator验证控件用法的例子</title>
  <scriptlanguage="javascript"type="text/javascript">
    //obj表示被验证的控件
    //args表示事件数据,args有两个属性
    //IsValid指示控件是否通过验证
    //Value表示被验证的控件的值
    functionCheckEven(obj,args)
    {
      varnumberPattern=/d+/;
      //由于控件的ValidateEmptyText设置为true
      //所以当控件没有值时进行客户端验证
      if(!numberPattern.test(args.Value))
      {
        args.IsValid=false;//表示未通过验证,出现错误提示
      }
      elseif(args.Value%2==0)
      {
        args.IsValid=true;//表示通过验证,不出现错误提示
      }
      else
      {
        args.IsValid=false;//表示未通过验证,出现错误提示
      }
    }
    functionCheckMultiple3(obj,args)
    {
      //由于控件的ValidateEmptyText没有设置,使用了默认值false
      //所以当控件没有值时不进行客户端验证
      varnumberPattern=/d+/;
      if((!numberPattern.test(args.Value))||(args.Value%3!=0))
      {
        args.IsValid=false;
      }
      else
      {
        args.IsValid=true;
      }
    }
  </script>
</head>
<body>
  <formid="form1"runat="server">
  <div>
  <tableborder="1"width="600">
  <tr><tdcolspan="2"align="center">CustomValidator验证控件用法的例子</td></tr>
  <tr><td>
    填一个3的倍数</td><td>
    <asp:TextBoxID="txtOdd"runat="server"></asp:TextBox>
    <asp:CustomValidatorID="CustomValidator2"runat="server"ControlToValidate="txtOdd"
      ErrorMessage="请输入3的倍数"ClientValidationFunction="CheckMultiple3"Display="Dynamic"OnServerValidate="CustomValidator2_ServerValidate"></asp:CustomValidator></td></tr>
  <tr><td>
    填一个偶数</td><td>
    <asp:TextBoxID="txtEven"runat="server"></asp:TextBox>
      <asp:CustomValidatorID="CustomValidator1"runat="server"ControlToValidate="txtEven"
        ErrorMessage="请输入偶数"ClientValidationFunction="CheckEven"ValidateEmptyText="True"OnServerValidate="CustomValidator1_ServerValidate"></asp:CustomValidator></td></tr>
    <tr><td>
    <asp:ButtonID="Button2"runat="server"Text="提交"/>
  </td><td>
    <inputid="Reset3"type="reset"value="重置"/></td></tr>
  </table>
  </div>
  </form>
</body>
</html>

  此外,还编写了服务器端验证方法,下面是后台代码:

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclassCustomValidatorDemo:System.Web.UI.Page
{
  protectedvoidPage_Load(objectsender,EventArgse)
  {
  }
  //用于验证控件值是否为3的倍数
  protectedvoidCustomValidator1_ServerValidate(objectsource,ServerValidateEventArgsargs)
  {
    System.Text.RegularExpressions.Regexregex=newSystem.Text.RegularExpressions.Regex("d+");
    //先用正则判断用户输入的是否能转换成数字
    if(!regex.IsMatch(args.Value))
    {
      args.IsValid=false;//表示验证不通过
    }
    else
    {
      //如果对3取模为0就是3的倍数
      args.IsValid=(int.Parse(args.Value)%3==0);
    }
  }
  //用于验证控件值是否为偶数
  protectedvoidCustomValidator2_ServerValidate(objectsource,ServerValidateEventArgsargs)
  {
    System.Text.RegularExpressions.Regexregex=newSystem.Text.RegularExpressions.Regex("d+");
    //先用正则判断用户输入的是否能转换成数字
    if(regex.IsMatch(args.Value))
    {
      args.IsValid=false;
    }
    else
    {
      //如果对3取模为0就是3的倍数
      args.IsValid=(int.Parse(args.Value)%2==0);
    }
  }
}

  以下是什么也不填写时的验证效果:

  在上图中,由于验证奇偶性的CustomValidator验证控件设置了ValidateEmptyText属性为true,所以即使所验证的控件是空值时也会执行客户端验证。从这个例子中可以看出CustomValidator验证控件可以不需要RequiredFieldValidator控件就能实现必填验证,只要将它的ValidateEmptyText属性设为true即可。

  ValidationSummary控件

  ValidationSummary控件是用于显示验证所有验证错误摘要的控件,当我们将验证控件的Display属性设置None的时候,验证错误信息就在这里显示。

  ValidationSummary控件有三个常见属性:

属性名 说明
DisplayMode 指定显示模式,有BulletList、List、SingleParagraph三种模式
ShowMessageBox 是否以客户端提示框的信息显示验证错误信息摘要
ShowSummary 是否在网页中采用内联方式显示错误摘要

  下面是一个ValidationSummary控件的例子(在使用ValidationSummary控件的时候一定要将验证控件的Display属性设为None):

<%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
  <title>ValidationSummary控件的例子</title>
</head>
<body>
  <formid="form1"runat="server">
  <div>
  <tableborder="1"width="600">
  <tr><tdcolspan="2"align="center">旅游活动申请表</td></tr>
  <tr><td>
    开始时间</td><td>
    <asp:TextBoxID="txtStartDate"runat="server"></asp:TextBox>
    <asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="txtStartDate"
      ErrorMessage="用户名必须填写"Display="None"></asp:RequiredFieldValidator>
      <asp:CompareValidatorID="CompareValidator1"runat="server"ErrorMessage="开始日期必须早于结束日期"ControlToCompare="txtStartDate"ControlToValidate="txtEndDate"Operator="GreaterThanEqual"Type="Date"Display="None"></asp:CompareValidator></td></tr>
  <tr><td>
    结束时间</td><td>
    <asp:TextBoxID="txtEndDate"runat="server"></asp:TextBox>
    <asp:RequiredFieldValidatorID="RequiredFieldValidator2"runat="server"ControlToValidate="txtEndDate"
      ErrorMessage="请填写结束时间"Display="None"></asp:RequiredFieldValidator>
      </td></tr>
  <tr><td>
   参加人数</td><td>
    <asp:TextBoxID="txtNumber"runat="server"></asp:TextBox>
     <asp:RequiredFieldValidatorID="RequiredFieldValidator3"runat="server"ControlToValidate="txtNumber"
       ErrorMessage="必须填写人数"Display="None"></asp:RequiredFieldValidator>
     <asp:CompareValidatorID="CompareValidator2"runat="server"ControlToValidate="txtNumber"
       ErrorMessage="人数必须大于0"Operator="GreaterThan"Type="Integer"ValueToCompare="0"Display="None"></asp:CompareValidator></td></tr>
    <tr><td>
      经费预算</td><td>
      <asp:TextBoxID="txtMoney"runat="server"></asp:TextBox>
        <asp:CompareValidatorID="CompareValidator3"runat="server"ControlToValidate="txtMoney"
          ErrorMessage="经费必须是大于0的数字"Type="Currency"ValueToCompare="0"Display="None"Operator="GreaterThan"></asp:CompareValidator></td></tr>
    <tr><td>
    <asp:ButtonID="Button2"runat="server"Text="提交"/>
  </td><td>
    <inputid="Reset3"type="reset"value="重置"/></td></tr>
  </table>
  </div>
    <asp:ValidationSummaryID="ValidationSummary1"runat="server"DisplayMode="SingleParagraph"
      ShowSummary="False"/>
  </form>
</body>
</html>

  在上面的例子中ValidationSummary控件的ShowMessageBox属性采用了默认值false,并且ShowSummary采用了默认属性true,以下是什么也不填写时提交表单的效果:

  如果我们将上面的例子中的ValidationSummary控件的ShowMessageBox属性设为true并且ShowSummary属性设置为false,提交空表单时会得到如下效果:

  分组校验技术

  分组验证技术有助于我们分成组进行验证,默认情况下我们没有设置验证控件的ValidationGroup属性,那么这些没有设置ValidationGroup属性的将会算做一个默认分组进行验证。我们看下面的一个例子:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Register.aspx.cs"Inherits="Register"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
  <title>无标题页</title>
</head>
<body>
  <formid="form1"runat="server">
  <div>
  <tableborder="1"width="600">
  <tr><tdcolspan="2"align="center">
    用户注册</td></tr>
  <tr><td>
    用户名</td><td>
    <asp:TextBoxID="txtUserName"runat="server"></asp:TextBox>
    <asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="txtUserName"
      ErrorMessage="用户名必须填写"Display="Dynamic"></asp:RequiredFieldValidator>
      </td></tr>
  <tr><td>
    密码</td><td>
    <asp:TextBoxID="txtPassword"runat="server"></asp:TextBox>
    <asp:RequiredFieldValidatorID="RequiredFieldValidator2"runat="server"ControlToValidate="txtPassword"
      ErrorMessage="必须填写密码"Display="Dynamic"></asp:RequiredFieldValidator>
      </td></tr>
  <tr><td>
    用户头像</td><td>
    <asp:TextBoxID="txtHeadImage"runat="server"onfocus="blur();"></asp:TextBox>
     <asp:RequiredFieldValidatorID="RequiredFieldValidator3"runat="server"ControlToValidate="txtHeadImage"
       ErrorMessage="必须上传头像"Display="Dynamic"></asp:RequiredFieldValidator>
      <asp:FileUploadID="FileUpload1"runat="server"/>
      <asp:ButtonID="btnUpload"runat="server"Text="上传"/>
      <asp:RequiredFieldValidatorID="RequiredFieldValidator4"runat="server"ControlToValidate="FileUpload1"
        Display="Dynamic"ErrorMessage="必须选择文件"></asp:RequiredFieldValidator>
     </td></tr>
    <tr><td>
    <asp:ButtonID="Button2"runat="server"Text="提交"/>
  </td><td>
    <inputid="Reset3"type="reset"value="重置"/></td></tr>
  </table>
  </div>
  </form>
</body>
</html>

  它的后台代码如下:

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclassRegister:System.Web.UI.Page
{
  protectedvoidPage_Load(objectsender,EventArgse)
  {
  }
  protectedvoidbtnUpload_Click(objectsender,EventArgse)
  {
    //判断是否上传了文件
    if(fileUpload.HasFile)
    {
      //指定上传文件在服务器上的保存路径
      stringsavePath=Server.MapPath("~/upload/");
      //检查服务器上是否存在这个物理路径,如果不存在则创建
      if(!System.IO.Directory.Exists(savePath))
      {
        //需要注意的是,需要对这个物理路径有足够的权限,否则会报错
        //另外,这个路径应该是在网站之下,而将网站部署在C盘却把上传文件保存在D盘
        System.IO.Directory.CreateDirectory(savePath);
      }
      savePath=savePath+""+fileUpload.FileName;
      fileUpload.SaveAs(savePath);//保存文件
      //不过需要注意的是,在客户端访问却需要指定的是URL地址,而不是在服务器上的物理地址
      txtHeadImage.Text=string.Format("<ahref='upload/{0}'>upload/{0}</a>",fileUpload.FileName);
    }
  }
}

  注意在页面中笔者使用了javascript技术让头像文本框无法输入,只能在用户上传头像成功之后才会自动设置成用户上传成功后头像URL地址。

  这个页面的运行效果如下:

  在这个页面中这个页面是很难按照正常方式注册成功的,因为要想上传头像成功则必须表单中所有字段都填写了,而用户头像一栏又是必须用户上传头像成功之后自动成为上传的头像在服务器端的URL地址的。当我们选择一个本地头像点“上传”按钮时的效果:

  同样点“提交”按钮也不能上传成功。这种情况下我们就可以使用分组技术,将验证上传控件的验证控件和上传按钮的ValidationGroup属性设为同一个值(按住Ctrl键同时选择上述两个控件),如下图:

  这样点“上传”按钮的时候只有ValidationGroup属性与该按钮的ValidationGroup属性一致的按钮才会验证所关联的控件的值,这样用户头像才能上传成功,如下图:

  这样当用户天按要求填写好其它信息后就能点击“提交”按钮进行注册了。

  总结:

  为了检验用户填写的数据的正确性,我们有两种办法:采用传统办法,自己编写客户端脚本进行验证;使用asp.net中的验证控件来进行验证。

  CompareValidator控件、RangeValidator控件和RegularExpressionValidator控件对所关联的验证的空值是不进行验证的(即能通过验证),如果要求用户必须输入并且还要符合规则就要结合RequiredFieldValidator控件共同验证。

  如果验证的规则比较复杂,则可以使用CustomValidator控件自己编写客户端验证代码来进行验证,如果要让CustomValidator控件对空值也进行客户端验证则要设置它的ValidateEmptyText属性为true。

  个人经验:对于日期类的验证不建议使用正则进行验证,如果按照“yyyy-mm-dd”这样的形式对日期采用正则验证,那么“2008-02-31”这样值也是能通过验证的,虽然可以可以编写更严格的正则验证也是可以的(笔者曾经见过,正则表达式长度近千字节了,而且非常难以理解),其实用RangeValidator控件就能实现轻松验证,将它的Type属性设置为Date,并将的最大值和最小值分别设置为“9999-12-31”和“0001-01-01”就能避免出现2008-02-31”这样的值。也就是掌握了它们的规则灵活运用它们进行数据验证,提高数据的有效性。

  --------------------------------------------------------------

  后记:写这篇真有点吃力,查阅了大量有关正则方面的资料,调试N多次才将效果调试出来,历史4、5天的无数次失败的尝试得到了想要给大家展示的效果(知识点涉及CSS和javascript及正则等等),也算是不枉费大家的鼓励和希望了。我希望大家每次看的时候总能看到一些对实际开发有帮助但是以前没有用过或者没有想到的解决问题的思路和方法。

  下一篇的内容可能会相对简单一点,讲述MultiView控件、Javascript方式的选项卡、WiZard控件和MasterPage母板页。可能内容不多,但是制作一些PP的网页时会派得上用场


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3