【ASP.NET】第六课——验证控件和上传控件的使用

知识点:理解数据验证的作用、掌握6种验证控件的用法、掌握用于文件上传的FileUpload控件

 

        为了使我们的应用程序更安全,我们需要在保存数据之前,确保数据的格式是否正确,这就需要我们对用户输入进行验证。在 ASP.NET 中, 验证控件提供了一种易于使用并安全的机制来执行各种验证任务。ASP.NET 提供的验证控件包括 RequiredFieldValidator、RangeValidator、CompareValidator、RegularExpressionValidator、 CustomValidator 和 ValidationSummary。另外,在有些场合需要用户上传文件,比如增加车型 时,需要上传车型的实物图文件,使用文件上传控件 FileUpload 可以达到此目的。

数据验证的三种方式:

  • 后端代码验证:㤇在后端代码验证用户名和密码是否符合要求,是将数据提交给服务器来执行验证。
  • JavaScript验证:整个验证过程无须服务器参与,可有效提高验证响应速度。
  • 服务器验证控件:通过控件实现客户端加服务端验证的“双重验证”模式,为数据验证提供安全方便的解决方案。

 

1、 数据验证控件

1.1    数据验证概述

        在运行程序时,经常需要从界面获取用户输入的数据,然后把数据保存到数据库中。在输入数据的过程中,难免会输入格式不正确的数据。比如,在车型管理系统中,增加车型时,需要输入车型的官方价格,价格的格式应该是字符 0 到 9、小数点组成,但是输入的价格中可能会出现 其他的字符如 26 个英文字母、汉字等,那么在保存到数据库中时,会出现异常,导致保存失败。 所以我们在保存数据之前,有必要通过技术手段,对有格式要求的数据进行验证。

【ASP.NET】第六课——验证控件和上传控件的使用_第1张图片

          数据验证的方式有很多。比如我们在制作用户登录页面时,为避免用户名和密码都不录入就 直接单击“登录”按钮,我们编写代码做判断,其实这也是一种数据验证方式。但这种方式需要编写大量的代码。ASP.NET 提供了专用的数据验证控件,用于实现验证功能。数据验证控件会自动生成输入检测的代码,并处理错误信息的显示,减少程序代码。

 

1.2   使用数据验证控件

          ASP.NET 提供了一系列验证控件,以满足各种格式的验证。主要包括 5 种验证控件和 1 个汇 总控件,如表所示。

                    控件名称
                  控件说明
RequiredFieldValidator
非空格式验证
RangeValidator
范围验证控件
CompareValidator
比较验证控件
RegularExpressionValidator
正则表达式验证控件
CustomValidator
自定义验证控件
ValidationSummary
验证信息汇总显示控件

          验证控件的使用非常简单,除了自定义验证控件之外,其他验证控件都只需要拖入页面后设置相关的属性即可。

(1)使用数据验证控件验证用户输入时,数据验证控件将首先检查客户端的脚本是否可用。如果可用,将优先使用客户端的脚本进行验证。在客户端验证通过后,页面才提交给服务器,从而减少了对服务器请求的次数,提高了程序的工作效率。

(2)为了确保程序的安全性,在服务器端仍会进行再次验证,从而避免恶意用户绕过客户端向服务器端发送非法数据。

(3)程序会在数据验证控件的验证没有通过时,显示设定的错误信息。

 

1.2.1   RequiredFieldValidator控件

          RequiredFieldValidator 控件是最常用的验证控件之一,用于验证必须填写的控件,在验 证的目标控件的输入内容为空时显示错误信息,常常和其他验证控件一起实现有效性验证。 RequiredFieldValidator 控件的常用属性:

          属性
                                                                    说明
