项目四应用验证控件任务一完成注册界面的设计任务一完成注册界面的设计【任务要点】常用验证服务器控件的使用【案例1】制作提交内容必填的注册页面某网页要求学生提交学号和专业,要求两项内容必填。若用户没有在文本框中输入学号或没有通过下拉列表框选择专业,则显示出错提示,显示图4-1所示的Web页面,程序正常运行时显示图4-2所示的结果。下一页返回任务一完成注册界面的设计【具体步骤】1.设计Web页面新建一个ASP.NET网站,向页面中添加必要的控件说明文字,添加一个按钮控件Button1;一个文本框控件TextBox1;一个下拉列表框控件DropDownList1和两个必须项验证控件RequiredFieldValidator1、RequiredFieldValidator2,注意将验证控件放置在被验证控件的右侧。2.设置对象属性Web页面中各控件的初始属性设置,见表4-1。下一页返回上一页任务一完成注册界面的设计Web页面加载时执行的事件过程代码如下:protectedvoidPage_Load(objectsender,EventArgse){dropSpec.Items.Add(--请选择专业--);//填充专业下拉列表框中的选项dropSpec.Items.Add(网络技术);dropSpec.Items.Add(软件工程);dropSpec.Items.Add(多媒体应用);dropSpec.Items.Add(计算机维修);this.Title=必须项验证控件应用示例;//设置页面标题}下一页返回上一页任务一完成注册界面的设计单击【提交】按钮时执行的事件过程代码如下:protectedvoidbtnOK_Click(objectsender,EventArgse){//将用户的选择显示到标签控件中lblResult.Text=你的学号是:+txtNum.Text+br+你的专业是:+dropSpec.Text;}下一页返回上一页任务一完成注册界面的设计【案例2】利用比较验证控件来制作注册页面设计一个模拟的用户注册页面,要求使用比较验证控件(CompareValidator)对用户输入密码和确认密码的一致性、日期数据格式的正确性进行比较验证,使用必须项验证控件(RequiredFieldValidator)设置用户名及密码为必填字段。程序运行结果如图4-3和图4-4所示。下一页返回上一页任务一完成注册界面的设计【具体步骤】1.设计Web页面新建一个ASP.NET网站,切换到设计视图。向由系统自动创建的Default.aspx页面中添加一个用于布局的HTML表格,适当调整表格的行列数;向表格中添加必要的控件说明文字;添加四个用于接收用户输入数据的文本框TextBox1~TextBox4;两个按钮控件Button1、Button2;一个用于显示通过验证信息的标签控件Label1;添加两个必须项验证控件RequiredFieldValidator1和RequiredFieldValidator2,两个比较验证控件CompareValidator1、CompareValidator2,注意将必须项验证控件分别放置在用户名栏和密码栏的右侧单元格,将比较验证控件分别放置在确认密码和出生日期栏的右侧单元格;适当调整各控件的大小及位置。下一页返回上一页任务一完成注册界面的设计2.设置对象属性各控件的初始属性设置见表4-2。3.编写事件代码protectedvoidPage_Load(objectsender,EventArgse){this.Title=CompareValidator控件应用示例;txtUsername.Focus();//页面加载时,用户名文本框得到焦点lblPass.Text=;//清除通过验证标签中的文本}protectedvoidbtnOK_Click(objectsender,EventArgse){lblPass.Text=本页已通过验证!;//通过验证后在标签中显示的信息}下一页返回上一页任务一完成注册界面的设计【案例3】利用范围验证控件来制作数值录入页面使用RangeValidator控件验证用户输入学生成绩的数值范围,用户输入数据被验证通过时页面中显示如图4-5所示的结果。若用户没有输入学号或输入了不合逻辑的成绩值,则显示如图4-6所示的出错提示信息。下一页返回上一页任务一完成注册界面的设计【具体步骤】1.设计Web页面新建一个ASP.NET网站,如图4-7所示,向页面中添加必要的控件说明文字,两个文本框控件TextBox1、TextBox2;一个按钮控件Button1。在用于输入学生学号的文本框后面添加一个必须项验证控件RequiredFieldValidator1,在用于输入学生成绩的文本框后面添加一个范围验证控件RangeValidator1。2.设置对象属性各控件的初始属性设置见表4-3。下一页返回上一页任务一完成注册界面的设计3.编写事件代码页面装入时执行的事件过程代码如下:protectedvoidPage_Load(objectsender,EventArgse){this.Title=范围验证控件应用示例;txtNum.Focus();lblMsg.Text=;}下一页返回上一页任务一完成注册界面的设计单击【提交】按钮时执行的事件代码如下:protectedvoidbtnOK_Click(objectsender,EventArgse){lblMsg.Text=姓名:+txtNum.Text+ +成绩:+txtScore.Text;}下一页返回上一页任务一完成注册界面的设计【案例4】制作用户不能含有汉字、密码为6~12位及对邮箱格式进行验证的注册页面。【具体步骤】1.设计Web页面新建一个ASP.NET网站,向由系统自动产生的默认页面中添加一个HTML表格,参照图4-11适当调整HTML表格的行列数及行高、列宽。向HTML表格中添加需要的控件说明文字,向页面中添加三个文本框控件TextBox1~TextBox3;添加一个按钮控件Button1和一个用于输出验证是否通过信息的标签控件Label1;分别在用户名文本框和密码文本框的右侧各添加一个自定义验证下一页返回上一页任务一完成注册界面的设计控件CustomValidator1、CustomValidator2;在电子邮件文本框右侧添加一个正则表达式验证控件RegularExpressionValidator1;适当调整各控件的大小和位置。2.设置对象属性各控件的初始属性设置见表4-4。3.编写事件代码下一页返回上一页任务一完成注册界面的设计【背景知识】数据验证机制介绍数据验证服务器控件可以提供易用但功能强大的方法检查输入窗体中的错误,并在必要时向用户显示消息。验证控件像其他服务器控件一样添加到Web窗体页。有不同的控件用于特定的验证类型,如范围检查或模式匹配,以及确保用户不跳过输入字段的RequiredFieldValidator等。可以将多个验证控件附加到一个输入控件。例如,可以既指定需要输入,又指定输入必须包含特定范围的值。表4-5列出了所有的验证控件。接下来将分别详细介绍这些控件的使用方法。下一页返回上一页任务一完成注册界面的设计在处理用户的输入时(如提交窗体时),Web窗体页框架将用户的输入传递给关联的验证控件。验证控件测试用户的输入,并设置属性以指示输入是否通过了验证测试。处理完所有的验证控件后,将设置页上的IsValid属性。如果有任何控件显示验证检查失败,则整页设置为无效。如果验证控件有错误,错误信息可由该验证控件显示在页中,或者显示在页上其他地方的ValidationSummary控件中。当页的IsValid属性为False时,显示ValidationSummary控件。它轮询页上的每个验证控件,并聚合每个控件公开的文本消息。可以验证的Web服务器控件见表4-6。返回上一页表4-1各控件的初始属性设置返回表4-2各验证控件的初始属性设置返回下一页表4-2各验证控件的初始属性设置返回上一页表4-3各验证控件的初始属性设置返回表4-4各控件的初始属性设置返回表4-5验证控件的类型返回表4-6可以验证的Web服务器控件返回图4-1未通过验证时显示的出错信息返回图4-2正常运行结果返回图4-3通过验证返回图4-4出错提示返回图4-5通过验证后显示的输出信息返回图4-6未通过验证时显示的出错提示返回图4-7设计Web页面返回图4-11设计Web页面返回