（二）.net学习之表单验证validator

以你之姓@ 2022-04-16 06:26 399阅读 0赞

表单验证是很常见的，一般除了前端需要验证数据是否为空，还需要验证数据格式是否符合要求，一般使用正则表达式验证，当然，除了前端，后端一般也需要将数据进行验证，比如客户端（浏览器）将js等前端脚本禁用，点击提交，那么不符合规范的数据就会提交到后台，这回导致系统出现问题。

.net中提供了常用的validator

# 通用的属性是： #

1.  **CtrolToValidate**：也就是指待验证的控件id，可以是TextBox,也可以是其他的一些控件
2.  ErrorMessage：也就是这个验证出现不符合验证需求时，需要显示的提示信息
3.  Display:可取值Static和Dynamic和None,一个是固定位置，另一个是动态位置（如果前面有空格，会移动到前面）另一个是无，也就是不显示
4.  ValidationGroup：验证组，其他控件也有，比如button，可以多个控件使用同一个ValidationGroup值，以组为单位进行验证，后面demo会用到
5.  Text属性：未通过验证时验证控件所在位置的显示数据，如果不指定就会显示errorMessage的内容  
    ![20181118205644284.png][]
6.  SetFocusOnError:设置光标在验证不通过时，移动到该控件校验的内容所在位置

其余还有很多，不在此一一列举。

# 基本的校验控件 #

比如：

## CompareValidator： ##

可以验证值的大小(比如数字大小），值的类型，比如时间格式（date），

特有属性：**ControlToCompare**，指的是“待比较”的控件id，比如在比较时间格式是否符合Date时，通常在TextBox中输入数据，先使用RequiredFieldValidator验证是否输入为空，然后再添加一个compareValidator验证data type是否为Date(由于compareValidator同时拥有属性ControlToCompare和ControlToValidate这两个属性，如果id都指向同一个输入时间的textbox的话，会抛异常，所以通常使用一个隐藏的textbox来暂存时间输入框中的值，ControlToCompare就指向这个隐藏的textbox即可达到验证时间格式的问题。

## RangeValidator： ##

范围验证，比如输入的数据长度,比如数字大小是否在某一个区间，

特有属性也就是**MaximumValue和MiniumValue**,还有个是**Type，**表明这个Max和Min是来描述什么类型，或者是什么属性的范围，比如字符个数，还是数字大小

## RegularExpressionValidator: ##

正则表达式验证，通过指定的正则表达式，来验证数据是否符合要求，.net自带的有电话格式验证，邮箱格式验证等等

特有属性就是：ValdationExpression，正则表达式串

## **ValidationSummary:** ##

**这个控件的作用就是将一个页面上的或者是一个group中的所有validator不通过的errorMessage集中显示的控件**

# **demo：** #

**使用一个简单demo将上面的几种控件基本都用到了**

本demo思路，当用户点击按钮“save”时将表单提交到后端，触发表单验证

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70][]

Error message 1.这个位置是使用了一个ValidationSummary控件，效果效果是这样的

### 如果都不输入(RequireFieldValidator)： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1][]

### 日期格式输入异常(CompareValidator)： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2][]

### coverage输入非数字(RegularExpressionValidator)： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3][]

## 分组验证(ValidationGroup)     ##

如果使用的分组验证，那么表单的“save”按钮，需要添加属性ValidationGroup=“123”来触发组验证，否则即使在ValidationSummary指定了valiodationGroup属性，点击save，也不会显示相应组的messageError，ValidationSummary只会显示在同一个ValidationGroup的验证控件相关的error message

<asp:Button ID="saveButton" runat="server" Text="Save" OnClick="saveButton_Click" ValidationGroup="123" />

将Name的textBoX的ValidationGroup属性设置为 “123”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4][]

ValidationSummary的ValidationGroup也设置为“123”

![20181118204257481.png][]

save按钮的ValidationGroup也设置为“123”

![20181118204140317.png][]

不输入name，然后点击save

测试：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5][]

输入name,**不在save 按钮所在ValidationGroup的Validator不生效**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 6][]

# 表单提交问题：验证未通过也能提交？？？ #

按照常理来说，前端页面先执行validator的验证，如果是通过，才能执行提交按钮的处理程序，到那时博主在做这个demo学习时，发现即使表单验证为未通过，也能提交到后台！！！

原因：当时使用较高版本的.net，是4.5.1,启动页面提示需要配置jquery，当时网上寻找方法，找到一个是将校验控件的属性EnableClientScript置为false，导致客户端验证脚本没有执行

.net的validator会在客户端自动生成相关的验证js，禁用客户端脚本自然就前端验证没有作用了。

解决：方法1：降低.net 版本，为4，并且设置EnableClientScript属性为true。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 8][]

方法2：添加jquery库，前端页面需要映入validator的js库

[20181118205644284.png]: /images/20220416/79836f8796fb408ea55cba401c3af80f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70]: /images/20220416/e0b1d4c830db4663990b10c069f79c2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 1]: /images/20220416/266940c1208640589c6fb4f94be371c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 2]: /images/20220416/e736611a09ec44059a8f5af43dd2ef39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 3]: /images/20220416/f1f8262d236742cabaca3ccaed892095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 4]: /images/20220416/52957383569f4e7cb81407b8c61b5df6.png
[20181118204257481.png]: /images/20220416/f5dffaf69503426dbf60f3329ccf9600.png
[20181118204140317.png]: /images/20220416/a2c19a7b0e864b819333aceec49403dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 5]: /images/20220416/bd05ac1c7048448bb2c874456825c6f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 6]: /images/20220416/47ec140ac36143bb8b8581902a295cb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 7]: /images/20220416/20ebed36d2b24b00bac21ca1b767e0f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2OTIyOTI3_size_16_color_FFFFFF_t_70 8]: /images/20220416/02ae544dd534469080d02e5992561e2b.png