ControlToValidate
要验证的控件的 ID
Text
出错时的提示
ErrorMessage
提交给汇总控件的错误信息。如果 Text 属性为空,则出错时将显示该信息。
Display
错误提示文本的显示方式。
取值为 Static 时,无论是否有错误都占据位置,不显示错误时为空白,影响后面内容的位置;
取值为 Dynamic 时,有错误时显示,无错误时不显示且后面的元素占据其位置;
取值为 None,不管是否存在错误,都不显示错误信息问文本。

          除了 ValidationSummary 控件之外,表中的常用属性也是其他验证控件都具有的属性。 实 际 应 用 中 , 应 区 分 ErrorMessage 和 Text 属 性 , 前 者 是 错 误 信 息 , 主 要 用 于 为 ValidationSummary 控件提供收集汇总的错误信息;后者是用于在验证控件处显示错误的提示文 本。如果 Text 属性为空,则验证控件处也会使用 ErrorMessage 属性进行显示。同时设置了 Text 和 ErrorMessage,验证控件处显示 Text 属性,ValidationSummary 控件显示 ErrorMessage 属性。

示例练习1:使用RequiredFieldValidator控件进行非空验证

第一步,新建项目:在VS中新建asp.net web项目,这里命名为【WebApplication6】,右键单击项目名称【WebApplication6】, 依次点击【添加】→【添加Web窗体】,在弹出的【指定项名称】窗口中,使用默认的命名WebForm1,然后单击【确定】
【ASP.NET】第六课——验证控件和上传控件的使用_第2张图片

第二步,设计页面:设计一个登陆页面,将默认打开的WebForm1.aspx文件切换到【设计】模式,从工具箱里拖两个TextBox控件和一个Button控件、一个Label控件。

【ASP.NET】第六课——验证控件和上传控件的使用_第3张图片

第三步,设置控件属性:将WebForm1.aspx文件切换到【源】模式,修改三个控件的属性

【ASP.NET】第六课——验证控件和上传控件的使用_第4张图片

第四步,给按钮添加点击事件:将WebForm1.aspx文件切换到【设计】模式,双击【登录】按钮,进入该按钮的点击事件,编写代码

【ASP.NET】第六课——验证控件和上传控件的使用_第5张图片

第五步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】

【ASP.NET】第六课——验证控件和上传控件的使用_第6张图片

发现,我们没有输入任何信息,点击【登录】按钮时,依然提示“登录成功”,显然不符合逻辑。

第六步,使用非空控件验证:将WebForm1.aspx文件切换到【设计】模式,从工具箱里找到非空验证控件RequiredFieldValidator,将它拖放到对应的位置,我们给两个TextBox控件后面各自拖放一个RequiredFieldValidator控件,进行验证。

【ASP.NET】第六课——验证控件和上传控件的使用_第7张图片

第七步,设置非空控件的属性:选中控件以后,打卡属性面板进行设置,这个示例里有两个非空控件,依次进行设置

账号后面的非空控件:ControlToValidate属性为txtNuserName,ErrorMessage属性为“用户名不能为空”,ForeColor属性为Red。

密码后面的非空控件:ControlToValidate属性为txtPwd,ErrorMessage属性为“密码不能为空”,ForeColor属性为Red。

【ASP.NET】第六课——验证控件和上传控件的使用_第8张图片

第八步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】

【ASP.NET】第六课——验证控件和上传控件的使用_第9张图片

程序报错,问题原因:目前使用的VS2017所创建的ASP.NET应用程序的版本比较高,所以它的验证控件运行方式会有所不同,如果要解决这个问题按照高版本ASP.NET的设置方式会比较复杂,这里介绍一个简单的方式来解决。

解决办法:在解决方资源管理器中,双击文件名称Web.config,打开配制文件,删除一行代码

【ASP.NET】第六课——验证控件和上传控件的使用_第10张图片

再次运行测试:

【ASP.NET】第六课——验证控件和上传控件的使用_第11张图片

案例完整源代码:

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






    验证控件—王迪


    
账号:
密码:

 

1.2.2   CompareValidator控件

          CompareValidator 控件是比较验证控件,可以将目标控件中的值与指定的值或指定控件中 的值进行比较。注意:如果输入控件为空,则不会调用任何验证函数,并且验证将成功。因此需要使用 RequiredFieldValidator 控件使字段必需(必填)

          CompareValidator 控件常用于在用户注册时,前后输入的密码是否一致。为了实现比较功能,CompareValidator 控件使用 ControlToCompare 属性指定用于比较的控件,使用 ValueToCompare 属性指定用于比较的值。可想而知,这两个属性不可以同时使用。CompareValidator 控件还提供了 Operator 属性,用于指定比较的方式。CompareValidator 控件常用属性:

             属性                                     说明
