10.3.3 用户信息录入功能(课件）-高二《网页设计与制作》同步教学（中国人民大学出版社）

10.3.3 用户信息录入功能 用户注册主要是提供一个用户自动注册的平台。这个添加记录功能的实现通过3个页面进行处理：用户信息录入页面（add.asp）、录入成功信息提示页面（add_ok.asp）以及录入失败信息提示页面（add_wrong.asp）。 1. 用户信息录入页面（add.asp） 本实例的用户信息录入页面实现用户信息添加的功能。设计过程如下所示。 （1）打开Dreamweaver的设计界面。单击【文件】→【新建】命令，新建一个名为“add.asp”的标准ASP文件。 （2）单击Dreamweaver【插入】工具栏中【常用】→【表格】命令。在弹出的【表格】对话框中进行相应设置，在【文档】窗口中插入了一些表格用于定位。 （3）根据实际情况，可以对特定的单元格进行宽度和背景图片的指定，来修饰表格的外观。在此基础上，再对单元格行适当的排版，录入相应的文字信息具体效果如图所示。 （4）单击Dreamweaver【插入】工具栏中【表单】→【表单】命令，在文档最前头插入表单。通过【标签选择器】选中该表单。在【属性】面板中“表单名称”文本框中输入“frmdata”。在【目标】下拉列表中选择“_self”选项，如图所示。 （5）根据上面的表格布局，插入各项对应的表单元素，包括文本字段、按钮等，如图所示。 下面就提供了个表单元素的属性列表，如下表所示： （7）单击【窗口】→【行为】命令，弹出【标签<form>】面板，如图所示。 （7）单击【窗口】→【行为】命令，弹出【标签<form>】面板，如图所示。 （8）单击【＋】→【检查表单】命令，弹出【检查表单】对话框。在【命名的栏位】列表中分别选择不同的栏位，选中其对应的【值】选项组下的“必需的”选项，如图所示。 （9）单击【确定】按钮，关闭【检查表单】对话框。返回【标签<form>】面板，向导将自动在其下拉列表中添加一条在【onSubmit】事件时发生的行为【检查表单】的列表选项，如图所示。 （10）用鼠标选中【确认口令】所对应的文本框。单击【＋】→【调用JavaScript】命令，弹出【调用JavaScript】对话框。在【JavaScript】文本框中输入“if(document.getElementById(”pswd“).value!=document.getElementById(”repswd“).value){alert(”两次口令输入不一致！“);}”，如图所示。 （11）单击【确定】按钮，关闭【调用JavaScript】对话框。返回【标签<input>】面板，向导将自动在其下拉列表中添加一条在【onBlur】事件时发生的行为【调用JavaScript】的列表选项，如图所示。 （12）单击【窗口】→【服务器行为】命令，弹出【服务器行为】面板，如图所示。 （13）单击【＋】→【插入记录】命令，弹出【插入记录】对话框。在【连接】下拉列表中选择【conn】选项。在【插入到表格】下拉列表中选择【tb_user】选项。在【插入后，转到】文本框中输入“add_ok.asp”。在【获取值自】下拉列表中选择【frmdata】选项，如图所示。 （14）单击【确定】按钮，关闭【插入记录】对话框。返回【服务器行为】面板，向导将自动在其下拉列表中添加一条【插入记录（表单“frmdata”）】的列表选项，如图所示。 （15）单击【＋】→【用户身份验证】→【检查新用户名】命令，弹出【检查新用户名】对话框。在【用户名字段】下拉列表中选择“name”选项。在【如果已存在，则转到】文本框中输入“add_wrong.asp”，如图所示。 （16）单击【确定】按钮，关闭【检查新用户名】对话框。返回【应用程序】面板，向导将自动在其下拉列表中添加一条【检查新用户名】的列表选项，如图所示。 （17）通过标签【标签选择器】选中该表单（frmdata）。在【属性】检查器中，在【动作】文本框中会看到系统自动写入“<%=MM_editAction%>”的值，如图所示。 2.录入成功信息提示页面（add_ok.asp） 在用户信息录入界面中，添加信息完成。如果成功，则跳转录入成功信息提示页面。进入该网页2秒后，跳转到用户注册信息分页显示页面。录入成功信息提示页面制作过程，如下所示： （1）打开Dreamweaver的设计界面。单击【文件】→【新建】命令，新建一个名为“add_ok.asp”的标准ASP文件。 （2）单击Dreamweaver【插入】工具栏中【常用】→【表格】命令。在弹出的【表格】对话框中进行相应设置，在【文档】窗口中插入了一些表格用于定位。 （3）根据实际情况，可以对特定的单元格进行宽度和背景图片的指定，来修饰表格的外观。在此基础上，再对单元格行适当的排版，录入相应的文字信息具体效果如图所