Web程序设计--ASP.NET上机实验指导(第3版微课版21世纪高等学校计算机专业核心课程规划

作者简介

内容简介

ASP.NET窗体验证 一、实验目的 　　（1）理解客户端和服务器端验证。 　　（2）掌握ASP.NET各验证控件的使用。 　　（3）掌握分组验证的方法。 二、实验内容及要求 　　1．设计并实现一个带验证控件的用户注册页面 　　要求如下： 　　（1）页面浏览效果如图5-1和图5-2所示。 　　（2）“用户名”“密码”“确认密码”“生*”“电话号码”和“身份证号”等信息必须输入。 　　（3）“密码”和“确认密码”的输入值必须一致。 　　（4）“生*”的输入值必须在1900-1-1到2020-1-1之间。 　　（5）“电话号码”的输入信息格式必须如021-66798304形式。 　　（6）“身份证号”中的出生年月信息必须为合法的*期数据。 　　（7）能汇总显示所有的验证错误信息，并以独立的对话框显示。 　　（8）当验证控件出现验证错误时，焦点会定位在出现验证错误的文本框中。 　　（9）若通过所有的验证，则显示“验证通过！”的信息。 图5-2 “用户注册验证页面”浏览效果（2） 　　2．设计并实现同一个页面的分组验证功能 　　要求如下： 　　（1）页面浏览效果如图5-3所示。 　　（2）如图5-4所示，当单击“用户名是否可用”按钮时，仅对“用户名”进行验证。 图5-3 “分组验证页”浏览效果（1） 图5-4 “分组验证页”浏览效果（2） 　　（3）如图5-5和图5-6所示，当在“用户名”文本框中输入leaf，再单击“用户名是否可用”按钮时输出“抱歉！该用户名已被占用！”的信息；当在“用户名”文本框中输入其他信息，再单击“用户名是否可用”按钮时输出“恭喜！该用户名可用！”的信息。 图5-5 “分组验证页”浏览效果（3） 图5-6 “分组验证页”浏览效果（4） 　　（4）如图5-7所示，当单击“确定”按钮时，对“密码”“确认密码”“生*”“电话号码”和“身份证号”进行验证。 图5-7 “分组验证页”浏览效果（5） 三、实验步骤 　　1．设计并实现一个带验证控件的用户注册页面 　　（1）安装并配置jQuery。 　　① 参考实验2在ExSite网站中利用NuGet程序包管理器安装jQuery。若在实验2中已安装jQuery，则略过本步骤。 　　② 在ExSite网站根文件夹中建立**obal.asax文件（全局应用程序类文件），并在网站启动时执行的Application_Start()方法中添加代码如下： 　　 　　ScriptResourceDefinition scriptResDef = new ScriptResourceDefinition(); 　　//设置jQuery提供的J**aScript库路径，其中版本号由安装的jQuery版本号确定 　　scriptResDef.Path = "～/Scripts/jquery-3.2.1.min.js"; 　　ScriptManager.ScriptResourceMapping.AddDefinition("jquery", scriptResDef); 　　 　　（2）设计Web窗体。 　　在ExSite网站根文件夹下建立Ex5文件夹，再在Ex5文件夹中添加一个Web窗体Register.aspx，切换到“设计”视图。如图5-8所示，向页面添加一个用于页面布局的6行3列表格。在相应的单元格中输入“用户名：”“密码：”“确认密码：”“生*：”“电话号码：”和“身份证号：”，并设置这些单元格的style属性，使得文本的对齐方式为右对齐；在相应的单元格中共添加六个TextBox控件、六个RequiredFieldValidator控件、一个CompareValidator控件、一个RangeValidator控件、一个RegularExpressionValidator控件和一个CustomValidator控件。适当调整各单元格的宽度。在表格下面添加Button、Label和ValidationSummary控件各一个。 图5-8 带验证控件的用户注册设计界面 　　（3）设置各控件的属性。 　　Web窗体中各控件的属性设置如表5-1所示。 　　表5-1 各控件的属性设置表 控 件 属 性 名 属 性 值 说 明 TextBox ID txtName “用户名”文本框的编程名称 RequiredFieldValidator ID rfvName “必须输入验证”控件的编程名称 ControlToValidate txtName 验证“用户名”文本框 Display Dynamic 只有验证未通过时才占用空间 ErrorMessage 请输入用户名！ 验证未通过时在“汇总验证”控件中显示的错误信息 SetFocusOnError True 验证未通过时将焦点定位到“用户名”文本框 Text * 验证未通过时提示的错误信息 TextBox ID txtPassword “密码”文本框的编程名称 TextMode Password 设置“密码”文本框为密码模式 续表 控 件 属 性 名 属 性 值 说 明 RequiredFieldValidator ID rfvPassword “必须输入验证”控件的编程名称 Display Dynamic 只有验证未通过时才占用空间 ControlToValidate txtPassword 验证“密码”文本框 ErrorMessage 请输入密码！ 验证未通过时在“汇总验证”控件中显示的错误信息 SetFocusOnError True 验证未通过时将焦点定位到“密码”文本框 Text * 验证未通过时提示的错误信息 TextBox ID txtPasswordAgain “确认密码”文本框的编程名称 TextMode Password 设置“确认密码”文本框为密码模式 RequiredFieldValidator ID rfvPasswordAgain “必须输入验证”控件的编程名称 ControlToValidate txtPasswordAgain 验证“确认密码”文本框 Display Dynamic 只有验证未通过时才占用空间 ErrorMessage 请输入确认密码！ 验证未通过时在“汇总验证”控件中显示的错误信息 SetFocusOnError True 验证未通过时将焦点定位到“确认密码”文本框 Text * 验证未通过时提示的错误信息 CompareValidator ID cvPassword “比较验证”控件的编程名称 ControlToCompare txtPassword 与“密码”文本框比较 ControlToValidate txtPasswordAgain 验证“确认密码”文本框 Display Dynamic 只有验证未通过时才占用空间 ErrorMessage 密码与确认密码不一致！ 验证未通过时在“汇总验证”控件中显示的错误信息 SetFocusOnError True 验证未通过时将焦点定位到“确认密码”文本框 TextBox ID txtBirthday “生*”文本框的编程名称 RequiredFieldValidator ID rfvBirthday “必须输入验证”控件的编程名称 ControlToValidate txtBirthday 验证“生*”文本框 Display Dynamic 只有验证未通过时才占用空间 ErrorMessage 请输入生*！ 验证未通过时在“汇总验证”控件中显示的错误信息 《Web程序设计——ASP.NET上机实验指导（第3版)—微课版》由“实验目的”、“实验内容及要求”、“实验步骤”和“实验拓展”组成，采用“任务驱动”方式设计，突出技术应用能力培养，**学生从“跟着走”到“自己走”的转变。