ControlToValidate 要验证的控件的 id。
ControlToCompare 要与所验证的控件进行比较的控件名称。
ErrorMessage

当验证失败时,在 ValidationSummary 控件中显示的文本。 

注意:如果未设置 Text 属性,文本也会显示在验证控件中。

Operator

要执行的比较操作的类型。

运算符有:Equal、GreaterThan、GreaterThanEqual、LessThan、LessThanEqual、NotEqual、DataTypeCheck

Type

规定要对比的值的数据类型。

类型有:Currency(货币)、Date(日期)、Double(双精度)、Integer(整型)、String(字符串)

ValueToCompare 一个常数值,该值要与由用户输入到所验证的输入控件中的值进行比较。

示例练习2:使用CompareValidator控件进行比较验证

要求:注册时一般要求输入两次密码,且两次密码要一致。

第一步,设计【确认密码】:在示例1的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱拖入一个TextBox控件到指定位置,并在属性面板设置TextBox控件的ID属性为txtPwdRepeat。

【ASP.NET】第六课——验证控件和上传控件的使用_第12张图片

第二步,使用非空控件验证:从工具箱里找到非空验证控件RequiredFieldValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtPwdRepeat,ErrorMessage属性为“确认密码不能为空”,ForeColor属性为Red。(使用CompareValidator 比较控件时,必须使用RequiredFieldValidator非空控件进行配合)

【ASP.NET】第六课——验证控件和上传控件的使用_第13张图片

第三步,使用CompareValidator控件:从工具箱里找到比较验证控件CompareValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtPwdRepeat,ControlToCompare属性为txtPwd,ErrorMessage属性为“密码不一致”,ForeColor属性为Red,Operator属性为Equal,Type属性为String。

【ASP.NET】第六课——验证控件和上传控件的使用_第14张图片

控件源代码:由于Operator属性的默认值为Equal,Type属性的默认值为String,因此源代码里并没有体现出来。

            确认密码:
            
            
            

第四步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。

【ASP.NET】第六课——验证控件和上传控件的使用_第15张图片

案例延伸:CompareValidator 控件的 Type 属性也可以用于检查输入的类型,比如用户生日必须符合日期类型,使用CompareValidator 控件执行这种检查的方式是:移除 ValueToCompare 和 ControlToCompare 的值,并设置 Type 类型为 Date,设置 Operator 值为 DataTypeCheck。

 

1.2.3   RangeValidator 控件

          RangeValidator 控件用于范围检查,常验证输入的值是否在指定的范围之内。可以对不同类型的值进行比较,比如数字、日期和字符。

  • 如果输入控件为空,验证不会失败。因此需要使用 RequiredFieldValidator 控件,使字段必需(必填)。
  • 如果输入值无法转换为指定的数据类型,验证不会失败。请使用 CompareValidator 控件,将其 Operator 属性设置为 DataTypeCheck,这样就可以校验输入值的数据类型了。

          除了与 RequiredFieldValidator 相同的常用属性之外,RangeValidator 控件还提供了 MinimumValue 和 MaxinumValue 属性,用于确定范围的最小值和最大值。同时,指定了 Type 属性用于设置比较 的类型,不同类型之间比较可能会引发问题。RangeValidator 控件常用属性:

             属性                                     说明
ControlToValidate 要验证的控件的 id。
ErrorMessage

当验证失败时,在 ValidationSummary 控件中显示的文本。 

注意:如果未设置 Text 属性,文本也会显示在验证控件中。

MaximumValue 规定输入控件的最大值。
MinimumValue 规定输入控件的最小值。
Type

规定要对比的值的数据类型。

类型有:Currency(货币)、Date(日期)、Double(双精度)、Integer(整型)、String(字符串)

比较原理:RangeValidator 控件会将目标控件中的值转换成 Type 指定的类型,然后再查看是否在 MinimumValue 和 MaxinumValue 属性指定的范围之内。

注意:

