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

1、JavaScript与网页特效制作与网页特效制作上机上机6 6JavaScriptJavaScript表单验证表单验证回顾回顾 如何判断一个字符串是否为数字格式？如何判断一个字符串是否为数字格式？ 客户端验证的优势是什么？客户端验证的优势是什么？ 什么是正则表达式？什么是正则表达式？ 身份证正则表达式如何书写？身份证正则表达式如何书写？上机任务上机任务 表单验证表单验证 非法内容过滤非法内容过滤 号码验证号码验证 用户名有效性验证用户名有效性验证 训练技能点训练技能点 掌握基本的非空验证。掌握基本的非空验证。 掌握正则表达式验证。掌握正则表达式验证。 任务说明任务说明 页面包含相关身份信息的表

2、单，等待用户输入，提交数据时验证表页面包含相关身份信息的表单，等待用户输入，提交数据时验证表单是否正确填写，其中用户名，密码和身份证信息为必填项。单是否正确填写，其中用户名，密码和身份证信息为必填项。 任务任务1效果演示效果演示任务任务1 掌握要点掌握要点onsubmit事件的使用。事件的使用。表单非空验证。表单非空验证。 实现思路实现思路为表单绑定为表单绑定onsubmit事件事件获取提交的表单值，判断必填项是否已填获取提交的表单值，判断必填项是否已填输出结果输出结果任务任务1 参考代码参考代码if (username.value = | username.value = null) vus

3、ername.innerHTML = 用户名不允许为空！用户名不允许为空！;return false; else vusername.innerHTML = ;共性问题讲解、规范代码展示共性问题讲解、规范代码展示任务任务2 任务说明任务说明 使用正则表达式验证输入内容是否非法，非法则过滤内容。合法则使用正则表达式验证输入内容是否非法，非法则过滤内容。合法则输出。输出。 效果演示效果演示任务任务2 实现思路实现思路 设置非法内容的验证正则表达式。设置非法内容的验证正则表达式。 获取输入内容进行匹配。获取输入内容进行匹配。 阶段阶段2共性问题讲解、规范代码展示共性问题讲解、规范代码展示任务任务3

4、任务说明任务说明 使用正则表达式验证使用正则表达式验证 号码的输入是否合法。号码的输入是否合法。 效果演示效果演示任务任务3 实现思路实现思路 设置用于验证的正则表达式。设置用于验证的正则表达式。 获取输入的获取输入的 号码并进行匹配。号码并进行匹配。 任务任务3 参考代码参考代码var str=tel;/在在JavaScript中，正则表达式只能使用中，正则表达式只能使用/开头和结束，不能使用开头和结束，不能使用/双双引号引号 var Expression=/(d3-)?d8|(d4-)(d7)/; var objExp=new RegExp(Expression);/创建创建regexp对象对象 if(objExp.test(str)=true) /检验是否匹配检验是否匹配 return true; /匹配匹配 else return false; /不匹配不匹配 共性问题讲解、规范代码展示共性问题讲解、规范代码展示任务任务4 任务说明任务说明 获取输入的用户名并判断是否有效获取输入的用户名并判断是否有效(验证规则：数字或英文字符串验证规则：数字或英文字符串+数字数字)。 效果演示效果演示任务任务4 实现思路实现思路 创建验证用户名的正则表达式创建验证用户名的正则表达式 使用正则表达