知识点:理解数据验证的作用、掌握6种验证控件的用法、掌握用于文件上传的FileUpload控件
为了使我们的应用程序更安全,我们需要在保存数据之前,确保数据的格式是否正确,这就需要我们对用户输入进行验证。在 ASP.NET 中, 验证控件提供了一种易于使用并安全的机制来执行各种验证任务。ASP.NET 提供的验证控件包括 RequiredFieldValidator、RangeValidator、CompareValidator、RegularExpressionValidator、 CustomValidator 和 ValidationSummary。另外,在有些场合需要用户上传文件,比如增加车型 时,需要上传车型的实物图文件,使用文件上传控件 FileUpload 可以达到此目的。
数据验证的三种方式:
在运行程序时,经常需要从界面获取用户输入的数据,然后把数据保存到数据库中。在输入数据的过程中,难免会输入格式不正确的数据。比如,在车型管理系统中,增加车型时,需要输入车型的官方价格,价格的格式应该是字符 0 到 9、小数点组成,但是输入的价格中可能会出现 其他的字符如 26 个英文字母、汉字等,那么在保存到数据库中时,会出现异常,导致保存失败。 所以我们在保存数据之前,有必要通过技术手段,对有格式要求的数据进行验证。
数据验证的方式有很多。比如我们在制作用户登录页面时,为避免用户名和密码都不录入就 直接单击“登录”按钮,我们编写代码做判断,其实这也是一种数据验证方式。但这种方式需要编写大量的代码。ASP.NET 提供了专用的数据验证控件,用于实现验证功能。数据验证控件会自动生成输入检测的代码,并处理错误信息的显示,减少程序代码。
ASP.NET 提供了一系列验证控件,以满足各种格式的验证。主要包括 5 种验证控件和 1 个汇 总控件,如表所示。
控件名称
|
控件说明
|
RequiredFieldValidator
|
非空格式验证
|
RangeValidator
|
范围验证控件
|
CompareValidator
|
比较验证控件
|
RegularExpressionValidator
|
正则表达式验证控件
|
CustomValidator
|
自定义验证控件
|
ValidationSummary
|
验证信息汇总显示控件
|
验证控件的使用非常简单,除了自定义验证控件之外,其他验证控件都只需要拖入页面后设置相关的属性即可。
(1)使用数据验证控件验证用户输入时,数据验证控件将首先检查客户端的脚本是否可用。如果可用,将优先使用客户端的脚本进行验证。在客户端验证通过后,页面才提交给服务器,从而减少了对服务器请求的次数,提高了程序的工作效率。
(2)为了确保程序的安全性,在服务器端仍会进行再次验证,从而避免恶意用户绕过客户端向服务器端发送非法数据。
(3)程序会在数据验证控件的验证没有通过时,显示设定的错误信息。
RequiredFieldValidator 控件是最常用的验证控件之一,用于验证必须填写的控件,在验 证的目标控件的输入内容为空时显示错误信息,常常和其他验证控件一起实现有效性验证。 RequiredFieldValidator 控件的常用属性:
属性
|
说明 |
ControlToValidate
|
要验证的控件的 ID
|
Text
|
出错时的提示
|
ErrorMessage
|
提交给汇总控件的错误信息。如果 Text 属性为空,则出错时将显示该信息。
|
Display
|
错误提示文本的显示方式。
取值为 Static 时,无论是否有错误都占据位置,不显示错误时为空白,影响后面内容的位置;
取值为 Dynamic 时,有错误时显示,无错误时不显示且后面的元素占据其位置;
取值为 None,不管是否存在错误,都不显示错误信息问文本。
|
除了 ValidationSummary 控件之外,表中的常用属性也是其他验证控件都具有的属性。 实 际 应 用 中 , 应 区 分 ErrorMessage 和 Text 属 性 , 前 者 是 错 误 信 息 , 主 要 用 于 为 ValidationSummary 控件提供收集汇总的错误信息;后者是用于在验证控件处显示错误的提示文 本。如果 Text 属性为空,则验证控件处也会使用 ErrorMessage 属性进行显示。同时设置了 Text 和 ErrorMessage,验证控件处显示 Text 属性,ValidationSummary 控件显示 ErrorMessage 属性。
第一步,新建项目:在VS中新建asp.net web项目,这里命名为【WebApplication6】,右键单击项目名称【WebApplication6】, 依次点击【添加】→【添加Web窗体】,在弹出的【指定项名称】窗口中,使用默认的命名WebForm1,然后单击【确定】
第二步,设计页面:设计一个登陆页面,将默认打开的WebForm1.aspx文件切换到【设计】模式,从工具箱里拖两个TextBox控件和一个Button控件、一个Label控件。
第三步,设置控件属性:将WebForm1.aspx文件切换到【源】模式,修改三个控件的属性
第四步,给按钮添加点击事件:将WebForm1.aspx文件切换到【设计】模式,双击【登录】按钮,进入该按钮的点击事件,编写代码
第五步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】
发现,我们没有输入任何信息,点击【登录】按钮时,依然提示“登录成功”,显然不符合逻辑。
第六步,使用非空控件验证:将WebForm1.aspx文件切换到【设计】模式,从工具箱里找到非空验证控件RequiredFieldValidator,将它拖放到对应的位置,我们给两个TextBox控件后面各自拖放一个RequiredFieldValidator控件,进行验证。
第七步,设置非空控件的属性:选中控件以后,打卡属性面板进行设置,这个示例里有两个非空控件,依次进行设置
账号后面的非空控件:ControlToValidate属性为txtNuserName,ErrorMessage属性为“用户名不能为空”,ForeColor属性为Red。
密码后面的非空控件:ControlToValidate属性为txtPwd,ErrorMessage属性为“密码不能为空”,ForeColor属性为Red。
第八步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】
程序报错,问题原因:目前使用的VS2017所创建的ASP.NET应用程序的版本比较高,所以它的验证控件运行方式会有所不同,如果要解决这个问题按照高版本ASP.NET的设置方式会比较复杂,这里介绍一个简单的方式来解决。
解决办法:在解决方资源管理器中,双击文件名称Web.config,打开配制文件,删除一行代码
再次运行测试:
案例完整源代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>
验证控件—王迪
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 | 一个常数值,该值要与由用户输入到所验证的输入控件中的值进行比较。 |
要求:注册时一般要求输入两次密码,且两次密码要一致。
第一步,设计【确认密码】:在示例1的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱拖入一个TextBox控件到指定位置,并在属性面板设置TextBox控件的ID属性为txtPwdRepeat。
第二步,使用非空控件验证:从工具箱里找到非空验证控件RequiredFieldValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtPwdRepeat,ErrorMessage属性为“确认密码不能为空”,ForeColor属性为Red。(使用CompareValidator 比较控件时,必须使用RequiredFieldValidator非空控件进行配合)
第三步,使用CompareValidator控件:从工具箱里找到比较验证控件CompareValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtPwdRepeat,ControlToCompare属性为txtPwd,ErrorMessage属性为“密码不一致”,ForeColor属性为Red,Operator属性为Equal,Type属性为String。
控件源代码:由于Operator属性的默认值为Equal,Type属性的默认值为String,因此源代码里并没有体现出来。
确认密码:
第四步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。
案例延伸:CompareValidator 控件的 Type 属性也可以用于检查输入的类型,比如用户生日必须符合日期类型,使用CompareValidator 控件执行这种检查的方式是:移除 ValueToCompare 和 ControlToCompare 的值,并设置 Type 类型为 Date,设置 Operator 值为 DataTypeCheck。
RangeValidator 控件用于范围检查,常验证输入的值是否在指定的范围之内。可以对不同类型的值进行比较,比如数字、日期和字符。
除了与 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 控件必须在目标控件中有输入值时才进行验证,否则验证控件不 会被触发。其他验证控件同样不能在目标控件中输入为空时触发。
要求:注册要求输入的年龄在指定范围内。
第一步,设计【年龄】:在示例2的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱拖入一个TextBox控件到指定位置,并在属性面板设置TextBox控件的ID属性为txtAge。
第二步,使用RangeValidator控件:从工具箱里找到范围验证控件CompareValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtAge,ErrorMessage属性为“年龄输入有误,范围在0~120之间”,ForeColor属性为Red,MaximumValue属性为120,MinimumValue属性为0,Type属性为Integer。
控件源代码:
年龄:
第三步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。
案例分析:第一次测试时,年龄没有输入,但仍然提示登录成功。这是为什么?
解决办法:使用 RequiredFieldValidator 控件进行非空验证
正则表达式是一种描述格式模式的表达式。RegularExpressionValidator 控件验证目标控件中输入的值和正则表达式描述的 格式是否匹配,例如,验证用户输入的邮箱、邮编、电话号码等是否合法。
RegularExpressionValidator 控件提供了 ValidatorExpression 属性,指定匹配目标控件 格式的正则表达式。ASP.NET 中内置了几个常用的正则表达式,我们只需要在属性窗口中,选择 控件的 ValidatorExpression 属性,并单击右侧的“ ”按钮,就可以打开正则表达式编辑器, 在其中选择使用内置的正则表达式。
要求:注册要求输入的邮箱符合规范。
第一步,设计【邮箱】:在示例3的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱拖入一个TextBox控件到指定位置,并在属性面板设置TextBox控件的ID属性为txtEmail。
第二步,使用非空控件验证:从工具箱里找到非空验证控件RequiredFieldValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtEmail,ErrorMessage属性为“邮箱不能为空”,ForeColor属性为Red。(使用RegularExpressionValidator 正则表达式控件时,必须使用RequiredFieldValidator非空控件进行配合)
第三步,使用RegularExpressionValidator控件:从工具箱里找到范围验证控件RegularExpressionValidator,将它拖放到对应的位置,并设置ControlToValidate属性为txtEmail,ErrorMessage属性为“邮箱格式不正确”,ForeColor属性为Red,
设置控件的 ValidatorExpression 属性,并单击右侧的“ ”按钮,就可以打开正则表达式编辑器, 在选择使用“Internet电子邮件地址”,会出现对应的验证表达式,然后点击【确定】。
控件源代码:
邮箱:
第四步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。
案例延伸:内置的正则表达式往往不能满足实际的需求,常用的正则表达式:
正则表达式
|
说明
|
^[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 位
|
非空、范围和比较验证控件提供了常用的验证功能,正则表达式控件则基于正则表达式提供 了强大的字符串规则验证功能,但仍然无法解决某些验证需求。为此,ASP.NET 中提供了 CustomValidator 控件,它是自定义验证控件,可以由程序员编写客户端脚本与服务器端脚本对 数 据 进 行 验 证 , 以 确 定 用 户 的 输 入 是 否 通 过 验 证 。
要求:要求验证用户输入的账号,是否存在。
第一步,使用CustomValidator 控件:从工具箱里找到自定义验证控件CustomValidator ,将它拖放到对应的位置,并设置ControlToValidate属性为txtUserName,ErrorMessage属性为“用户名已存在”,ForeColor属性为Red。
第二步,给控件绑定服务器端事件:选中CustomValidator控件后,点击属性面板事件图标,设置ServerValidate事件的名称,这里命名为IsUserNameExist。(直接在事件名称右侧的输入框里输入即可)
控件源代码:
账号:
第三步,编写ServerValidate事件:双击ServerValidate事件名称,自动打开WebForm1.aspx.cs文件,光标定位在ServerValidate事件中,直接编写代码。
//自定义控件的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,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。
第五步,设置按钮的点击事件:在第三步的基础上,WebForm1.aspx.cs文件里有之前写的按钮点击事件btnLogin_Click,修改事件代码。使用 Page.IsValid属性判断页面上的验证控件是否全部验证通过。
protected void btnLogin_Click(object sender, EventArgs e)
{
/*
* Page.IsValid属性,获取一个值,该值指示页面中的验证控件是否全部通过。
* 如果验证成功,则为 true;否则为 false。
* 若要使此属性返回 true,当前验证组中的所有验证服务器控件必须都验证成功。
*/
if (Page.IsValid)
{
this.Label1.Text = "登录成功";
}
}
第六步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。
ValidationSummary 控件用于显示网页中所有验证错误的摘要。在该控件中显示的错误消息是由每个验证控件的 ErrorMessage 属性规定的。如果未设置验证控件的 ErrorMessage 属性,就不会为那个验证控件显示错误消息。
ValidationSummary 控件常用属性如表所示。
属性
|
说明
|
DisplayMode
|
所有的错误信息显示的模式,包括三种。
为 List 时,显示为列表;
为 BulletList 时,显示为项目符合列表;
为 SingleParagraph 时,显示为单 行
|
HeaderText
|
显示在错误信息之前的提示信息
|
ShowSummary
|
是否在 ValidationSummary 控件处显示
|
ShowMessageBox
|
是否弹出 MessageBox 显示错误信息
|
第一步,使用ValidationSummary控件:在示例5的基础上,将WebForm1.aspx文件切换到【设计】模式,设计页面,从工具箱找到验证信息汇总控件ValidationSummary,将它拖放到对应的位置,设置ForeColor属性为Red,其他属性暂不设置。
第二步,运行测试:在解决方资源管理器中,右键单击文件名称WebForm1.aspx,点击【在浏览器中查看】。或者直接点击工具栏【启动】按钮。
第三步,修改源代码:想要实现每个控件后面不再提示错误信息,将WebForm1.aspx文件切换到【源】模式,修改控件的源文件。我们知道ValidationSummary控件显示的信息是从各个控件的ErrorMessage属性获取的,控件本身如果没有设置Text属性的时候,会默认显示ErrorMessage属性值。
两种实现方法:
①给每个控件添加Text属性,并设置值为*
②给每个控件开头和结束之间,添加*
预览效果:
第四步,修改ValidationSummary属性:以弹窗形式提示错误信息。将WebForm1.aspx文件切换到【设计】模式,点击验证信息汇总控件ValidationSummary,设置ShowSummary属性为false,设置ShowMessageBox属性为true。
预览效果:
示例练习 1 ~ 6 的完整代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>
验证控件—王迪
Page.IsValid 是 Page 对象的 IsValid 属性,该属性指示页面是否通过了验证,如果页面中的验证控件都通过了验证,则 Page.IsValid 属性值为 true,如果存在任何一个验证控件未通过验证,则 Page.IsValid 属性值为 false。
参照: 示例练习 5
在某些特定条件下,程序员需要避开验证。如:填写表单的页面中存在“清空”按钮,单击 “清空”按钮时,用户可以将填写中的表单清空重填,而不是验证用户的输入。此时可以通过设置“清空”按钮的“CausesValidation”属性为“false”,禁用验证。
除了使用按钮的“CausesValidation”属性禁用验证之外,还可以将验证控件的“Enable” 属性设置为“false”来禁用单个验证控件。只需要禁用验证控件的客户端验证时,设置验证控 件的“EnableClientScript”属性为“false”
在 ASP.NET 的 WebForm 开发模式中,封装了 FileUpload 控件,可以方便的进行文件上传操作。FileUpLoad 常用的成员如表 所示。
成员名称 | 成员类型 | 说明 |
FileName
|
属性 |
获取客户端使用 FileUpload 控件上载的文件名称,不包括路径
|
HasFile | 属性 | 获取一个布尔值,用于表示FileUpload控件是否已经包含一个文件 |
PostedFile | 属性 | 获取一个与上传文件相关的HttpPostedFile对象,使用该对象可以获取上传文件的相关属性;(ContentLength上传文件的大小,ContentType文件类型,FileName获得上传文件在客户端的完整路径) |
SaveAs(String filename) | 方法 | 参数filename是指保存在服务器中的上传文件的绝对路径,在调用SaveAs方法之前,先判断HasFile属性是否为true |
要求:页面实现上传图片功能,并将上传的图片显示在页面上
第一步,新建Web窗体:在示例6的基础上,在解决方案资源管理器窗口中,右键单击网站项目【WebApplication6】, 依次点击【添加】→【Web窗体】,弹出【指定项名称】的窗口,这里采用默认命名“WebForm2”,然后单击【确定】。
第二步,设计Web窗体:将WebForm2.aspx文件切换到【设计】模式,设计页面,从工具箱找到控件,并设置各自属性。
控件源代码:
第三步,新建文件夹:一个网站中,可能会有许多上传图片,为了方便统一管理,首先在网站中创建 “UploadPic” 文件夹。方法:右键单击项目名称【WebApplication6】, 依次点击【添加】→【新建文件夹】,然后将文件夹名称改为UploadPic即可。
第四步,给按钮添加点击事件:双击按钮【上传】,进入WebForm2.aspx.cs文件,光标停在按钮的点击事件btnUpload_Click中,编写代码。代码功能:点击按钮时先判断FileUpload控件里是否有文件路径,然后判断上传的文件是否图片类型。如果上传成功,将上传的图片显示在图片控件里。
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里。查看方法,点击解决方案资源管理器右侧的,然后点击【显示所有文件】图标,即可看到。
====================这里是结束分割线======================