(1)RangeValidator 控件常用于整型或日期类型的比较,Type 默认值是 String,如果 按照字符串进行位比较,出现的结果可能与预期完全不同,所以,需要特别注意设置 Type 属性。例如,数字 13 大于 2,但字符串“13”小于“2”。字符串按位进行比较,当比较“1” 比“2”小时,就确定了“13”大于“2”。

(2)目标控件中的值可以与 MinimumValue 和 MaxinumValue 属性的值相等。

(3)RangeValidator 控件必须在目标控件中有输入值时才进行验证,否则验证控件不 会被触发。其他验证控件同样不能在目标控件中输入为空时触发。

 

示例练习3:使用RangeValidator控件进行范围验证

要求:注册要求输入的年龄在指定范围内。

第一步,设计【年龄】:在示例2的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱拖入一个TextBox控件到指定位置,并在属性面板设置TextBox控件的ID属性为txtAge。

【ASP.NET】第六课——验证控件和上传控件的使用_第16张图片

第二步,使用RangeValidator控件:从工具箱里找到范围验证控件CompareValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtAge,ErrorMessage属性为“年龄输入有误,范围在0~120之间”,ForeColor属性为Red,MaximumValue属性为120,MinimumValue属性为0,Type属性为Integer。

【ASP.NET】第六课——验证控件和上传控件的使用_第17张图片

控件源代码:

年龄:


第三步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。

【ASP.NET】第六课——验证控件和上传控件的使用_第18张图片

案例分析:第一次测试时,年龄没有输入,但仍然提示登录成功。这是为什么?

解决办法:使用 RequiredFieldValidator 控件进行非空验证

 

1.2.4   RegularExpressionValidator控件 

         正则表达式是一种描述格式模式的表达式。RegularExpressionValidator 控件验证目标控件中输入的值和正则表达式描述的 格式是否匹配,例如,验证用户输入的邮箱、邮编、电话号码等是否合法。

  • 除非浏览器不支持客户端验证或 EnableClientScript 属性被设置为 false,否则将同时执行服务器端和客户端验证。
  • 如果输入控件为空,验证将失败。请使用 RequiredFieldValidator 控件,使字段必需(必填)。

          RegularExpressionValidator 控件提供了 ValidatorExpression 属性,指定匹配目标控件 格式的正则表达式。ASP.NET 中内置了几个常用的正则表达式,我们只需要在属性窗口中,选择 控件的 ValidatorExpression 属性,并单击右侧的“ ”按钮,就可以打开正则表达式编辑器, 在其中选择使用内置的正则表达式。

示例练习4:使用RegularExpressionValidator 控件进行邮箱验证

要求:注册要求输入的邮箱符合规范。

第一步,设计【邮箱】:在示例3的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱拖入一个TextBox控件到指定位置,并在属性面板设置TextBox控件的ID属性为txtEmail。

【ASP.NET】第六课——验证控件和上传控件的使用_第19张图片

第二步,使用非空控件验证:从工具箱里找到非空验证控件RequiredFieldValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtEmail,ErrorMessage属性为“邮箱不能为空”,ForeColor属性为Red。(使用RegularExpressionValidator 正则表达式控件时,必须使用RequiredFieldValidator非空控件进行配合)

【ASP.NET】第六课——验证控件和上传控件的使用_第20张图片

第三步,使用RegularExpressionValidator控件:从工具箱里找到范围验证控件RegularExpressionValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtEmail,ErrorMessage属性为“邮箱格式不正确”,ForeColor属性为Red,

【ASP.NET】第六课——验证控件和上传控件的使用_第21张图片

设置控件的 ValidatorExpression 属性,并单击右侧的“ ”按钮,就可以打开正则表达式编辑器, 在选择使用“Internet电子邮件地址”,会出现对应的验证表达式,然后点击【确定】。

【ASP.NET】第六课——验证控件和上传控件的使用_第22张图片

控件源代码:

邮箱:
 
 
            

第四步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。

【ASP.NET】第六课——验证控件和上传控件的使用_第23张图片

案例延伸:内置的正则表达式往往不能满足实际的需求,常用的正则表达式:

