表单验证高级特效.pptVIP

第4章　上机 表单验证高级特效 第3章　上机作业　实现google搜索关键字高亮显示 作业点评 第3章 理论作业　使用正则表达式重新实现淘宝会员注册页面的表单验证 邮箱地址： var emailPattern=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; 用户名： var namePattern=/^[a-zA-Z_]\w{5,15}$/; function highlight(str,key,color){ 　var keys=key.replace(/^\s+|\s+$/g, ).replace(/\s+/g, ).split(/(\s)|(,)/); 　for(var i=0;ikeys.length;i++){ 　var rege=new RegExp(keys[i],gi); 　str=str.replace(rege,keys[i].fontcolor(color)) 　} return str; } 效果演示 效果演示 上机内容 动态改变样式属性 className属性的用法 数组的创建和使用 下拉列表框的使用 上机目标 制作动态按钮 制作雅虎注册表单特效 制作列车时刻查询 阶段1 训练内容 使用className动态切换样式规则 处理鼠标的onmouseover事件和onmouseout事件 需求说明 制作雅虎注册表单的动态按钮效果 阶段1 完成时间20分钟 参考代码 实现思路 使用DIV+CSS定义雅虎注册表单 定义按钮的鼠标移走和悬停状态下的样式选择符.over和.out 在按钮触发onmouseover和onmouseout事件时，使用className属性动态切换类选择符 阶段2 训练内容 使用document.getElementById访问页面元素 使用display属性动态显示、隐藏页面元素 需求说明 制作输入内容动态提示效果，如当鼠标移入密码框时，显示密码输入的提示信息 内容提示 阶段2 实现思路 在每个输入项后面添加个span或者div,用来显示提示信息 使用document.getElementById访问提示框 使用display属性动态设置提示框的显示和隐藏 完成时间20分钟 参考代码 阶段2 需求说明 制作表单即时错误提示信息 ，要求如下： 邮箱填写错误提示信息包括：电子邮件名称不能为空、访电子邮箱已被注册。 密码填写错误提示信息包括：密码不能为空、输入的密码不一致。 参考代码 完成时间15分钟 小结 总结常见问题及解决办法 共性问题集中讲解 阶段3 需求说明 制作列车时刻查询页面，实现查询项目的动态切换效果 参考代码 完成时间20分钟 阶段4 需求说明 制作站站查询中的城市和站点之间的级联特效 参考代码 完成时间20分钟 总结 总结并布置作业