CJavaScript表单验证.ppt

1,JavaScript及表单验证,2,本章目标,JavaScript表单基本验证外部JS文件,3,JavaScript简介,JavaScript主要增加页面的互动性。JavaScript和Java是两种完全不同的东西，只是名称有些相似。B/S结构中Java运行在服务端，JavaScript运行在客户端。JavaScript本质是一个文档，所以可以使用文本编辑器来编写JavaScript代码。最简单使用记事本编辑。,4,将JavaScript嵌入网页,可以将JavaScript语句插入HTML文档，方式如下：使用标签将语句嵌入文档.将JavaScript源文件链接到HTML文档中,JS基础,变量，常量数据类型语句结构函数,6,Js对象String,String字符串：可用于处理或格式化文本字符串以及确定和定位字符串中的子字符串。属性：length：表示字符串长度，即字符串中字符的个数。,7,String,字符串方法：charAt(n)：返回指定位置的字符indexOf()：返回指定字符的下标位置lastIndexOf()：返回指定的字符的最后一次出现的位置。substring(start，end)：返回从指定起始位置到指定结束位置的字符串。substr(start，length)：返回从指定起始位置的指定长度的字符串。,事件处理,事件是发生并得到处理的操作,事件：电话振铃,处理事件,8,事件源,表单验证,JavaScript最常见的用法之一就是验证表单对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript是一种十分便捷的方法,表单验证,用户名：密箱：,表单验证,functionvalidate()varf=document.reg_form;if(f.uname.value=)alert(请输入姓名);f.uname.focus();returnfalse;if(f.password.value.length99|isNaN(f.age.value)alert(请输入有效的年龄！);f.age.focus();returnfalse;,检查姓名,检查年龄,检查密码,表单验证,if(f.gender0.checked=false,检查邮件地址,检查性别,focus()使表单控件自动获得焦点select()自动选中文本框内的文本,相关函数,14,表单验证特效,常用的表单验证效果信息弹出方式,15,表单验证特效,常用的表单验证效果信息提示方式,innerHTML,innerHTML可以获取或修改某个HTML标签内包含的内容(包括标签与文本),16,innerHTMLalert(document.getElementById(div1).innerHTML);,17,失去焦点时验证,functioncheckname()/验证用户名varuname=document.getElementById(uname);varunamel=document.getElementById(unamel);if(uname.value=|uname.value.length10)/alert(用户名长度不符合规范);unamel.innerHTML=用户名长度不符合规范;unamel.style.color=red;elseunamel.innerHTML=用户名可用;unamel.style.color=green;,失去焦点时验证,18,functioncheckUserID()/检验用户名,检查密码安全性（HTML部分）,19,.levelbackground-color:#999999;margin:0.5px;,检查密码安全性（JS部分1）,20,functioncheckpass()varpwd=document.getElementById(passWord).value;varweak=document.getElementById(weak);varnormal=document.getElementById(normal);varstrong=document.getElementById(strong);varflag=2;if(pwd.length6)flag=0;elseif(!isNaN(pwd)flag=1;,检查密码安全性（JS部分2）,21,switch(flag)case0:weak.style.background=red;normal.style.background=#999999;strong.style.background=#999999;break;case1:weak.style.background=yellow;normal.style.background=yellow;strong.style.background=#999999;break;case2:weak.style.background=green;normal.style.background=green;strong.style.background=green;break;,22,使用外部JS文件,外部JavaScript文件可以链接到HTML文档中script标签的src（源文件）属性可用于包括此外部文件,23,使用外部JS文件,JavaScript代码(test.html),使用外部文件以上文本是通过访问外部JavaScript文件显示,24,总结,JavaScript表单基本验证外部JS文件,