Web程序设计实验指导书1116

图3-2 “用户注册验证”浏览效果（2）

2.设计并实现同一个页面的分组验证功能 要求如下：

(1)页面浏览效果如图3-2所示

图3-3 “分组验证”浏览效果（1）

(2) 如图3-4所示，当点击“用户名是否可用”按钮时，仅对“用户名”进行验证。

图3-4 “分组验证”浏览效果（2）

(3) 如图3-5和图3-6所示，当在“用户名”文本框中输入jxssg，再单击“用户名是否可用”按钮时输出“抱歉！该用户名已被占用！”的信息；当在“用户名”文本框中输入其它信息，再单击“单击用户名是否可用”按钮时输出“恭喜！该用户名可用！”的信息。

图3-5 “分组验证”浏览效果（3）

图3-6 “分组验证”浏览效果（4）

(4) 如图3-7所示，当单击“确定”按钮时，对“密码”、“确认密码”、“生日”、“电话号码”和“身份证号”进行验证。

图3-7 “分组验证”浏览效果（5）

三.实验步骤

1. 设计并实现一个带验证控件的用户注册页面 （1）设计Web窗体

新建一个Web窗体，切换到设计视图。如图3-8所示，向页面输入“用户名”、“密码：”、“确认密码：”、“生日：”、“电话号码：”和“身份证号：”等信息；添加6个TextBox控件、6个RequiredFieldValidator控件、1个CompareValidator控件、1个RangeValidator控件、1个RegularExpressionValidator控件、1个CustomValidator控件，1个Botton控件、1个Label控件和1个ValidatorSummary控件。适当调整个控件的位置和大小。

图3-8 设计界面（1）

（2）设置属性

Web窗体中各控件的属性设置如表3-1所示。

表3-1 各控件的属性设置表

控件 TextBox RequiredFieldValidator 属性名 ID ID 属性值 txtName rfvName 说明 “用户名”文本框的编程名称 “必须输入验证”控件的编程名称 验证“用户名”文本框 验证无效时在“汇总验证”控件中显示的错误信息 验证无效时将焦点定位到“用户名”文本框 验证无效时提示的错误信息 “密码”文本框的编程名称 设置“密码”文本框为密码模式 “必须输入验证”控件的编程名称 验证“密码”文本框 验证无效时在“汇总验证”控件中显示的错误信息 验证无效时将焦点定位到“密码”文本框 验证无效时提示的错误信息 “确认密码”文本框的编程名称 设置“确认密码”文本框为密码模式 ControlToValidate ErrorMessage txtName 请输入用户名 SetFocusOnError True Text TextBox ID TextMode * txtPassword Password RequiredFieldValidator ID rfvPassword ControlToValidate ErrorMessage txtPassword 请输入密码 SetFocusOnError True Text TextBox ID * txtPasswordAgain TextMode Password RequiredFieldValidator ID rfvPasswordAgain “必须输入验证”控件的编程