正则表达式
说明
^[A-Za-z]+$
只能输入由 26 个英文字母组成的字符串
^\d{n}$
只能输入 n 位数字
^\d{m,n}$
只能输入 m~n 位数字
^\d{n,}$
只能输入至少 n 位数字
^[\u4e00-\u9fa5]+$
只能输入汉字
^[1-9][0-9]*$
只能输入正整数
^(-)?[0-9]+(.[0-9]{2})?$
输入正负整数或小数,小数只能保留 2 位

 

 

1.2.5   CustomValidator控件 

          非空、范围和比较验证控件提供了常用的验证功能,正则表达式控件则基于正则表达式提供 了强大的字符串规则验证功能,但仍然无法解决某些验证需求。为此,ASP.NET 中提供了 CustomValidator 控件,它是自定义验证控件,可以由程序员编写客户端脚本与服务器端脚本对 数 据 进 行 验 证 , 以 确 定 用 户 的 输 入 是 否 通 过 验 证 。

 

示例练习5:使用CustomValidator控件进行用户名验证

要求:要求验证用户输入的账号,是否存在。

第一步,使用CustomValidator 控件:从工具箱里找到自定义验证控件CustomValidator ,将它拖放到对应的位置,并设置ControlToValidate属性为txtUserName,ErrorMessage属性为“用户名已存在”,ForeColor属性为Red。

【ASP.NET】第六课——验证控件和上传控件的使用_第24张图片

第二步,给控件绑定服务器端事件:选中CustomValidator控件后,点击属性面板事件图标,设置ServerValidate事件的名称,这里命名为IsUserNameExist。(直接在事件名称右侧的输入框里输入即可)

【ASP.NET】第六课——验证控件和上传控件的使用_第25张图片

控件源代码:

 账号:
 
 

第三步,编写ServerValidate事件:双击ServerValidate事件名称,自动打开WebForm1.aspx.cs文件,光标定位在ServerValidate事件中,直接编写代码。

【ASP.NET】第六课——验证控件和上传控件的使用_第26张图片

        //自定义控件的ServerValidate事件
        protected void IsUserNameExist(object source, ServerValidateEventArgs args)
        {
            if (args.Value == "wd")     //args.Value即为要验证的值
            {
                args.IsValid = false;   //args参数的属性IsValid,取值为false,代表未通过验证
            }
            else
            {
                args.IsValid = true;    //args参数的属性IsValid,取值为true,代表通过验证
            }
        }

第四步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。

【ASP.NET】第六课——验证控件和上传控件的使用_第27张图片

  • 问题分析:虽然提示“用户名已存在”,但是仍然提示“登录成功”。即“IsValid 等于真或假都能通过”
  • 出现原因:案例中的CustomValidator控件,采用的是服务器端验证,因此即便验证不通过,页面也是可以提交的。
  • 解决办法:对按钮的点击事件进行控制(使用 Page.IsValid属性进行判断)

第五步,设置按钮的点击事件:在第三步的基础上,WebForm1.aspx.cs文件里有之前写的按钮点击事件btnLogin_Click,修改事件代码。使用 Page.IsValid属性判断页面上的验证控件是否全部验证通过。

【ASP.NET】第六课——验证控件和上传控件的使用_第28张图片

        protected void btnLogin_Click(object sender, EventArgs e)
        {
            /*
             * Page.IsValid属性,获取一个值,该值指示页面中的验证控件是否全部通过。
             * 如果验证成功,则为 true;否则为 false。
             * 若要使此属性返回 true,当前验证组中的所有验证服务器控件必须都验证成功。
             */
            if (Page.IsValid)
            {
                    this.Label1.Text = "登录成功";
            }            
        }

第六步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。

【ASP.NET】第六课——验证控件和上传控件的使用_第29张图片

 

1.2.6   ValidationSummary控件 

          ValidationSummary 控件用于显示网页中所有验证错误的摘要。在该控件中显示的错误消息是由每个验证控件的 ErrorMessage 属性规定的。如果未设置验证控件的 ErrorMessage 属性,就不会为那个验证控件显示错误消息。

ValidationSummary 控件常用属性如表所示。

             属性
                             说明
DisplayMode
所有的错误信息显示的模式,包括三种。
为 List 时,显示为列表;
为 BulletList 时,显示为项目符合列表;
为 SingleParagraph 时,显示为单 行
HeaderText
显示在错误信息之前的提示信息
ShowSummary
是否在 ValidationSummary 控件处显示
ShowMessageBox
是否弹出 MessageBox 显示错误信息

 

