• 1. 第四章表单验证第二单元第1页/共29页
  • 2. 本章相关学习资源 《表单验证》专题 《Web前端基础及数据库开发》 第4章 《表单验证》 学习平台“静态网页制作”课程学生用书第2页/共29页
  • 3. 预习检查简述表单验证的必要性。 使用什么事件可以实现文本输入提示特效? 什么方法用于检测一个字符串是否匹配某个表达式 ?提问第3页/共29页
  • 4. 本章任务任务1:验证博客网注册页面 任务2:升级验证博客网注册页面 任务3:使用正则表达式验证博客网注册页面 第4页/共29页
  • 5. 会使用RegExp对象验证表单本章目标点难点重理解表单验证的必要性及实现思路会使用String对象和文本框对象实现客户端的验证点重第5页/共29页
  • 6. 串讲:表单验证必要性 减轻服务器的压力 保证输入的数据符合要求 网络根据你的理解,说一说为什么需要表单验证?提问第6页/共29页
  • 7. 讲解:表单验证的实现思路实现思路 获取表单元素的值 根据业务规则,判断获取的数据 利用表单的onsubmit事件进行验证 验证方式 String对象的属性和方法 正则表达式第7页/共29页
  • 8. 串讲:String对象常用属性和方法 类别名称说明属性length返回字符串的长度(包括空格等)方法toLowerCase()把字符串转化为小写toUpperCase()把字符串转化为大写charAt(index)返回在指定位置的字符indexOf(str,index)查找某个指定的字符串在字符串中首次出现的位置substring(index1,index2)返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符与Java的String对象的方法用法类似第8页/共29页
  • 9. 串讲:文本框内容的验证验证博客网注册页面的Email第9页/共29页
  • 10. 串讲:验证电子邮箱格式思路分析 使用getElementById()获取Email的值 使用字符串方法indexOf( ) 判断Email的值是否包含“@”和“.”符号。 根据函数返回值是true还是flase来决定是否提交表单function check () { var mail=document.getElementById("email").value; if(mail.indexOf("@")==-1){ alert("Email格式不正确\n必须包含@"); return false; } ... ... }
    第10页/共29页关键代码
  • 11. 上机练习上机练习用户名不能为空,4~6位字符 密码不能小于6位 两次输入密码必须一致 邮箱必须包含“@”和“.”完成时间:20分钟共性问题集中讲解需求说明 验证博客网注册页面练习第11页/共29页
  • 12. 串讲:文本框效果如何实现用户填写邮箱时,文本框即时提示效果?演示示例:文本提示特效 问题第12页/共29页
  • 13. 串讲:文本框对象常用的属性、方法和事件类别名称说明属性id设置或返回文本域的idvalue设置或返回文本域的value属性的值方法blur()从文本域中移开焦点focus()在文本域中设置焦点,即获得鼠标光标select()选取文本域中的内容事件onblur失去焦点,当光标离开某个文本框时触发onfocus获得焦点,当光标进入某个文本框时触发onkeypress某个键盘按键被按下并松开第13页/共29页
  • 14. 串讲:制作文本框效果-1清除文本框中初始内容,并设置边框为红色 function clearText(){ var email=$(“email”); //获得文本框对象 if(email.value=="请输入正确的电子邮箱") email.value=""; email.className="red"; } …… 第14页/共29页关键代码
  • 15. 串讲:制作文本框效果-2当用户输入无效的电子邮件地址时,在文本框右侧提示用户错误信息function checkEmail(){ var emailMess=$(“emailMess”); //获得提示验证信息的层对象 var email=$("email"); emailMess.innerHTML=“”; //清空验证信息 if(email.value.indexOf('@',0)==-1||email.value.indexOf('.',0)==-1){ emailMess.innerHTML=“邮件格式必须包含@和.”; //提示信息 return false; } } ……
    第15页/共29页关键代码
  • 16. 串讲:制作文本框效果-3当用户输入正确邮箱时,文本框变为绿色function checkEmail(){ var emailMess=$(“emailMess”); //获得提示验证信息的层对象 var email=$("email"); if(email.value.indexOf('@',0)==-1||email.value.indexOf('.',0)==-1){ emailMess.innerHTML=“邮件格式必须包含@和.”; //提示信息 return false; } else{ emailMess.innerHTML=""; email.className="borSty"; return true; } }清空验证信息,修改边框样式第16页/共29页关键代码
  • 17. 上机练习共性问题集中讲解练习需求说明 升级验证博客网注册页面 当文本框获得焦点时,文本框变为红色 失去焦点时,验证用户输入内容,并即时提示验证信息 用户输入正确,则文本框变为绿色第17页/共29页完成时间:25分钟
  • 18. 讲解:完善博客网注册页面验证如果用户不输入各项,直接点击提交按钮,如何验证?提问function check () { if(checkUser()&&checkPwd()&&checkRegPwd() &&checkEmail()) return true; return false; } … … 第18页/共29页关键代码
  • 19. 小结方法( )能获得焦点。 利用层的( )属性可以动态改变层中的提示内容。 var str= "hello JavaScript";str. ( ) 可以截取到“Java”。提问blur()innerHTMLsubstring(6,10)第19页/共29页
  • 20. 串讲:正则表达式正则表达式中常用的符号和用法符号描述/…/代表一个模式的开始和结束^匹配字符串的开始$匹配字符串的结束\s任何空白字符\S任何非空白字符\d匹配一个数字字符,等价于[0-9]\D除了数字之外的任何字符,等价于[^0-9]\w匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_].除了换行符之外的任意字符第20页/共29页
  • 21. 串讲:正则表达式正则表达式的重复字符符号描述{n}匹配前一项n次{n,}匹配前一项n次,或者多次{n,m}匹配前一项至少n次,但是不能超过m次*匹配前一项0次或多次,等价于{0,}+匹配前一项1次或多次,等价于{1,}?匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}第21页/共29页
  • 22. 串讲:定义正则表达式普通方式 构造函数方式var reg=/表达式/附加参数var reg=/white/; var reg=/white/g; var reg=/^\d{2,8}$/m;var reg=new RegExp("表达式","附加参数")var reg=new RegExp("white"); var reg=new RegExp("white","g"); var reg=new RegExp(/^\d{2,8}$/);语法语法第22页/共29页
  • 23. 讲解:定义复杂正则表达式如何定义复杂的正则表达式? 将规则拆分,逐块分析 确定使用的符号 确定符号的个数 编写验证年龄的正则表达式,年龄必须在0-120之间 示例问题第23页/共29页
  • 24. 讲解:验证年龄的正则表达式0-1201200-1190-9100-11910-99\d[1-9]\d1[0-1]\d(1[0-1]|[1-9])?\dvar regAge=/^120$|^((1[0-1]|[1-9])?\d)$/m;个位都是0-9,当百位是1时十位是0-1,当年龄为两位数时十位是1-9第24页/共29页
  • 25. 上机练习共性问题集中讲解练习需求说明 使用正则表达式验证博客网注册页面 分析 根据各输入框的要求,写出对应的正则表达式 构造相应的RegExp对象 利用RegExp对象的test方法验证 输入测试数据,对各项输入进行验证完成时间:20分钟第25页/共29页
  • 26. 答疑时间同学们请就以下方面的问题请教老师 (教员备课时自行填写)第26页/共29页
  • 27. 总结文本框常用的事件有哪些? 通过什么属性可以获得或修改文本框的值? 定义时间(小时:分钟,24小时制)的正则表达式。 提问第27页/共29页
  • 28. 作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间:xxx 提交形式:xxx 阅读学生用书第5章,观看平台《有效沟通》和《有效倾听》专题课件,完成综合练习,记录问题 教员备课时在此添加内容 第28页/共29页课后作业预习作业
  • 29. 第29页/共29页