第18讲 表单验证的高级特效(二).ppt

《第18讲 表单验证的高级特效(二).ppt》由会员分享，可在线阅读，更多相关《第18讲 表单验证的高级特效(二).ppt（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、主讲老师：方丹主讲老师：方丹表表单验证的高级单验证的高级特效（特效（二二）n任务一：任务一：制作即时提示错误的特效n任务二：会使用任务二：会使用DIV的的innerHTML或或innerText动态显示内容动态显示内容n重点：重点：制作即时提示错误的特效n难点：会使用难点：会使用DIV的的innerHTML或或innerText动态显示内容动态显示内容本讲目标任务一：制作即时提示错误的特效如何制作即时提示错误的特效？如何制作即时提示错误的特效？1、制作即时提示错误的特效使用使用DIV层的内容动态改变。层的内容动态改变。在每个输入框后添加一个在每个输入框后添加一个DIV层层,根据用户的输入根据用

2、户的输入,动态显示错误信息动态显示错误信息2、DIV层display属性简介nstyle是样式是样式 display 是样式中的显示是样式中的显示 none和和block都都是显示中的参数是显示中的参数 none 为不显示为不显示 block为显示为显示 nblock:CSS1 块对象的默认值。用该值为对象之后添加块对象的默认值。用该值为对象之后添加新行新行 nnone:CSS1 隐藏对象。与隐藏对象。与visibility属性的属性的hidden值不值不同，其不为被隐藏的对象保留其物理空间同，其不为被隐藏的对象保留其物理空间n inline:CSS1 内联对象的默认值。用该值将从对象中删内联

3、对象的默认值。用该值将从对象中删除行除行 3、制作即时提示错误的特效演示实现步骤：演示实现步骤：1、在登录文本框后插入、在登录文本框后插入DIV标签标签loginError（即没有样式的（即没有样式的DIV层）层）2、修改源代码，设置、修改源代码，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行 演示示例演示示例1 1：演示素材演示素材任务二：制作即时提示错误的特效演示演示实现步骤：演示实现步骤：3、添加文本框失去焦点的事件函数、添加文本框失去焦点的事件函数：function checkLogin()var myDiv=document.getElemen

4、tById(loginError);myDiv.innerHTML=;var strName=document.userfrm.loginName.value;if(strName.length=0)myDiv.innerHTML=用户名不能为空用户名不能为空;return;如果输入的信息不合法，则利用如果输入的信息不合法，则利用DIV的的innerHTML或或innerText进行错误进行错误提示，提示，innerText只能写文本信息只能写文本信息获取插入的获取插入的DIV对象对象注册页面注册页面.html小结一完善完善”密码密码“和和”电子邮件电子邮件“的错误提示功能。的错误提示功能。提示：提示：1、密码和电子邮件文本框后各添加一个、密码和电子邮件文本框后各添加一个DIV标签标签2、修改、修改DIV的显示样式为的显示样式为inline3、给各个文本框添加失去焦点、给各个文本框添加失去焦点onBlur的事件函数的事件函数练习素材练习素材 总结n制作即时提示错误特效的思路是什么？制作即时提示错误特效的思路是什么？n制作内容动态改变的思路是什么？制作内容动态改变的思路是什么？作业一（必做）1.完成上课案例完成上课案例2.完成的注册完成的注册作业二（选做）1.完成的注册完成的注册