H JavaScript表单验证.pptVIP

onSubmit form action= method= name=reg_form onSubmit=return validate() …... /form * 讲解要点： 我们上网时，一般是在IE浏览器中，键入某个网址：如，然后打开google网页， 引出浏览器对象。为了让学员容易理解，不要1求过去完整而枯燥的概念定义。 1）整个浏览器窗口，称为window窗口对象。 2）窗口对象又包括上方的地址栏和下方的页面内容。地址栏称为location地址对象，表示网页的地址信息。 3）下方的页面内容代表整个网页文档，称为document文档对象，存放网页的文档信息。 4）文档对象又包含段落、图片、表单等。例如表单对象FORM 5) 总结：从这张图可以看出，浏览器对象是分层次的. 所以表单中的文本框完整的名称应该是： window.document.myform.text1 ，其中window可以省略，所以我们前面写为： document.myform.text1 就是这样来的。 * * 演示：参考TG7-Source 文件夹中的外部js文件用例 * * JavaScript表单验证 * 回顾 Date对象 定时器 事件 * 本章目标 String字符串函数 表单基本验证 表单验证特效 外部JS文件 * String 字符串作用： 可用于处理或格式化文本字符串以及确定和定位字符串中的子字符串。 属性： length：表示字符串长度，即字符串中字符的个数。 * String方法 字符串方法： charAt(n)：返回指定位置的字符 indexOf()：返回指定字符串的下标位置 lastIndexOf()：返回指定字符串最后一次出现的位置。 substring(start，end)：返回从指定起始位置到指定结束位置的字符串。 substr(start，length)：返回指定起始位置指定长度的字符串。 表单验证 JavaScript 最常见的用法之一就是验证表单 对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript 是一种十分便捷的方法 * 表单验证 script language=JavaScript function validate( ){ var f=document.reg_form; if(f.uname.value==){ alert(请输入姓名); f.uname.focus(); return false; } if ((f.password.value.length 6) || (f.password.value == )){ alert(请输入至少 6 个字符的密码！); f.password.select(); return false; } if (f.age.value1 || f.age.value 99 || isNaN(f.age.value)) { alert(请输入有效的年龄！); f.age.focus(); return false; } 检查姓名 检查年龄 检查密码 * 表单验证 if (f.gender[0].checked==false f.gender[1].checked==false){ alert(请指定性别); f.gender[0].focus(); return false; } q=f.email.value.indexOf(@); if (q==-1) { alert(请输入有效的电子邮件地址); f.email.focus(); return false; } return true; } /script 检查邮件地址 检查性别 * focus() 使表单控件自动获得焦点 select() 自动选中文本框内的文本 相关函数 * * 表单验证特效 常用的表单验证效果 信息弹出方式 * 表单验证特效 常用的表单验证效果 信息提示方式 innerHTML innerHTML可以获取或修改某个HTML标签内包含的内容(包括标签与文本) * div id=div1h2innerHTML/h2/div script alert(document.getElementById(div1).innerHTML); /script * 失去焦点时验证 script language=javascript function checkname(){ //验证用户名 var uname = document.getElementById(uname); var unamel = document.getElementById