《《表单基本验证技术》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《表单基本验证技术》PPT课件.ppt（29页珍藏版）》请在装配图网上搜索。
1、表单基本验证技术,第六章,回顾与作业点评,如何使用style属性改变样式属性值？ HTML元素.style.样式属性值 如何使用className属性改变样式属性值？ This.classname 制作随滚动条滚动的广告图片的关键步骤是什么？ document.documentElement.scrollTop; document.documentElement.scrollLeft;,预习检查,为什么需要表单验证？ 使用什么方法验证Email文本框中必须输入符号“”和“.”？使用getElementById()获取Email的值 使用字符串方法indexOf( ) 判断Email的值是否包含
2、“”和“.”符号。 根据函数返回值是true还是flase来决定是否提交表单 使用什么事件可以实现文本输入提示特效？ onsubmit,本章任务,验证休闲网登录页面数据输入的有效性 验证休闲网注册页面数据输入的有效性,本章目标,使用表单事件和脚本函数实现表单验证 使用String对象和文本框控件常用属性和方法实现客户端验证,什么需要表单验证,减轻服务器的压力 保证输入的数据符合要求,表单验证的内容,日期是否有效或日期格式是否正确 表单元素是否为空 用户名和密码 E-mail地址是否正确 身份证号码等是否是数字,表单验证思路,当输入的表单数据不符合要求时，如何编写脚本来进行提示？,获得表单元素值
3、 使用JavaScript的一些方法对数据进行判断 当表单提示时，触发 onsubmit事件，对获取的数据进行验证,String对象,字符串对象的属性 字符串对象.length,var str=this is JavaScript; var strLength=str.length;,18,String对象,字符串对象的方法,字符串对象.方法名( ),var str=this is JavaScript; var selectFirst=str.indexOf(Java); var selectSecond=str.indexOf(Java,12);,8,-1,验证休闲网登录页面,验证休闲网登
4、录页面的Email,电子邮件格式验证,思路分析 使用getElementById()获取Email的值 使用字符串方法indexOf( ) 判断Email的值是否包含“”和“.”符号。 根据函数返回值是true还是flase来决定是否提交表单,var mail=document.getElementById(email).value; if(mail.indexOf()=-1) alert(Email格式不正确n必须包含); return false; ,练习-验证电子邮箱,需求说明 电子邮箱不能为空 电子邮箱中必须包含符号“”和“.”,完成时间：20分钟,查看完整代码,共性问题集中讲解,常见
5、调试问题及解决办法 代码规范问题,共性问题集中讲解,文本框内容验证-1,姓名不能为空，并且姓名中不能有数字 密码不能为空，并且密码包含的字符不能少于6个 两次输入的密码必须一致,文本框内容验证-2,使用String对象的length属性验证密码的长度,var pwd=document.getElementById(pwd).value; if(pwd.length6) alert(密码必须等于或大于6个字符); return false;,验证两次输入密码是否一致,var repwd=document.getElementById(repwd).value; if(pwd!=repwd) al
6、ert(两次输入的密码不一致); return false; ,文本框内容验证-3,使用length属性获取文本长度，使用for循环和substring()方法依次截断单个字符，判断每个字符是否是数字,var user=document.getElementById(user).value; for(var i=0;i=0) alert(姓名中不能包含数字); ,练习验证贵美网注册页面,需求说明 名字和姓氏不能为空，且名称和姓氏中不能有数字，当名字中出现数字时，弹出提示信息 密码至少包含6个字符，并且两次输入的密码必须一致,完成时间：25分钟,查看完整代码,共性问题集中讲解,常见调试问题及解决
7、办法 代码规范问题,共性问题集中讲解,小结,编写如下图所示的注册页面，实现注册表单的验证功能,文本框效果,如何实现如图所示效果，完善验证Email的例子,使用文本框对象的相关属性、事件和方法实现此效果,文本框对象,文本框对象的属性、方法和事件,制作文本框效果-1,清除文本框中初始内容，并设置边框为红色,function clearText() var mail=document.getElementById(email); if(mail.value=请输入正确的电子邮箱) mail.value=; mail.style.borderColor=#ff0000; Email： ,制作文本框效果
8、-2,当用户输入无效的电子邮件地址，Email文本框中的内容将被自动选中并且高亮显示，提示用户重新输入,if(mail.indexOf()=-1 | mail.indexOf(.)=-1) alert(Email格式不正确n必须包含符号和.); document.getElementById(email).select(); return false; ,文本提示特效,如何实现如图所示的文本提示特效？,文本框失去焦点事件onblur 使用innerHTML属性动态改div添中内容,文本提示特效代码,提示Email不能为空,function checkEmail() var mail= docu
9、ment.getElementById (email); var divID= document.getElementById (DivEmail); divID.innerHTML=; if(mail.value=) divID.innerHTML=Email不能为空; return false; ,练习-文本输入提示特效,需求说明 名字和姓氏均不能为空，并且不能有数字 密码不能少于6位，两次输入的密码必须相同 电子邮箱不能为空，并且必须包含符号“”和“.”,查看完整代码,完成时间：25分钟,共性问题集中讲解,常见调试问题及解决办法 代码规范问题,共性问题集中讲解,总结,修改小结练习，使用JavaScript实现文本输入提示特效，页面效果如图所示,
《表单基本验证技术》PPT课件.ppt
