第8章 表单验证及特效.ppt

第8章表单验证及特效掌握常用的表单数据验证熟悉onBlur和onFocus事件理解鼠标事件的应用理解键盘事件的应用了解使用JavaScript控制CSS样式特效掌握DIV层的隐藏和显示目标2表单验证常见的表单验证可分为以下几类：p验证必填项：最基本的表单验证就是表单中必填项是否输入了内容验证必填项：最基本的表单验证就是表单中必填项是否输入了内容 p验证长度：用户输入的密码通常有一个长度限制，判断值的长度通过验证长度：用户输入的密码通常有一个长度限制，判断值的长度通过value的的length属性来验证属性来验证p验证输入内容的格式验证输入内容的格式 p验证两个表单项的值是否相等验证两个表单项的值是否相等 p验证邮箱的输入是否合法：通常通过正则表达式来验证邮箱的合法性验证邮箱的输入是否合法：通常通过正则表达式来验证邮箱的合法性 示例：示例：8.D.1 FormCheckEG.html 正则表达式表示了一种字符串正则表达式表示了一种字符串匹配的模式，可用于检查一个匹配的模式，可用于检查一个字符串是否含有某种子串、将字符串是否含有某种子串、将匹配的子串做替换或从某个字匹配的子串做替换或从某个字符串中取出符合某个条件的子符串中取出符合某个条件的子串等串等 3事件应用 onBlur和onFocus事件 p表单元素在失去焦点或光标移出元素时，就会触发表单元素在失去焦点或光标移出元素时，就会触发onBlur事件。而事件。而onFocus事件和事件和onBlur事件的作用正好相反，当文本框或是别的元素在得到焦点后会触发事件的作用正好相反，当文本框或是别的元素在得到焦点后会触发onFocus事事件。件。示例：示例：8.D.2 BlurAndFocusEG.html 鼠标事件 p当光标移到元素上时，会触发元素的当光标移到元素上时，会触发元素的onMouseOver事件；将光标移出元素时，就会触事件；将光标移出元素时，就会触发元素的发元素的onMouseOut事件。事件。onMouseOver和和onMouseOut鼠标事件主要应用于层或图鼠标事件主要应用于层或图片链接。片链接。示例：示例：8.D.3 MouseOverAndOutEG.html 键盘事件 p键盘事件主要包括键盘事件主要包括onKeyDown、onKeyPress和和onKeyUp三种。三种。示例：示例：8.D.4 KeyEventEG.html 功能键不会触发功能键不会触发onKeyPress事件，因事件，因为为onKeyPress对应的对应的就是可打印的字符就是可打印的字符 4CSS样式特效 层的隐藏和显示特效 pDiv层的隐藏和显示主要是用到了层的隐藏和显示主要是用到了display属性，其取值如下表：属性，其取值如下表：示例：示例：8.D.5 DivDisplayEG.html 图片轮换显示特效 p在层的隐藏和显示的基础上可以实现图片的自动切换。这种技术主要在层的隐藏和显示的基础上可以实现图片的自动切换。这种技术主要使用了层使用了层display属性，并且通过属性，并且通过JavaScript的的setInterval和和clearInterval函数来实现图片的自动切换。函数来实现图片的自动切换。示例：示例：8.D.6 ImgDisplay.html 属性值属性值说明说明block默认值，按块显示，换行显示。none不显示，不为被隐藏对象保留其物理空间inline按行显示，和其他元素同一行显示5表单验证可以减轻服务器负担，提高效率表单验证可以验证是否为空、日期是否有效、Email是否正确等鼠标事件有onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove和onMouseOut键盘事件有onKeyPress、onKeyDown和onKeyUp为了能够动态的改变页面或局部区域的显示外观，需要使用JavaScript控制CSS样式，即CSS样式特效DIV层的隐藏和显示主要通过使用div的display属性来实现的 小结6 谢 谢！7