表单作业：

（1） 新建一个web窗体
（2） 为了页面好看，可以创建一个表格，将上述插件放到表格里
（3） 在设计视图中，vs最上面一栏工具栏中有工具 表—插入表格，根据要求，插入一个八行三列的表格

（4） 根据图片上的要求，第一行和最后一行只有一格，下面来把他们改成那样的。选中第一行，点击表—修改—合并单元格，第八行重复上述操作

（5） 下面，按照图片要求输入文字、放入插件（第二列的）

（6） 如果感到布局不是很好看，可以选中整个表格，然后选择居中

这样居中是整个表居中，如果想让第一行和最后一行的Button在正中间的话就分别选中他们，然后居中

（7） 然后我们先不着急继续往下做，先分析一下每一行后面是要使用什么验证控件

• 用户名后面是判断是否为空的返回信息，所以是RequiredFieldValidator控件
• 密码后是说他的格式、长度不对，所以是RegularExpressionValidator插件
• 确认密码是跟密码比较之后，不一样返回密码不一致的信息，所以是CompareValidator控件
• 出生日期是限制为date格式，并且在一定的时间范围之内，所以是RangeValidator控件
• 电子邮箱是判断了电子邮箱的格式，所以是RegularExpressionValidator控件
• 联系电话是手机号位数不对，所以是CustomValidator控件

（8） 分别给各行添上插件并修改插件属性
a) 用户名
RequiredFieldValidator控件，修改错误返回信息为 输入用户名，修改控制的插件是TextBox1

b) 密码
RegularExpressionValidator插件，修改错误返回信息，修改控制的插件，修改ValidationExpress为自定义的正则表达式，表达式为 ¹\w{5,17}$

c) 确认密码
CompareValidator控件,修改错误返回信息，修改控制的插件，ControlToCompare是和谁比较，选择密码的那一个插件TextBox2

d) 出生日期
RangeValidator控件，修改错误返回信息，修改控制的插件，修改TextBox里的数据类型为date型，修改最大值和最小值

e) 电子邮件
RegularExpressionValidator控件，修改错误返回信息，修改控制的插件，ValidationExpress为电子邮件的格式

f) 联系电话
CustomValidator控件，修改错误返回信息，修改控制的插件，切换到源视图下，在代码页面的顶部写一个自定义的脚本函数。

把自定义脚本中的myValidate复制到设计视图CustomValidator1中有一个ClientValidationFunction属性中，设置为这个函数的名称，然后EnableClientScript属性（表示启用客户端验证）设置为true（默认就是true）

g) 至此，表单是这样的

h) 运行验证

i) 还可以修改密码和确认密码的TextMode为password，这样的话，在网页输入密码就不会有回显

拓展：
1、加入一行性别
（1）选择确认密码这一行，在这一行下面添加一行表格

（2）第一个格输入性别，然后放入两个RadioButton，修改两个RadioButton的Text属性分别为男、女，然后修改两个RadioButton的GroupName，改成同一个名字就行这样的话就只能二选一

（3）运行调试

确实只能二选一
2、添加一个错误汇总
使用ValidationSummary控件
（1） 在提交按钮这一行下面添加一行表格，然后直接拖入ValidationSummary控件

（2） 设置ShowMessageBox属性设置为true（用弹窗方式）

（3） 运行验证

因为手机号本来就用的弹窗，所以手机号的弹窗会先弹出来
（4） 修改手机号的单独弹窗，将源视图中的代码修改为如下图中所示，并且不要忘记修改ClientValidationFunction的属性为主函数的名字

（5） 运行验证

我们可以看到已经修改成功了
3、添加一个多选
（1）切换到设计视图，选择一行，在其下面再插入一行

（2）第一格为多项选择，第二格添加四个CheckBox，并修改他们的Text分别为A、B、C、D

（3）运行验证

4、修改背景色
选中整个表单，点击背景色 ，选择你想要修改成的颜色，修改背景色

---

1. a-zA-z ↩︎