示例练习6:使用ValidationSummary控件

第一步,使用ValidationSummary控件:在示例5的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱找到验证信息汇总控件ValidationSummary,将它拖放到对应的位置,设置ForeColor属性为Red,其他属性暂不设置。

【ASP.NET】第六课——验证控件和上传控件的使用_第30张图片

第二步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。

【ASP.NET】第六课——验证控件和上传控件的使用_第31张图片

  • 案例分析:ValidationSummary控件汇总的信息以默认的形式显示出来。
  • 案例改动:如果由ValidationSummary控件显示信息,则在每个控件的后面不再提示错误信息。

第三步,修改源代码:想要实现每个控件后面不再提示错误信息,将WebForm1.aspx文件切换到【源】模式,修改控件的源文件。我们知道ValidationSummary控件显示的信息是从各个控件的ErrorMessage属性获取的,控件本身如果没有设置Text属性的时候,会默认显示ErrorMessage属性值。

两种实现方法:

①给每个控件添加Text属性,并设置值为*

②给每个控件开头和结束之间,添加*

【ASP.NET】第六课——验证控件和上传控件的使用_第32张图片

预览效果:

【ASP.NET】第六课——验证控件和上传控件的使用_第33张图片

第四步,修改ValidationSummary属性:以弹窗形式提示错误信息。将WebForm1.aspx文件切换到【设计】模式,点击验证信息汇总控件ValidationSummary,设置ShowSummary属性为false,设置ShowMessageBox属性为true。

【ASP.NET】第六课——验证控件和上传控件的使用_第34张图片

预览效果:

【ASP.NET】第六课——验证控件和上传控件的使用_第35张图片

示例练习 1 ~ 6 的完整代码:

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






    验证控件—王迪


    
账号:
密码: *
确认密码: *
年龄:
邮箱: *

 

1.3    Page.IsValid

         Page.IsValid 是 Page 对象的 IsValid 属性,该属性指示页面是否通过了验证,如果页面中的验证控件都通过了验证,则 Page.IsValid 属性值为 true,如果存在任何一个验证控件未通过验证,则 Page.IsValid 属性值为 false。

参照: 示例练习 5 

 

1.4    禁用验证

         在某些特定条件下,程序员需要避开验证。如:填写表单的页面中存在“清空”按钮,单击 “清空”按钮时,用户可以将填写中的表单清空重填,而不是验证用户的输入。此时可以通过设置“清空”按钮的“CausesValidation”属性为“false”,禁用验证。

         除了使用按钮的“CausesValidation”属性禁用验证之外,还可以将验证控件的“Enable” 属性设置为“false”来禁用单个验证控件。只需要禁用验证控件的客户端验证时,设置验证控 件的“EnableClientScript”属性为“false”

 

2、 文件上传控件

         在 ASP.NET 的 WebForm 开发模式中,封装了 FileUpload 控件,可以方便的进行文件上传操作。FileUpLoad 常用的成员如表 所示。

           成员名称 成员类型                                            说明
FileName
属性
获取客户端使用 FileUpload 控件上载的文件名称,不包括路径
HasFile 属性 获取一个布尔值,用于表示FileUpload控件是否已经包含一个文件
PostedFile 属性 获取一个与上传文件相关的HttpPostedFile对象,使用该对象可以获取上传文件的相关属性;(ContentLength上传文件的大小,ContentType文件类型,FileName获得上传文件在客户端的完整路径)
SaveAs(String filename) 方法 参数filename是指保存在服务器中的上传文件的绝对路径,在调用SaveAs方法之前,先判断HasFile属性是否为true

示例练习7:使用 FileUpload 控件

要求:页面实现上传图片功能,并将上传的图片显示在页面上

第一步,新建Web窗体:在示例6的基础上,在解决方案资源管理器窗口中,右键单击网站项目【WebApplication6】, 依次点击【添加】→【Web窗体】,弹出【指定项名称】的窗口,这里采用默认命名“WebForm2”,然后单击【确定】。

【ASP.NET】第六课——验证控件和上传控件的使用_第36张图片

