表单验证高级特效.ppt

第4章表单验证高级特效 内容回顾 表单验证分为两步 第一步是编写验证函数验证表单数据的合法性 第二步是处理表单onsubmit 即在表单提交事件中调用表单验证函数String对象用于处理字符串 如获取字符串的长度 搜索字符串中的字符 转换字符的大小写等正则表达式是一种对文字进行模糊匹配的语言 常用方法有test exec等 本章内容 动态改变样式属性className属性的用法数组的创建和使用下拉列表框的使用 本章目标 制作动态输入提示特效制作内容的动态显示制作即错误提示特效使用数组制作省市级联特效 1 动态改变样式属性 1 1访问样式属性在程序运行时如何动态改变文本框的背景颜色 获得焦点 改变背景颜色 访问样式属性 object style property 使用元素的style属性访问样式规则 例如 访问字体的颜色color使用obj style color访问字体的大小属性使用obj style fontSize 样式属性由多个单词组成时 须变换属性的书写格式 font size变换成fontSize 访问样式属性 实现当文本框获得焦点时改变背景颜色 失去焦点时恢复白色 获得焦点时的状态 访问样式属性 用户名密码 示例演示 onFocus获得焦点事件 onBlur失去焦点事件 1 2className属性的用法 如何制作淘宝新用户注册页面中的动态输入提示特效 className属性的用法 object className className className属性可以动态引用样式的类选择器 在使用className属性须预先定义相应的类选择器 如定义文本框获得焦点和失去焦点的样式 然后再使用object className在事件触发时引用相关样式的类选择符 制作步骤使用DIV CSS布局制作淘宝注册页面为突出显示的背景层定义focusStyle和 blurStyle两个类选择器 在 focusStyle选择器中定义输入项获得焦点时的样式规则 在 blurStyle选择器中定义输入项失去焦点时的样式规则在输入项的onFocus和onBlur事件中通过className属性动态改突出显示的背景层的样式规则 className属性的用法 functionhightLight id document getElementById id className focusStyle functionrestore id document getElementById id className blurStyle focusStyle border 1pxsolid 00CCFF background color 99FFCC blurStyle border 0px background color white 电子邮件 文本框获得焦点设置背景层的样式 文本框失去焦点时恢复原状 示例演示 演示素材 获得焦点和失去焦点时的样式规则 1 3制作内容动态显示特效 根据用户的选择动态切换显示内容 如何实现 解决办法 使用display属性实现内容的动态显示和隐藏 制作内容动态显示特效 object style display state visibility hide 隐藏页面元素时 不会释放元素原有的位置 制作内容动态显示特效 实现步骤如下 使用DIV CSS布局制作快速充值页面 并且定义点卡 QQ 网游物品三块内容设置QQ 网游物品两块内容为隐藏状态使用JavaScript脚本判断点卡 QQ 网游物品单选按钮的选中状态 根据选中状态显示相应的内容 制作内容动态显示特效 card qq game margin top 10px qq game display none 示例演示 functionshowContent varopts document getElementsByName type for vari 0 i opts length i if opts i checked true break switch opts i value case card document getElementById card style display block document getElementById qq style display none document getElementById game style display none break 点卡QQ网游物品 使用DIV定义三块分类内容 判断单选按钮的选择状态 显示选中的内容 隐藏其它内容 处理onclick事件 演示素材 1 4制作即时错误提示特效 在表单验证时 发现有不合法的数据信息 该如何提示 解决办法 使用innerHTML属性动态改变DIV的内容 制作即时错误提示特效 实现步骤 在每个表单元后插入一个div或span 用来显示错误信息为div或span定义display样式属性 并设置值为inline 保证和前面的元素在同行显示 电子邮件电子邮件格式不正确 制作即时错误提示特效 编写表单验证处理函数 当数据验证失败时 通过div或者span的innerHTML属性设置需要给出的错误提示信息 验证电子邮件格式 functioncheckMail if mailPattern test mail mailError innerHTML 电子邮件格式不正确 mailError style color red returnfalse returntrue 2 数组的定义和使用 数组通常用来存储列表信息 每一个列表元素都可以通过一个索引值来访问Array是JavaScript的内置对象完成数组的创建 排序 删除 合并等 2 1数组的创建及使用 创建数组vararray newArray vararray newArray 3 vararray newArray 10 30 25 访问数组元素array 0 10 array 1 jack array 4 andy 索引越界 会出错吗 数组的创建及使用 常用属性length表示的是数组所占内存空间的数目常用方法 数组的创建及使用 varnames newArray jack andy mike lucy 使用 号将数组中的元素连接成一个字符串document write names join 将数组中的元数倒置names reverse document write 反转数组中的元素 for vari 0 i names sort 示例演示 2 2使用for in语句遍历数组 for in语句的功能用于对某个对象的所有属性进行循环操作 它将一个对象的所有属性名称逐一地赋值到一个变量 不需要事先知道对象中属性的个数 for 变量in对象 执行语句 使用for in语句遍历数组 varnames newArray jack andy mike lucy for varindexinnames document write names index index中的值是names数组元素的索引 从0开始 2 3数组的应用 省市级联特效 如何实现省市级联 数组的应用 省市级联特效 下拉列表框的常用属性 方法和事件 教员演示如何动态添加下拉列表框中的选项 数组的应用 省市级联特效 下拉列表框的级联特效 具体实现步骤如下 在示例1 4的基础上制作省市级联特效定义两个数组 分别用来存放四川和湖北的所有服务器 varsc newArray 富乐山 李白故里 泸定桥 varhb newArray 武当山 襄阳城 昭君台 varsc 富乐山 李白故里 泸定桥 varhb 武当山 襄阳城 昭君台 也可以定义为 数组的应用 省市级联特效 获取选择的服务器省份并进行判断 根据判断结果决定遍历哪个服务器数组 varprovince document getElementById province value if province 四川 清空下拉列表框中的选项document getElementById server options length 0 for variinsc 数组的应用 省市级联特效 使用document createElement方法为服务器数组中的每个元素创建option对象 并将option对象添加到下拉列表的options数组中 varop document createElement option op text sc i op value sc i document getElementById server options add op varop newOption varop newOption sc i sc i op text sc i op value sc i document getElementById server options add op 或者 2 4使用文字下标优化省市级联 varprovince document getElementById province value if province 四川 清空下拉列表框中的选项document getElementById server options length 0 for variinsc 访问湖北地区的服务器数组 使用数组的整数下标访访问数组元素 需将数组中的内容取出进行判断 有没有更简单的办法访问对应的地区的服务器 使用文字作为数组的下标 使用文字下标优化省市级联 varservers newArray servers 四川 富乐山 李白故里 泸定桥 servers 湖北 武当山 襄阳城 昭君台 varprovince document getElementById province value document getElementById server options length 0 for variinservers province varop document createElement option op text servers province i op value servers province i document getElementById server options add op 在访问数组时使用文字下标 类似于java中的HashMap集合存储元素的方式 使用文字作为数组下标 总结 通过JavaScript脚本可以动态改变样式属性的值 语法如下 object style property 使用className属性可以动态改变页面元素上应用的类选择器样式属性display的作用是设置