I can 前端-09 数据验证与ASP.NET验证控件

最新推荐文章于 2020-07-08 19:38:34 发布

Eden(Peng)Pan

最新推荐文章于 2020-07-08 19:38:34 发布

阅读量375

点赞数

分类专栏： Major：Web 文章标签：前端

本文链接：https://blog.csdn.net/PanPen120/article/details/78830529

版权

Major：Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

数据验证

what

对用户输入的数据的正确性进行验证，常见是是否有输入、格式、范围、比较等

how

写代码在后端验证
- 缺点在于：数据需要传递到后台才进行验证，会造成服务器压力变大
- 缺点在于：还要写代码，写代码意味着会出错
写JS在前端验证
- 缺点在于：还要写代码，写代码意味着会出错
使用ASP.NET验证控件
- 缺点在于：启动时，页面会生成很多你不认识的东西
使用JQuery等框架的验证插件

ASP.NET 数据验证控件

非空验证控件

判断是否输入

<div>

   用户名：<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>

   <asp:RequiredFieldValidator 
   ID="RequiredFieldValidator1" 
   ErrorMessage="请输入用户名！"
   ControlToValidate="txtUserName"  
   ForeColor="#FF3300">
   </asp:RequiredFieldValidator>

   <br />
   <br />
   <br />

   <asp:Button ID="Button1" runat="server" Text="提交注册" />

</div>

这里写图片描述

1流程

当点击【提交注册】时，触发验证控件

2 使用

从Toolbox中寻找【Validation】一栏中需要的验证控件

        【ControlToValidate】属性 = 验证控件的ID
        【ErrorMessage】属性 = 验证不通过时显示的文字
        【ForeColor】属性 = 验证不通过时显示的文字颜色

比较验证控件

判断该输入与另一个输入是否相同

<div>

     用户密码：<asp:TextBox ID="txtPwd" runat="server" TextMode="Password"></asp:TextBox>

     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtPwd" ErrorMessage="请输入密码！" ForeColor="#FF3300"></asp:RequiredFieldValidator>

        <br />
        <br />

    密码确认：<asp:TextBox ID="txtConfirmPwd" runat="server" TextMode="Password"></asp:TextBox>


   <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtConfirmPwd" Display="Dynamic" ErrorMessage="请再次输入密码！" ForeColor="#FF3300"></asp:RequiredFieldValidator>

   <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPwd" ControlToValidate="txtConfirmPwd" Display="Dynamic" ErrorMessage="两次输入密码不正确！" ForeColor="#FF3300"></asp:CompareValidator>

        <br />
        <br />

   <asp:Button ID="btnSubmit" runat="server" Text="提交注册" />

</div>

范围验证控件

验证输入是否在一个范围内

<form id="form1" runat="server">

  学员体重:<asp:TextBox ID="txtWeight" runat="server"></asp:TextBox>

  <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtWeight" Display="Dynamic" ErrorMessage="请输入体重！" ForeColor="#FF3300"></asp:RequiredFieldValidator>

  <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtWeight" Display="Dynamic" ErrorMessage="学员体重必须在60-70kg之间！" ForeColor="#FF3300" MaximumValue="70" MinimumValue="60"></asp:RangeValidator>

  <br />
  <br />

  出生日期:<asp:TextBox ID="txtBirthday" runat="server"></asp:TextBox>

  <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtBirthday" Display="Dynamic" ErrorMessage="请输入出生日期！" ForeColor="#FF3300"></asp:RequiredFieldValidator>

  <asp:RangeValidator ID="RangeValidator2" runat="server" ControlToValidate="txtBirthday" ErrorMessage="出生日期必须在1990-1-1到2000-1-1之间" ForeColor="#FF3300" MaximumValue="2000-1-1" MinimumValue="1990-1-1" Type="Date"></asp:RangeValidator>

  <br />
  <br />

 <asp:Button ID="btnSubmit" runat="server" Text="提交注册" />
</form>

正则表达式验证控件

这里写图片描述

已经带有部分写好的正则表达式

<body>
    <form id="form1" runat="server">
    <div>    
    电子邮件：<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail" ErrorMessage="电子邮件格式不正确！" ForeColor="#FF3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

    <br />
    <br />
    <asp:Button ID="btnSubmit" runat="server" Text="提交注册" />
    </div>
    </form>
</body>

验证汇总控件

这个控件应该很少用到，他将所有的验证汇总到一起显示

<body>
    <form id="form1" runat="server">

    学员体重:<asp:TextBox ID="txtWeight" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="txtWeight" ErrorMessage="请输入体重!"
            ForeColor="#FF3300">*</asp:RequiredFieldValidator>
    <asp:RangeValidator ID="RangeValidator1" runat="server"
            ControlToValidate="txtWeight" Display="None" ErrorMessage="体重应该在60-70kg之间!"
            ForeColor="#FF3300" MaximumValue="70" MinimumValue="60" Type="Integer"></asp:RangeValidator>

        <br />
        <br />

    出生日期:<asp:TextBox ID="txtBirthday" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
            ControlToValidate="txtBirthday" ErrorMessage="请输入出生日期!"
            ForeColor="#FF3300">*</asp:RequiredFieldValidator>
    <asp:RangeValidator ID="RangeValidator2" runat="server"
            ControlToValidate="txtBirthday" Display="None"
            ErrorMessage="出生日期必须在在1990-1-1至2000-1-1之间" ForeColor="#FF3300"
            MaximumValue="2000-1-1" MinimumValue="1990-1-1" Type="Date"></asp:RangeValidator>

        <br />
        <br />

   <asp:Button ID="btnSubmit" runat="server" Text="提交注册" />

        <br />
        <br />

    <asp:ValidationSummary ID="ValidationSummary1" runat="server" ForeColor="#FF3300" />
        <br />
    </form>
</body>