TP06 表单基本验证技术 ACCP 6.0 S2-4-使用JavaScript增强交互效果 PPT课件.pptVIP

* * * * 表单基本验证技术 第六章 回顾与作业点评 如何使用style属性改变样式属性值？ 如何使用className属性改变样式属性值？ 制作随滚动条滚动的广告图片的关键步骤是什么？ 预习检查 为什么需要表单验证？ 使用什么方法验证Email文本框中必须输入符号“@”和“.”？ 使用什么事件可以实现文本输入提示特效？ 本章任务 验证休闲网登录页面数据输入的有效性 验证休闲网注册页面数据输入的有效性 本章目标 使用表单事件和脚本函数实现表单验证 使用String对象和文本框控件常用属性和方法实现客户端验证 什么需要表单验证 减轻服务器的压力 保证输入的数据符合要求 表单验证的内容 日期是否有效或日期格式是否正确 表单元素是否为空 用户名和密码 E-mail地址是否正确 身份证号码等是否是数字 表单验证思路 当输入的表单数据不符合要求时，如何编写脚本来进行提示？ 获得表单元素值 使用JavaScript的一些方法对数据进行判断 当表单提示时，触发 onsubmit事件，对获取的数据进行验证 String对象 字符串对象的属性 字符串对象.length var str=this is JavaScript; var strLength=str.length; 18 String对象 字符串对象的方法 字符串对象.方法名( ) 方法 描述 toLowerCase() 把字符串转化为小写 toUpperCase() 把字符串转化为大写 charAt(index) 返回在指定位置的字符 indexOf(字符串，index) 查找某个指定的字符串值在字符串中首次出现的位置 substring(index1,index2) 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符 var str=this is JavaScript; var selectFirst=str.indexOf(Java); var selectSecond=str.indexOf(Java,12); 8 -1 验证休闲网登录页面 验证休闲网登录页面的Email 演示示例：电子邮件格式验证 电子邮件格式验证 思路分析 使用getElementById()获取Email的值 使用字符串方法indexOf( ) 判断Email的值是否包含“@”和“.”符号。 根据函数返回值是true还是flase来决定是否提交表单 var mail=document.getElementById(email).value; if(mail.indexOf(@)==-1){ alert(Email格式不正确\n必须包含@); return false; } 教师现场演示编码过程 练习-验证电子邮箱 需求说明 电子邮箱不能为空 电子邮箱中必须包含符号“@”和“.” 完成时间：20分钟 查看完整代码 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 文本框内容验证-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){ alert(两次输入的密码不一致); return false; } 文本框内容验证-3 使用length属性获取文本长度，使用for循环和substring()方法依次截断单个字符，判断每个字符是否是数字 var user=document.getElementById(user).value; for(var i=0;iuser.length;i++){ var j=user.substring(i,i+1) if(j=0){ alert(姓名中不能包含数字); } } 教师现场演示编码过程 练习－验证贵美网注册页面 需求说明 名字和姓氏不能为空，且名称和姓氏中不能有数字，当名字中出现数字时，弹出提示信息 密码至少包含6个字符，并且两次输入的密码必须一致 完成时间：25分钟 查看完整代码 共性问题集中讲解 常见调试问题及解决办法 代码规范问题 共性问题集中讲解 小结 编写如下