asp.net第四章预习(验证控件和用户控件)

目录

一、数据验证的两种方式

1、服务器端数据验证

2、客户端数据验证

二、服务器验证控件

1、RequiredFieldValidator

2、CompareValidator

3、RangeValidator

4、RegularExpressionValidator

5、CustomValidator

6、ValidationSummary

三、用户控件


验证控件:对服务端用户输入的信息进行验证且可以指定验证出现错误时显示的提示信息;

用户控件:用户自定义一些控件来完成特殊的功能。

一、数据验证的两种方式

        用户提交的数据是从客户端浏览器发送到服务端,这就意味着有两种验证方法:在客户端验证和在服务器端验证。

1、服务器端数据验证

        在初始化之后,还未更改事件之前进行验证。

        验证控件一般不可见,但有错误信息就可以看到错误信息文本。相对安全,但过程缓慢。

2、客户端数据验证

        对客户端浏览器中窗体上的数据进行验证。(涉及到JavaScript脚本语言,所以不会深入学习)

        快速,但不安全。

二、服务器验证控件

asp.net服务器的验证控件有6种,分别用于检查用户输入信息的不同方面。

验证控件的类型和作用
验证类型 使用的控件 控件的作用
必填项 RequiredFieldValidator 验证某个空间的内容是否被改变
与某值的比较 CompareValidator 用于对两个值进行比较验证
范围检查 RangeValidator 用于验证某个值是否在要求的范围内
模式匹配 RegularExpressionValidator 用于验证相关输入控件的值是否匹配正则表达式指定的模式
自定义 CustomValidator 调用在服务器端编写的自定义验证函数
验证摘要 ValidationSummary 用于显示来自页面上所有验证控件的错误信息

1、RequiredFieldValidator

        简单但是最常用。通常用于用户在输入信息时,对某项进行验证。

        在页面添加的时候,通常将该控件和某个输入控件进行关联,当输入控件的值为空时,就会触发RequiredFieldValidator控件。

直接使用看看效果:

下面这个是将RequiredFieldValidator控件和输入控件TextBox关联起来的方法:

        这段代码是一个 ASP.NET 中的验证控件,用于在用户输入框中确保用户输入的内容不为空。具体解释如下:

 <asp:RequiredFieldValidator>: 这是一个 ASP.NET 控件,用于执行必填字段验证。

 ID="RequiredFieldValidator1": 控件的唯一标识符,供代码中其他部分引用。

 runat="server": 说明该控件在服务器端运行。

 ControlToValidate="TextBox1": 指定要验证的目标控件,这里是名为 "TextBox1" 的文本框。

 Display="Dynamic": 指定验证错误消息的显示方式,这里是动态显示,即只有在需要时才会显示。

 ErrorMessage="用户名不能为空": 当验证失败时显示的错误消息内容为“用户名不能为空”。

 ForeColor="Red": 指定错误消息的文本颜色为红色,用于突出显示错误信息。

        总的来说,这段代码的作用是确保用户在提交表单时不会将用户名字段留空,如果用户名字段为空,将会显示红色文字“用户名不能为空”的错误提示信息。

尝试执行的时候会出错,但是我不知道这是什么错误:

错误的修改方法(我使用的是方法三,侵权联系删除):

WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping-CSDN博客

然后,就成功的进入了网页,初始状态如下:

 这个验证是怎么显示的呢,就需要把某个TextBox的值空着,即:

 使用这个验证控件的注意点:

        在源中添加相应的属性和属性值;还有就是上面会出错的那个点。 

.aspx文件:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 42%;
            height: 136px;
        }
        .auto-style2 {
            height: 67px;
        }
        .auto-style3 {
            height: 67px;
            width: 104px;
        }
        .auto-style4 {
            width: 104px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <p>
            &nbsp;</p>
        <asp:Label ID="Label1" runat="server" Text="用户登录"></asp:Label>
        <br />
        <br />
        <br />
        <table class="auto-style1">
            <tr>
                <td class="auto-style3">用户名:</td>
                <td class="auto-style2">
                    <asp:TextBox ID="TextBox1" runat="server" Height="32px" Width="260px"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="用户名不能为空" ForeColor="Red">

            </asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="auto-style4">密码:</td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Height="32px" Width="260px"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"  ControlToValidate="TextBox2" Display="Dynamic"  ErrorMessage="密码不能为空" ForeColor="Red">

            </asp:RequiredFieldValidator>
                </td>
            </tr>
        </table>
        <p>
            &nbsp;</p>
        <p>
            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="登录" Height="51px" OnClick="Button1_Click" Width="111px" />
        </p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
    </form>
    <p>
        &nbsp;</p>
</body>
</html>

.aspx.cs文件:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication3
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            if(TextBox1.Text =="admin" && TextBox2.Text == "123456")
            {
                Label2.Text = "欢迎你";//这里可以直接跳转到另一个网页
            }
            else
            {
                Label2.Text = "用户名或密码错误,请重新登录";//这里可以使用一个小窗口来提示错误
            }
        }
    }
}

 如果输入正确的用户名和密码后,想跳转到另一个网页,就需要新建一个.aspx文件:

语句:

Response.Redirect("admin.aspx");

 进入状态(这是在admin.aspx文件下写的):

用户名密码错误的提示信息想用小窗口表示,可以采用:

this.ClientScript.RegisterStartupScript(this.GetType(), "","<script>alert('用户名密码不正确,请重试输入'); </script>") ;


2、CompareValidator

         前面的那个控件只需要添加一个ControlToValidate一个属性,但是这个用于比较,所以需要添加的属性有:ControlToValidate、ControlToCompare、Operator、Type。其他的在后面例子中再说吧。     

修改前的语句:

修改之后:

要注意 ControlToValidate、ControlToCompare里面对应的内容是两个文本框的,而ControlToValidate是进行验证的框。

比如我这里设置的是验证大值不能小于小值:

最终结果:

.aspx文件:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 42%;
            height: 136px;
        }
        .auto-style2 {
            height: 67px;
        }
        .auto-style3 {
            height: 67px;
            width: 104px;
        }
        .auto-style4 {
            width: 104px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <p>
            &nbsp;</p>
        <table class="auto-style1">
            <tr>
                <td class="auto-style3">小值:</td>
                <td class="auto-style2">
                    <asp:TextBox ID="TextBox3" runat="server" Height="32px" Width="260px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="auto-style4">大值:</td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server" Height="32px" Width="260px"></asp:TextBox>
                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="TextBox3" ControlToValidate="TextBox4" ErrorMessage="输入的值不能小于小值" 
                        ForeColor="Red" Operator="GreaterThan"  Type="Integer"></asp:CompareValidator>
                </td>
            </tr>
        </table>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
        
</body>
</html>


3、RangeValidator

        这个需要添加的主要是ControlToValidate、最大值MaximumValue和最小值MinimumValue。

例:输入成绩,在0~100之间。不在则显示“不在0~100中”。

最终显示:

.aspx.cs文件:

<p>
            &nbsp;</p>
        <p>
            请输入考试成绩:</p>
        <p>
            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:Button ID="Button2" runat="server" Text="提交" />
        </p>
        <p>
            <asp:RangeValidator ID="RangeValidator1" runat="server" 
                ControlToValidate="TextBox5" Display="Dynamic" MaximumValue="100" MinimumValue="0" Type="Integer" ErrorMessage="不在0~100中" ForeColor="Red"></asp:RangeValidator>
        </p>
        <p>
            &nbsp;</p>


4、RegularExpressionValidator

        这个的使用可以看看下面图片:

其他的属性,比如controlToValidate可以自己输入上去,与上面的相比没有太大差别。 

例如:电子邮箱

结果演示:

 

 .aspx文件:

        <p>
            &nbsp;</p>
        <p>
            电子邮件:</p>
        <p>
            <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 
                ControlToValidate="TextBox6"  ErrorMessage="不满足电子邮件的格式" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">

            </asp:RegularExpressionValidator>
        </p>
        <p>
            &nbsp;</p>

        
5、CustomValidator

        在现有的验证控件满足不了要求的时候,就需要开发人员自己来编写验证函数了。

使用 OnServerValidate属性,然后新建事件,编辑该事件的功能。

其他的好像没有什么太大的区别。


6、ValidationSummary

        显示页面中所有验证错误的摘要。

三、用户控件

        需要新建用户控件:

就先这样吧。在课上听老师讲一遍,然后补充文章内容。

相关推荐

  1. 验证的学习

    2024-03-23 07:34:06       6 阅读
  2. 4---初始化UI(UI架构搭建)

    2024-03-23 07:34:06       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-23 07:34:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-23 07:34:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-23 07:34:06       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-23 07:34:06       20 阅读

热门阅读

  1. IOS面试题编程机制 16-20

    2024-03-23 07:34:06       17 阅读
  2. 机器学习流程—迁移学习 模型微调

    2024-03-23 07:34:06       21 阅读
  3. PyTorch Lightning 与 TensorBoard 问题解决文档

    2024-03-23 07:34:06       19 阅读
  4. 遥控按键处理

    2024-03-23 07:34:06       21 阅读
  5. vue3在页面放一个视频可以开始暂停 全屏?

    2024-03-23 07:34:06       19 阅读
  6. css知识总结

    2024-03-23 07:34:06       19 阅读
  7. 外包管理系统又称科技外包管理系统

    2024-03-23 07:34:06       18 阅读
  8. Python 如何优雅编写多进程读取文件代码

    2024-03-23 07:34:06       19 阅读