（中职）网页设计与制作项目八 应用网页表单 任务三 案例.docx

（中职）网页设计与制作项目八 应用网页表单 任务三 案例项目八 应用网页表单任务三 学会查验表单数据现在很多网站提供了注册和登录功能，在登陆页面，需要输入电子邮件作为登陆账号。而当访问者输入的登陆账号不是电子邮件格式的时候，网页会直接进行提示，告诉访问者输入格式错误，如图8-42所示。在Dreamweaver中，我们可以通过Spry表单构件制作具有验证功能的登陆页面。图8-42 具有验证功能的登录页面其具体操作步骤如下：第一步. 打开Dreamweaver，选择新建html网页。第二步. 在合适的位置，选择“插入”“表单”，网页出现红色虚线框，表示已插入表单。第三步. 在插入工具栏表单栏目下，找到“Spry验证文本域”，在弹出的窗口中，输入标签为“电子邮件：”，点击确认后在相应位置插入Spry验证文本域，如图8-43所示。图8-43 插入Spry验证文本域 第四步. 单击灰色文本框区域，下方出现文本域属性面板，输入“字符宽度”为20，如图8-44所示。图8-44 设置文本字段 第五步. 点击文本框上方“Spry文本区域：sprytextarea1”文字，在下方属性面板中设置“类型”为“电子邮件地址”，“预览状态”为“无效格式”，“验证于”勾选“onBlur”，如图8-45所示。图8-45 设置Spry验证文本域 第六步. 将光标定位到Spry验证文本域后面，按Enter换行，单击“Spry验证文本域”，在弹出的窗口中输入“标签”为“登录密码：”，如图8-46所示。图8-46 添加标签 第七步. 单击文本字段区域，在属性面板设置“字符宽度”为20，“类型”为“密码”，如图8-47所示。图8-47 本文域的设置第八步. 点击文本框上方“Spry文本区域：sprytextarea1”文字，在下方属性面板中设置“最小字符数”为5，“最大字符数”为15，验证于勾选“onChange”和“必须的”，预览状态选择“已超过最大字符数”，如图8-48所示。图8-48 设置Spry验证文本域第九步. 将光标定位到Spry验证文本域后面，按Enter换行。依次点击“按钮”插入两个按钮，第二个按钮在属性面板设置“动作”为重设表单。登录页面制作完成之后，电子邮件栏目必须填写符合电子邮件格式的字符，若不符合，则提示“格式无效”；登录密码的字符数必须介于515之间，若不符合，则提示“不符合最小字符数要求”或“已超过最大字符数”，如图8-49所示。图8-49 具有验证功能的登录页面感谢您的支持与使用如果内容侵权请联系删除仅供教学交流使用