第四本书第10章表单验证.pptxVIP

表单验证;玉不琢，不成器；人不学，不知道。;梅兰芳苦练基本功;怎样使用document来获得一个HTML节点？ ;预习检查;内容进度;显式验证需求 例如用户名必须8位及8位以上 会明确的写在需求说明中 隐式验证要求 例如邮箱必须包含“@”、“.”符号 虽然没有显式的写在需求说明中，也需要进行验证 需要使用JavaScript进行表单验证的表单项有如下几类情况 必填项目是否输入 输入邮箱是否合法 输入日期是否合法 两次密码输入是否一致 是否按要求输入了正确的数据类型（例如年龄必须是数字） 输入的数据是否在合法的范围内（例如月份必须在1-12之间，用户名必须8位或8位以上） … ;必填项、邮箱合法性验证 首先看一个案例，如图所示，用户在表单的文本框输入邮箱，点击“提交”访问表单指定的页面。如果用户没有输入邮箱，则弹出如图所示的警告框；如果用户输入的内容不含“@”符号，则弹出如图所示的警告框；如果用户输入的内容不含“.”符号，则弹出如图所示的警告框 案例代码 ;其他合法性验证 假设《网上书城》的注册页面如图所示，用户点击“注册”按钮访问register.jsp页面；在表单验证方面，有如下需求，关键代码如下所示 邮箱：同上例要求； 密码：不能为空，长度必须达到6个字符，且两次输入必须一致； 姓名：不能为空，姓名中不能包含空格。 案例代码 ;文本框对象验证;移开焦点验证 用户提交时验证缺点？ 实现思路： 文本框获得焦点时清空原内容，更改文本框背景色； 文本框失去焦点时验证文本框的内容，如果不合法弹出错误警告框；如果合法则更改文本框背景色为白色； 案例代码 ;页面文本错误提示 现在浏览网页时，很少会看到使用警告框进行的表单验证错误提示，比较普遍的做法是在表单项的右侧留有一定的位置，当该表单项出现验证错误时，动态的显示验证错误信息 实现思路： 在每个输入框的后面放一个隐藏的div。当输入不合时将信息加入到div中并设置div的display: block; 当输入框验证通时清空div中的信息； 案例代码 ;;练习内容 完成表单验证初步、文本框对象验证小节的所有任务;内容进度;下拉列表对象;Option对象 如何创建下拉列表选项，并将选项添加到下拉列表中 var opt = new Option(中国, 086) SelectObj.add(opt, null) ;级联下拉列表 第二级下拉列表的选项内容是根据第一下拉列表的选择项决定的; 第二级下拉列表中的元素，使用二维Array存储，通过字符来索引第二维Array; ;级联下拉列表 完成思路及代码 使用二维数组存储级联下拉列表选项内容 var course = new Array() course[初级] = [Java基础上,Java基础下,初级项目] course[中级] = [Web前端技术,Oracle数据库,Web后端技术,中级项目] course[高级] = [Hibernate,Stucts,Spring,高级项目] 加载页面时初始化“阶段”下拉列表 function initStage(){ var stageSel = document.getElementById(stage) for (var i in course){//使用for…in…循环 stageSel.add(new Option(i, i),null) } } window.onload = initStage//加载页面时执行initStage函数;级联下拉列表 完成思路及代码 编写“阶段”下拉列表的onchange事件处理函数changeStage() function changeStage(){ var stageValue = document.getElementById(stage).value/;/获得选中的值 var courseSel = document.getElementById(course); showStage();//显示阶段下拉列表信息 courseSel.options.length = 0;//清空课程下来列表框 for(var i in course){ if(i == stageValue){//在数组中匹配选中的值 for(var j in course[i]){//给级联下拉列表添加列表项 courseSel.add(new Option(course[i][j],course[i][j]),null); } } } } function showStage(){ var stageShow = document.getEl