第六章JavaScript表单验证 JavaScript及网页特效制作课件 上机部分.pptVIP

上机6 JavaScript表单验证 回顾 如何判断一个字符串是否为数字格式？ 客户端验证的优势是什么？ 什么是正则表达式？ 身份证正则表达式如何书写？ 上机任务 表单验证 非法内容过滤 电话号码验证 用户名有效性验证 训练技能点 掌握基本的非空验证。 掌握正则表达式验证。 任务1 任务说明 页面包含相关身份信息的表单，等待用户输入，提交数据时验证表单是否正确填写，其中用户名，密码和身份证信息为必填项。 任务1 掌握要点 onsubmit事件的使用。 表单非空验证。 实现思路 为表单绑定onsubmit事件 获取提交的表单值，判断必填项是否已填 输出结果 任务1 参考代码 任务2 任务说明 使用正则表达式验证输入内容是否非法，非法则过滤内容。合法则输出。 任务2 实现思路 设置非法内容的验证正则表达式。 获取输入内容进行匹配。 阶段2 任务3 任务说明 使用正则表达式验证电话号码的输入是否合法。 任务3 实现思路 设置用于验证的正则表达式。 获取输入的电话号码并进行匹配。 任务3 参考代码 任务4 任务说明 获取输入的用户名并判断是否有效(验证规则：数字或英文字符串+数字)。 任务4 实现思路 创建验证用户名的正则表达式 使用正则表达式与用户输入的值进行比较 任务4 作业 * * JavaScript与网页特效制作 效果演示 if (username.value == || username.value == null) { vusername.innerHTML = span style=font- color:red;用户名不允许为空！/span; return false; } else { vusername.innerHTML = ; } ……………………………… 共性问题讲解、规范代码展示 效果演示 共性问题讲解、规范代码展示 效果演示 var str=tel; //在JavaScript中，正则表达式只能使用/开头和结束，不能使用//双引号 var Expression=/(\d{3}-)?\d{8}|(\d{4}-)(\d{7})/; var objExp=new RegExp(Expression); //创建regexp对象 if(objExp.test(str)==true) {//检验是否匹配 return true; //匹配 } else{ return false; //不匹配 } 共性问题讲解、规范代码展示 效果演示 本次上机总结