文章教程

5.3验证控件

8/31/2020 9:37:14 PM 人评论 次浏览

5.3 验证控件

在程序开发过程中,为了程序运行得更加稳定,减少服务器的压力和对于网络带宽的占用,减少客户在输入后服务器控件验证所占用的时间,提高用户的体验效果。所有需要对用户的输入数据在客户端首先提交前进行本地的数据校验。编译器提供了一些验证控件。这些控件有助于开发人员完成这些操作。

5.3.1 验证控件介绍

在Web应用程序中,大都是对数据的提供或收集,其实对于数据的有效性验证是非常重要的,验证就是给所收集的数据应用提供一系列规则。

为进行有效性验证而收集的数据来自于在应用程序中提供的Web窗体,Web窗体由不同的类型的HTML元素组成,可以对窗体元素应用不同的验证规则,对元素应用的规则越多,应用到数据上的有效性验证就越严格。

验证可以有客户端和服务器端的验证。客户端的验证主要用JavaScript脚本,效率高,响应时间短,但安全性不好;服务器端的验证主要是用C#语言在后台验证,安全性高了,但每次提交都要把数据传到后台,太慢。

ASP.NET不仅把窗体的验证作为服务器控件引入,还使这些控件智能化。如果浏览器支持JavaScript,而ASP.NET可以发送JavaScript,验证就在客户端进行;如果客户机不支持用于验证的JavaScript,这些JavaScript就被忽略,验证就在服务器上进行。

在编译器中提供了五种验证控件和一种验证信息显示控件,这些控件可以绑定到具体的验证控件上自动验证输入的信息,通过表5-15可以看到验证控件都有哪些不同的特点和用途。

表5-15 验证控件的特点和用途

alt

5.3.2 验证控件的基类BaseValidator

BaseValidator类为验证控件的基类,为验证控件提供公共的属性、方法和事件的基础。验证控件用于验证关联的输入控件中用户输入的信息。当用户输入的值未通过验证时,验证控件将显示错误消息。由于验证控件是与输入控件分开的,所以可以将错误消息定位在页面上相对于输入控件的任意位置。

验证控件始终验证服务器上关联的输入控件。它还具有完整的客户端实现。客户端验证通过在向服务器发送用户输入前检查用户输入来增强验证过程,以使信息准确。这样首先采用客户端本地验证的方式,从而避免了服务器端验证所需要的信息往返。

多个验证控件可以与同一输入控件一起使用验证不同的判据。例如,可以在TextBox控件上应用多个验证控件;可以使用RangeValidator控件确保在TextBox控件中输入的值在设置的范围内;还可以使用RequiredFieldValidator控件确保用户输入了值。表5-16~表5-18所示基类的详细属性说明。

表5-16 BaseValidator基类的属性

alt

表5-17 BaseValidator基类的方法

alt

表5-18 BaseValidator基类的事件

alt

以上表格中的内容只是属性、方法和事件中的一部分,这些属性对于了解和使用控件会有很大帮助。

5.3.3 使用RequiredFieldValidator强制用户输入

RequiredFieldValidator控件是强制用户输入验证的,就是非空验证控件,该控件绑定到输入框之类的控件上后,用户输入内容才能通过验证,这样的控件一般用在用户名或密码等必须强制输入的地方。下面通过代码来看下具体的操作,代码如下。

alt

运行效果如图5-13所示。

alt

图5-13 强制用户输入控件的验证效果

在单击按钮后,如果用户没有在对应的绑定文本框中输入内容,将不能通过验证,如果用户输入了内容,将通过验证,显示输入的内容如图5-14所示。

alt

图5-14 通过验证的信息显示

这样就能够完成对用户输入信息的强制验证,也能够友好地提示用户应该输入那些信息,从而完成了对数据的完整性及程序运行稳定性的要求。

5.3.4 使用RangeValidator控件指定输入范围

RangeValidator控件是指定输入范围的验证控件,如年龄范围、价格范围等。下面通过代码演示具体操作。

alt

在输入数据不满足条件时,验证控件的运行结果如图5-15所示。

alt

图5-15 范围验证控件输入错误时的结果

输入正确时,验证控件将通过验证,并输出提交的结果,如图5-16所示。

alt

图5-16 用户信息输入正确验证通过

在这个验证控件中设定了验证类型Type="Integer"属性,设定最大值为20,最小值为10的属性,这样,验证的范围就是数值类型,最大值为20,最小值为10。ErrorMessage="范围10-20"属性为提示信息,在用户输入超出范围时,将显示提示信息。

5.3.5 使用CompareValidator比较值

CompareValidator验证控件为比较值验证控件,使用在重复值验证的界面中,如用户注册过程。在输入密码和验证密码时用到,当然也可以用在其他地方,如卡号等需要重复添加时,操作代码如下。

