第8章 表单验证及特效

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,-,*,-,第,8,章,表单验证及特效,掌握常用的表单数据验证,熟悉,onBlur,和,onFocus,事件,理解鼠标事件的应用,理解键盘事件的应用,了解使用,JavaScript,控制,CSS,样式特效,掌握,DIV,层的隐藏和显示,目标,2,表单验证,常见的表单验证可分为以下几类：,验证必填项：最基本的表单验证就是表单中必填项是否输入了内容,验证长度：用户输入的密码通常有一个长度限制，判断值的长度通过,value,的,length,属性来验证,验证输入内容的格式,验证两个表单项的值是否相等,验证邮箱的输入是否合法：通常通过正则表达式来验证邮箱的合法性,示例：,8.D.1,FormCheckEG.html,正则表达式表示了一种字符串匹配的模式，可用于检查一个字符串是否含有某种子串、将匹配的子串做替换或从某个字符串中取出符合某个条件的子串等,3,事件应用,onBlur,和,onFocus,事件,表单元素在失去焦点或光标移出元素时，就会触发,onBlur,事件。而,onFocus,事件和,onBlur,事件的作用正好相反，当文本框或是别的元素在得到焦点后会触发,onFocus,事件。,示例：,8.D.2,BlurAndFocusEG.html,鼠标事件,当光标移到元素上时，会触发元素的,onMouseOver,事件；将光标移出元素时，就会触发元素的,onMouseOut,事件。,onMouseOver,和,onMouseOut,鼠标事件主要应用于层或图片链接。,示例：,8.D.3,MouseOverAndOutEG.html,键盘事件,键盘事件主要包括,onKeyDown,、,onKeyPress,和,onKeyUp,三种。,示例：,8.D.4,KeyEventEG.html,功能键不会触发,onKeyPress,事件，因为,onKeyPress,对应的就是可打印的字符,4,CSS,样式特效,层的隐藏和显示特效,Div,层的隐藏和显示主要是用到了,display,属性，其取值如下表：,示例：,8.D.5,DivDisplayEG.html,图片轮换显示特效,在层的隐藏和显示的基础上可以实现图片的自动切换。这种技术主要使用了层,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,