项目四应用验证控件.ppt
项目四应用验证控件项目四应用验证控件 任务一完成注册界面的设计任务一完成注册界面的设计 任务一完成注册界面的设计任务一完成注册界面的设计【任务要点任务要点】常用验证服务器控件的使用常用验证服务器控件的使用【案例案例1】制作提交内容必填的注册页面制作提交内容必填的注册页面 某网页要求学生提交学号和专业，要求两项内容必填。若用某网页要求学生提交学号和专业，要求两项内容必填。若用户没有在文本框中输入学号或没有通过下拉列表框选择专业，则户没有在文本框中输入学号或没有通过下拉列表框选择专业，则显示出错提示，显示显示出错提示，显示图图4-1所示的所示的Web页面，程序正常运行时显示页面，程序正常运行时显示图图4-2所示的结果。所示的结果。下一页返回任务一完成注册界面的设计任务一完成注册界面的设计【具体步骤具体步骤】1.设计设计Web页面页面 新建一个新建一个ASP.NET网站，向页面中添加必要的控件说明文字，网站，向页面中添加必要的控件说明文字，添加一个按钮控件添加一个按钮控件Button1；一个文本框控件；一个文本框控件TextBox1；一个下拉；一个下拉列表框控件列表框控件DropDownList1和两个必须项验证控件和两个必须项验证控件RequiredFieldValidator1、RequiredFieldValidator2，注意将验证，注意将验证控件放置在被验证控件的右侧。控件放置在被验证控件的右侧。2.设置对象属性设置对象属性 Web页面中各控件的初始属性设置，见页面中各控件的初始属性设置，见表表4-1。下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计Web页面加载时执行的事件过程代码如下：页面加载时执行的事件过程代码如下：protected void Page_Load(object sender,EventArgs e)dropSpec.Items.Add(-请选择专业请选择专业-);/填充专业下拉列表框中的填充专业下拉列表框中的选项选项dropSpec.Items.Add(网络技术网络技术);dropSpec.Items.Add(软件工程软件工程);dropSpec.Items.Add(多媒体应用多媒体应用);dropSpec.Items.Add(计算机维修计算机维修);this.Title=必须项验证控件应用示例必须项验证控件应用示例;/设置页面标题设置页面标题下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计单击单击【提交提交】按钮时执行的事件过程代码如下：按钮时执行的事件过程代码如下：protected void btnOK_Click(object sender,EventArgs e)/将用户的选择显示到标签控件中将用户的选择显示到标签控件中 lblResult.Text=你的学号是：你的学号是：+txtNum.Text+你的专业你的专业是：是：+dropSpec.Text;下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计【案例案例2】利用比较验证控件来制作注册页面利用比较验证控件来制作注册页面 设计一个模拟的用户注册页面，要求使用比较验证控件设计一个模拟的用户注册页面，要求使用比较验证控件（CompareValidator）对用户输入密码和确认密码的一致性、日）对用户输入密码和确认密码的一致性、日期数据格式的正确性进行比较验证，使用必须项验证控件期数据格式的正确性进行比较验证，使用必须项验证控件（RequiredFieldValidator）设置用户名及密码为必填字段。程序）设置用户名及密码为必填字段。程序运行结果如运行结果如图图4-3和和图图4-4所示。所示。下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计【具体步骤具体步骤】1.设计设计Web页面页面 新建一个新建一个ASP.NET网站，切换到设计视图。向由系统自动创网站，切换到设计视图。向由系统自动创建的建的Default.aspx页面中添加一个用于布局的页面中添加一个用于布局的HTML表格，适当调表格，适当调整表格的行列数；向表格中添加必要的控件说明文字；添加四个整表格的行列数；向表格中添加必要的控件说明文字；添加四个用于接收用户输入数据的文本框用于接收用户输入数据的文本框TextBox1TextBox4；两个按钮；两个按钮控件控件Button1、Button2；一个用于显示通过验证信息的标签控件；一个用于显示通过验证信息的标签控件Label1；添加两个必须项验证控件；添加两个必须项验证控件RequiredFieldValidator1和和RequiredFieldValidator2，两个比较验证控件，两个比较验证控件CompareValidator1、CompareValidator2，注意将必须项验证控件分别放置在用户名栏，注意将必须项验证控件分别放置在用户名栏和密码栏的右侧单元格，将比较验证控件分别放置在确认密码和和密码栏的右侧单元格，将比较验证控件分别放置在确认密码和出生日期栏的右侧单元格；适当调整各控件的大小及位置。出生日期栏的右侧单元格；适当调整各控件的大小及位置。下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计2.设置对象属性设置对象属性 各控件的初始属性设置见各控件的初始属性设置见表表4-2。3.编写事件代码编写事件代码protected void Page_Load(object sender,EventArgs e)this.Title=CompareValidator控件应用示例控件应用示例;txtUsername.Focus();/页面加载时，用户名文本框得到焦点页面加载时，用户名文本框得到焦点 lblPass.Text=;/清除通过验证标签中的文本清除通过验证标签中的文本 protected void btnOK_Click(object sender,EventArgs e)lblPass.Text=本页已通过验证！本页已通过验证！;/通过验证后在标签中显示的信通过验证后在标签中显示的信息息下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计【案例案例3】利用范围验证控件来制作数值录入页利用范围验证控件来制作数值录入页面面 使用使用RangeValidator控件验证用户输入学生成绩的数值范围，控件验证用户输入学生成绩的数值范围，用户输入数据被验证通过时页面中显示如用户输入数据被验证通过时页面中显示如图图4-5所示的结果。若用所示的结果。若用户没有输入学号或输入了不合逻辑的成绩值，则显示如户没有输入学号或输入了不合逻辑的成绩值，则显示如图图4-6所示所示的出错提示信息。的出错提示信息。下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计【具体步骤具体步骤】1.设计设计Web页面页面 新建一个新建一个ASP.NET网站，如网站，如图图4-7所示，向页面中添加必要的所示，向页面中添加必要的控件说明文字，两个文本框控件控件说明文字，两个文本框控件TextBox1、TextBox2；一个按钮；一个按钮控件控件Button1。在用于输入学生学号的文本框后面添加一个必须项。在用于输入学生学号的文本框后面添加一个必须项验证控件验证控件RequiredFieldValidator1，在用于输入学生成绩的文本框，在用于输入学生成绩的文本框后面添加一个范围验证控件后面添加一个范围验证控件RangeValidator1。2.设置对象属性设置对象属性 各控件的初始属性设置见各控件的初始属性设置见表表4-3。下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计3.编写事件代码编写事件代码页面装入时执行的事件过程代码如下：页面装入时执行的事件过程代码如下：protected void Page_Load(object sender,EventArgs e)this.Title=范围验证控件应用示例范围验证控件应用示例;txtNum.Focus();lblMsg.Text=;下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计单击单击【提交提交】按钮时执行的事件代码如下：按钮时执行的事件代码如下：protected void btnOK_Click(object sender,EventArgs e)lblMsg.Text=姓名：姓名：+txtNum.Text+ +成绩：成绩：+txtScore.Text;下一页返回上一页任务一完成注册界面的设计任务一完成注册界面的设计【案例案例4】制作用户不能含有汉字、密码为制作用户不能含有汉字、密码为612位及对邮箱格式进行验位及对邮箱格式进行验证的注册页面。证的注册页面。【具体步骤具体步骤】1.设计设计Web页面页面 新建一个新建一个ASP.NET网站，向由系统自动产生的默认页面中添网站，向由系统自动产生的默认页面中添加一个加一个HTML表格，参照表格，参照图图4-11适当调整适当调整HTML表格的行列数及行表格的行列数及行高、列宽。向高、列宽。向HTML表格中添加需要的控件说明文字，向页面中表格中添加需要的控件说明文字，向页面中添加三个文本框控件添加三个文本框控件TextBox1TextBox3；添加一个按钮控件；添加一个按钮控件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页面页面返回