alt

运行结果如图5-17所示,当输入的两个内容不同时,出现值必须相同的提示。

alt

图5-17 比较控件运行结果

当两个文本框的内容一致时,输出文本框中的信息,如图5-18所示。

alt

图5-18 通过验证的结果

在比较控件中,只能比较两个控件的值,两个被比较的控件不能为空值,为空值将被认为通过验证,这里设置了ControlToCompare="TextBox1",为验证第一个控件ControlToValidate="TextBox2"为第二个控件,ErrorMessage="两个文本框的值必须相同",为验证控件的提示信息。设置了这些属性后验证控件就能够完成验证的基本操作了。

5.3.6 RegularExpressionValidator正则表达式验证

RegularExpressionValidator控件是用来验证字符串格式的控件,它能按照正则表达式规则验证字符串的格式,下面是具体操作。

alt

运行效果如图5-19、图5-20所示。当输入的格式不正确时,出现提示信息;当输入的数据满足要求时,则输出文本框中的内容。

alt

图5-19 正则表达式验证控件不能通过验证效果

alt

图5-20 通过验证的信息

这里设置了ErrorMessage="邮政编码格式"属性,为错误信息的提示。ControlToValidate="TextBox1"属性为绑定控件,ValidationExpression="\d{6}"属性为正则表达式的验证格式,系统为了方便开发,提供了一些预制好了的正则表达式,这样可以直接选用,也有助于用户对正则表达式的编辑,如图5-21所示。

alt

图5-21 系统预制的正则表达式

这个正则表达式验证控件能够帮助用户对输入信息做比较复杂的格式验证。

5.3.7 VustomValidator自定义验证

VustomValidator控件能够提供自定义信息的验证,它提供一个自定义的客户端脚本函数的调用接口,将自定义的函数名称属性设置为控件的属性,这样在调用时就能调用自己写的验证函数来完成自定义的信息验证。下面来看下具体的操作,代码如下。

alt

运行效果如图5-22所示。

alt

图5-22 自定义验证控件通过验证

这个验证控件也有服务器端的验证信息,但是对于服务器端的验证信息来说意义不大,主要是客户端验证。借助于JQuery等的插件可以对客户端输入的任何信息进行自己想要的任何验证。

5.3.8 使用ValidationSummary显示验证信息

ValidationSummary控件其实不是用于验证的,主要是将用户界面中的所有验证信息收集汇总后集中显示在固定的地方,代码如下。

alt

在上面的代码中添加了两种验证控件和一个汇总显示控件,运行结果如图5-23、图5-24所示。当正确输入信息时,可以正常显示文本框中的信息;当验证无法通过时,则不仅会显示验证控件的提示,还有一个汇总提示。

alt

图5-23 控件的运行结果

alt

图5-24 运行没有通过验证

5.3.9 使用ValidationGroup属性

ValidationGroup属性其实是一个分组属性,它可以将用户控件和验证控件分组验证,这样就不会影响其他验证控件的验证事件。现在来看具体的功能,设计代码如下。

alt

这里设计了三个控件,现在在没有设置ValidationGroup属性时,单击三个按钮中的任何一个,都将触发其他控件的验证事件,如果想要某一个控件对指定的验证控件发生验证事件,就要设置ValidationGroup属性,可以将按钮的ValidationGroup属性与验证控件的ValidationGroup属性设置为相同的,这样,就能使用指定的按钮对指定的验证控件发生作用。具体的设计代码如下。

alt

在设置了ValidationGroup属性后,每个按钮都将对预期相对应的验证控件发生作用,效果如图5-25所示。

alt

图5-25 在设置了ValidationGroup属性之后的运行效果

在全部完成输入后,运行效果如图5-26所示。

alt

图5-26 通过验证的运行效果

可以看到,在设置了ValidationGroup属性后,单独的按钮只对单独的验证控件发生作用,从而达到单独验证其中一个控件的目的。

5.3.10 编程使用验证控件

当前的验证控件全部都是服务器控件,也就是说,所有的验证控件都将可以在后台设置,可以发送到客户端来完成验证,或者不发生验证。可以使用页面的Validators集合来获得验证控件,也可以通过设置Enabled的属性来设置控件的启用与否,这样就可以达到动态设置验证控件的使用与否。不过这样的设置还是比较复杂的,要对服务器的集合和控件有一定的基础才能完成。其实可以使用编程的方式来动态的设置验证控件是否启用,代码如下。

alt

在界面放入两个复选框控件,分别设置了它们的属性和事件。在事件中分别设置了是否验证和是否允许客户端脚本执行,当用户选择禁用验证时,所有的验证控件都将被设置为不可用,还可以使用this.Validate();方法开启对页面中的验证控件的全部验证。

教程类别