第二步,设计Web窗体:将WebForm2.aspx文件切换到【设计】模式,设计页面,从工具箱找到控件,并设置各自属性。

  • Image控件:设置ID属性为imgUpload
  • FileUpload控件:不修改属性
  • Button控件:设置ID属性为btnUpload,Text属性为“上传”
  • Label控件:设置ID属性为lblMessage,Text属性为空

【ASP.NET】第六课——验证控件和上传控件的使用_第37张图片

控件源代码:

        


第三步,新建文件夹:一个网站中,可能会有许多上传图片,为了方便统一管理,首先在网站中创建 “UploadPic” 文件夹。方法:右键单击项目名称【WebApplication6】, 依次点击【添加】→【新建文件夹】,然后将文件夹名称改为UploadPic即可。

【ASP.NET】第六课——验证控件和上传控件的使用_第38张图片

第四步,给按钮添加点击事件:双击按钮【上传】,进入WebForm2.aspx.cs文件,光标停在按钮的点击事件btnUpload_Click中,编写代码。代码功能:点击按钮时先判断FileUpload控件里是否有文件路径,然后判断上传的文件是否图片类型。如果上传成功,将上传的图片显示在图片控件里。

【ASP.NET】第六课——验证控件和上传控件的使用_第39张图片

        protected void btnUpload_Click(object sender, EventArgs e)
        {
            //判断用户是否浏览文件(FileUpload控件里是否有文件路径)
            if (FileUpload1.HasFile)
            {
                //使用FileName属性,获取FileUpload1控件上的文件名称(包括后缀),不包括路径获
                string fileName = FileUpload1.FileName;
                //使用Path.GetExtension()方法,获取上传的文件的后缀名//需要引入命名空间System.IO;
                string fileFix = Path.GetExtension(fileName).ToLower();//将返回的后缀名转换成小写,便于后面统一判断
                //通过文件后缀名,判断用户上传的文件类型是否符合要求(图片文件)
                if(fileFix ==".png" || fileFix == ".jpg" || fileFix == ".gif" || fileFix == ".pic")
                {
                    //使用SaveAs()方法将文件保存在指定位置,参数需要给出根路径
                    FileUpload1.SaveAs(Server.MapPath("./UploadPic/"+fileName));//使用Server.MapPath()方法返回与Web服务器上的指定虚拟路径相对应的物理文件路径,./表示所在页面的当前目录
                    this.imgUpload.ImageUrl = "~/UploadPic/" + fileName;//将图片路径,赋值给图片控件的ImageUrl属性,~/表示当前应用程序的根目录
                    this.lblMessage.Text = "图片上传成功!";
                }
                else
                {
                    this.lblMessage.Text = "上传的文件不是图片类型文件";
                }
            }
            else
            {
                  this.lblMessage.Text = "您还没有浏览文件";
            }
        }

第五步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm2.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。

此时回到VS,可以看到已经上传的图片保存在文件夹UploadPic里。查看方法,点击解决方案资源管理器右侧的,然后点击【显示所有文件】图标,即可看到。

【ASP.NET】第六课——验证控件和上传控件的使用_第40张图片

 

 

本课总结

  • RequiredFieldValidator 控件是最常用的验证控件之一,用于验证必须填写的控件,在验 证的目标控件的输入内容为空时显示错误信息,常常和其他验证控件一起实现有效性验证。
  • RangeValidator 控件用于范围检查,常验证输入的值是否在指定的范围之内。
  • CompareValidator 控件是比较验证控件,可以将目标控件中的值与指定的值或指定控件中 的值进行比较,常用于在用户注册时,前后输入的密码是否一致。
  • RegularExpressionValidator 控件验证目标控件中输入的值和正则表达式描述的格式是否 匹配。
  • 使用 CustomValidator 控件由程序员编写客户端脚本与服务器端脚本对数据进行验证,以确 定用户的输入是否通过验证。
  • ValidationSummary 控件可用于汇总所验证控件的错误报告。
  • 使用 FileUpload 控件进行文件的上传。

 

 

====================这里是结束分割线======================

 

你可能感兴趣的:(ASP.NET,验证控件,上传控件,C#,FileUpload,控件)