(精品)表单验证和正则表达式.ppt
第第3 3章上机章上机表单验证与正则表达式表单验证与正则表达式作业点评作业点评u第2章理论动态创建表格的数据行var tbody=document.getElementById(tbody);var row=document.createElement(tr);for(var i=0;i3;i+)var col=document.createElement(td);col.height=30;col.widht=200;var input=document.createElement(input);input.style.border=0px;col.appendChild(input);row.appendChild(col);tbody.appendChild(row);效果演示作业点评作业点评u第2章上机动态添加和删除的方法实现职位选择功能 for(var i=0;ijobs.length;i+)if(jobsi.checked=true)var node=document.createElement(span);node.innerHTML=jobsi.value;node.className=selected;hasSelected.appendChild(node);效果演示上机内容上机内容u使用String对象的split方法分割字符串u使用String对象的replace方法替换文本中的关键字u使用正则表达式验证表单数据上机目标上机目标u制作用户权限显示u制作网易邮箱注册表单u制作google搜索关键词并实现高亮显示阶段阶段1 1训练内容l使用使用StringString对象的对象的splitsplit方法分割字符串方法分割字符串l使用使用getElementsByNamegetElementsByName访问页面元素访问页面元素需求说明l制作简易权限修改页面,使用字符串存储用户原有制作简易权限修改页面,使用字符串存储用户原有权限,根据原有权限设置权限复选框的选择状态权限,根据原有权限设置权限复选框的选择状态阶段阶段1 1完成时间完成时间30分钟分钟 参考代码参考代码实现思路l定义一个定义一个StringString对象存储用户原有权限,使用逗号隔开对象存储用户原有权限,使用逗号隔开l使用使用StringString对象的对象的SplitSplit方法分割权限字符串方法分割权限字符串l使用使用getElementsByNamegetElementsByName获取所有权限复选框获取所有权限复选框l使用嵌套循环比较用户权限数组和权限复选框的值,根据比较使用嵌套循环比较用户权限数组和权限复选框的值,根据比较结果设置复选框的状态结果设置复选框的状态 阶段阶段2 2训练内容l使用使用StringString对象的对象的lengthlength属性获取字符串的长度属性获取字符串的长度l处理表单处理表单onsubmitonsubmit事件事件需求说明l制作制作163163邮箱登录表单页面,要求用户名和密码不为空邮箱登录表单页面,要求用户名和密码不为空 阶段阶段2 2实现思路l使用使用functionfunction定义表单验证处理函数定义表单验证处理函数checkFormcheckForml使用使用document.getElementByIddocument.getElementById或者或者document.all.document.all.页面元素名称获取用户名和密码的值页面元素名称获取用户名和密码的值l调用字符串的调用字符串的lengthlength属性判断用户名和密码的长度属性判断用户名和密码的长度是否为是否为0 0完成时间完成时间15分钟分钟 参考代码参考代码阶段阶段2 2需求说明l制作网页邮箱注册页面,使用正则表达式验证表达数据的制作网页邮箱注册页面,使用正则表达式验证表达数据的合法性,要求如下:合法性,要求如下:(1 1)用户名由字母、数字和下划线组成用户名由字母、数字和下划线组成(2 2)户名和密码长度大于户名和密码长度大于6 6l出生年月验证,年份的格式出生年月验证,年份的格式1919,月份大于月份大于0 0小于等于小于等于12,12,日期大于日期大于0 0小于等于小于等于3131参考代码参考代码完成时间完成时间25分钟分钟 阶段阶段3 3训练内容l使用String对象的replace方法实现字符串替换l使用RegExp对象实现全局检索l使用innerHTML获取和设置对象内部HTML文本需求说明l实现替换文章中的关键词 阶段阶段3 3实现思路l使用document.getElementById获取段落内容l定义正则表达式对象实现全文搜索lvar rege=new RegExp(word,g)l使用String对象的replace方法实现替换完成时间完成时间20分钟分钟 参考代码参考代码阶段阶段3 3需求说明l编写脚本程序使用”*“号替换论坛禁止的词汇 参考代码参考代码完成时间完成时间20分钟分钟 阶段阶段4 4需求说明l使用正则表达式将文章中的“急诊”关键字以红色高亮显示 参考代码参考代码完成时间完成时间20分钟分钟 总结总结 总结并布置作业