《JavaScript程序设计案例教程》课件_案例6.pptx

案例六、表单验证

学习目标知识链接案例实现效果演示目录

学完本章节应该能做到的事情学习目标壹

学习目标掌握表单的几个重要事件。能进行表单的有效性验证。掌握BOM对象的用法。PPT模板/moban/理解和掌握正则表达式。掌握Date对象。掌握Math对象。

效果演示

完成本案例应该具备的知识知识链接贰

知识链接列表PPT模板/moban/表单的submit事件。表单的focus和blur事件。正则表达式。Date对象。Math对象。BOM对象。

表单的submit事件1表单提交：指把用户在表单中输入的数据提交给服务器上某个动态脚本文件。submit事件：表单数据提交的这个动作就是表单提交事件，即submit事件。submit事件作用：就是在真正提交给服务器前对数据进行有效性验证，过滤掉不符合要求的数据，减轻服务器的负担。放在服务器端不好吗？为什么能减轻服务器的负担

表单的submit事件101点击提交按钮02调用表单的submit方法Submit事件触发的方式

表单的submit事件1图6-1表单提交流程图

表单的submit事件1以提交按钮触发submit事件(form_submit1.html)formaction=#method=postonsubmit=returncheckForm(); inputtype=submitvalue=我是提交按钮//formscript functioncheckForm(){ alert(你触发我了); returntrue; }/script

表单的submit事件1以提交按钮触发submit事件(form_submit2.html)formaction=#method=post buttontype=submit我是提交按钮/button button我也是提交按钮/button/formscript document.querySelector(form).onsubmit=checkForm; functioncheckForm(){ alert(你触发我了); returntrue; }/script

表单的submit事件1以submit()方法触发submit事件(form_submit3.html)formaction=#method=post inputtype=text//formbuttontype=button我不是提交按钮，也能提交/buttonscript document.querySelector(form).onsubmit=checkForm; functioncheckForm(){ alert(你触发我了); returntrue; } document.querySelector(button[type=button]).onclick=function(){ document.querySelector(form).onsubmit(); }/script

表单的focus和blur事件2什么是焦点？JS中的焦点处理包括：获取焦点（focus）失去焦点（blur）。

表单的focus和blur事件2获得焦点的方式：当用户点击表单字段按TAB键时表单元素会获得焦点。autofocus属性可以设置元素获取默认焦点。失去焦点的方式：当用户点击页面的其他位置按下TAB键也可以使当前具有焦点的表单元素失去焦点。失去焦点时刻可能更重要，因为失去焦点意味着数据输入已经完成，可以运行代码检查输入的数据或者保存数据到服务器等。

表单的focus和blur事件2焦点的获得与失去(focus_blur.html)styleinput{ padding:5px; outline:none; display:block; margin:5px;}input:focus{ border-color:#0099FF;}/stylebodyinputvalue=失去焦点中。。。/inputautofocus=autofocusvalue=获得焦点中。。。/inputtype=buttonvalue=来啊，点一下//body

表单的focus和blur事件2焦点的获得与失去(focus_blur.html)script document.querySelector(input[type=button]).onclick=function(){ document.querySelector(input).focus(); } document.querySelectorAll(input)[0].onfocus=funct