7.6 课堂练习：制作注册网页• 本练习将制作一个用户注册网页。在制作注册网页时，除了使用表单实现用户交互外，还需要使用Spry表单验证技术，为注册的表单添加验证功能，实现网页快速交互。
1、直接编写 JavaScript 文件 用户注册1 1、创建 JavaScript 文件 validateReg.js Dreamweaver 中，文件 －－ 新建 －－ 创建 JavaScript 文件 －－ 保存到 validateReg.js。 2、创建 ASP 网页 Register.asp， 在<head> ...... </head>之间包含脚本文件 validateReg.js。 <head><script language=Javascript src="validateReg.js"></script></head> 3、点击提交按钮时，反馈表单验证结果。表单验证通过时，激活储存注册数据网页面。 <form name="frmReg" method="POST" action="SaveReg.asp" onsubmit="javaScript: return validateReg();"> 4、ASP 网页运行后，根据浏览器检查提示信息，修正网页有关行的错误。 IE浏览器、毒霸 -- 工具 -- Internet 选项 -- 高级选项卡 -- 浏览项 -- 取消“显示友好 http 错误信息” -- 确定。 QQ浏览器、360浏览器 -- 设置 -- 工具 -- JavaScript 控制台 -- console 菜单。 2、通过 Dreamweaver 可视化操作生成 JavaScript 文件 用户注册2 1、在 Dreamweaver 中打开 Register.html，可视化操作生成 JavaScript 文件保存到 SpryAssets/SpryValidationTextField.js、 SpryValidationPassword.js、 SpryValidationConfirm.js、 SpryValidationTextarea.js 2、在 Register.html 网页中， 在<head> ...... </head>之间包含脚本文件 *.js。 <head> <script src="SpryAssets/SpryValidationTextField.js"></script> <script src="SpryAssets/SpryValidationPassword.js"></script> <script src="SpryAssets/SpryValidationConfirm.js"></script> <script src="SpryAssets/SpryValidationTextarea.js""></script> </head>
1、验证文本域 选择文本域 -- 插入 -- Spry -- Spry 验证文本域 -- 插入标签辅助功能属性 -- ID为 userName，标签为“用户”。 预览状态 -- 必填 -- 提示文本“用户名不能空！”。 预览状态 -- 未达最小字符数 -- 提示文本“用户名不能小于3位！”。 预览状态 -- 已超过最大字符数 -- 提示文本“用户名不能超过10位！”。 2、验证密码 选择密码域 -- 插入 -- Spry -- Spry 验证密码 -- 插入标签辅助功能属性 -- ID为 userPsw，标签为“密码”。 预览状态 -- 必填 -- 提示文本“密码不能空！”。 预览状态 -- 强度无效 -- 提示文本“密码强度太弱！”。 属性检查器：最小字母数1，最小数字数3，最小大写字母数1，最小特殊字符数1。 预览状态 -- 未达最小字符数 -- 提示文本“密码不能小于3位！”。 预览状态 -- 已超过最大字符数 -- 提示文本“密码不能超过10位！”。 3、验证确认 选择密码域 -- 插入 -- Spry -- Spry 验证密码 -- 插入标签辅助功能属性 -- ID为 checkPsw，标签为“验证密码”。 属性检查器 -- 验证参照对象：userPsw 在表单1，验证时间：onBlur。设置预览状态。 4、验证文本域（电子邮件） 选择文本域 -- 插入 -- Spry -- Spry 验证文本域 -- 插入标签辅助功能属性 -- ID为 email，标签为“电子邮件”。 属性检查器 -- 类型：电子邮件地址（包含“.”和“@”字符）。设置预览状态。 5、验证文本区域 选择文本域 -- 插入 -- Spry -- Spry 文本区域 -- 插入 ID为 intro，标签为“自我介绍”的Spry 文本区域。 属性检查器 -- 设置文本区域最小字符数，最大字符数，验证于和预览状态。 6、插入按钮 插入 -- 表单 -- 按钮：regBtn，resBtn -- 属性检查器。 regBtn 值：注册，动作：提交表单。 resBtn 值：重置，动作：重设表单。 7.7 课堂练习：制作用户登录页• 本练习将制作一个用户登录的网页。在制作用户登录页时，需要先创建一个用户名和密码的数据库，然后再将其添加到操作系统ODBC数据源中，最后再绑定记录集，通过【登录用户】服务器行为实现用户名的判断。 |