《javascript经典案例javascript表单验证及事件（精）》由会员分享，可在线阅读，更多相关《javascript经典案例javascript表单验证及事件（精）（65页珍藏版）》请在金锄头文库上搜索。
1、第二讲 表单验证及事件,1.,2.,3.,4.,目 录,String对象,常用的String对象 使用 var 语句 var newstr = “这是我的字符串“ 创建 String 对象 var newstr = new String(“这是我的字符串“) 调用方法和属性 字符串对象.属性名 字符串对象.方法名( ),String对象,String对象常用的属性和方法,语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置；如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起
2、始位置是0,数值判断函数,数值判断函数 功能：判断变量的值是否为数值，“NaN”代表“Not a Number”，若返回值为true，则表示自变量不是数值。 语法：isNaN(测试值),数学(Math)对象,数学(Math)对象 方法： abs() 返回某数的绝对值 acos() 返回某数的反余弦值(以弧度为单位) asin() 返回某数的反正弦值(以弧度为单位) atan() 返回某数的反正切值(以弧度为单位) ceil() 返回大于或等于指定数的最小整数 floor() 与ceil相反 max() 返回两数间的较大值 min() 返回两数间的较小值 pow() 返回m的n次方(其中,m为底
3、,n为指数) random() 返回0和1之间的一个伪随机数 round() 返回某数四舍五入之后的整数,日期时间(Date)对象,格式： 对象名 = new Date ( 日期参数 ) 举例： today = new Date () /以当日时间为对象初值。,日期时间(Date)对象方法:,getYear()返回年份值 getMonth() 返回月份值 getDate() 并返回日期 getDay() 返回星期几 getHours() 返回小时数 getMinutes() 返回分钟数 getSeconds() 返回秒数 getTime() 返回完整的时间 setDate() 改变Date对象
4、的日期 setHours() 改变小时数 setMinutes() 改变分钟数 setMonth() 改变月份 setSeconds() 改变秒数 setTime() 改变完整的时间 setYear() 改变年份 setTimeout 按照间隔时间(毫秒)来调用函数,日期时间(Date)对象,月份数为（0-11） 日期数为（1-31） 星期数为（0-6） 小时数为（0-23） 分钟数为（0-59） 秒数为 （0-59） 毫秒数为（0-999）,Date对象做时钟显示, function disptime( ) var now= new Date( ) ; var hour = now.getH
5、ours() ; if (hour=0 ,获得当前日期和时间,获得小时，即当前是几点,月份数字011，注意1,Date对象做时钟显示,上一页PPT示例中时钟不能动态改变，怎么办？,由于时间在不停地走，所以应该每隔1秒调用显示时间的方法。如何解决？,使用setTimeout( )方法每隔1秒调用显示时间的方法,setTimeout的用法： setTimeout（“调用的函数”,”定时的时间”） 例：var myTimesetTimeout( “disptime( )”, 1000 ) ;,每隔1000毫秒执行函数disptime( )一次,Date对象做时钟显示, function dispti
6、me( ) var time = new Date( ); /获得当前时间 var hour = time.getHours( ); /获得小时、分钟、秒 var minute = time.getMinutes( ); var second = time.getSeconds( ); document.myform.myclock.value =hour+“:“+minute+“:“+second+“ “ ; var myTime = setTimeout(“disptime()“,1000); 当前时间： ,设置文本框的内容为当前时间,设置定时器每隔1秒(1000毫秒),调用函数dispt
7、ime()执行,小结2,编写如左图所示，具有在网页中指定位 置显示动态时钟效果的页面。,自动动态变化的时钟,为什么需要表单验证,服务器,IE,脚本在客户端执行，减轻服务器端的压力,发送请求,返回响应,发送请求,返回响应,发送请求,返回响应,表单验证的内容-1,不能为空且不能有数字,不能为空且不能有数字,不能为空，且只能包括字母、数字和下划线字符,表单验证的内容-2,不能为空且包含字符和.,只能二选一,年月日不能为空，且不能超出其要求的范围,表单验证的思路,如何编写脚本验证表单？,1、获取表单元素的值（String类型），然后进行判断,2、触发表单（FORM）的提交事件（onSubmit）,表单
8、验证的思路,检查电子邮件email 是否包含“”和”.”, function checkEmail( ) var strEmail=document.myform.txtEmail.value; if (strEmail.length=0) alert(“电子邮件不能为空!“); return false; if (strEmail.indexOf(“,0)=-1) alert(“电子邮件格式不正确n必须包含符号！“); return false; if (strEmail.indexOf(“.“,0)=-1) alert(“电子邮件格式不正确n必须包含.符号！“); return false
9、; return true; ,返回结果-1表示没找到“”字符,获取表单元素的值,表单的提交事件,表单验证的思路,表单验证的思路, function checkUserName() /验证用户名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;i 0) alert(“名字中包含数字 n“+“请删除名字中的数字和特殊字符“); return false else alert(“请输入“名字”文本框“); document.myform.txtUser.focus(); return false re
10、turn true; ,验证用户名不能包含数字,获取表单元素的值,表单验证的思路, function passCheck() /验证密码 var userpass = document.myform.txtPassword.value; if(userpass = “) alert(“未输入密码 n“ + “请输入密码“); document.myform.txtPassword.focus(); return false; if(userpass.length ,验证密码不少于6位,获取表单元素的值,表单验证的思路, function validateform() if(checkUserN
11、ame() ,同时调用验证用户名和验证密码方法,表单的提交事件,触发表单提交事件,小结 1,编写如下图所示，实现登录表单的验证功能,文本框控件,如何实现如下图所示，完善电子邮件的例子。,用户单击时,邮箱的提示信息自动清除,提示电子邮件格式不对,输入的信息自动被选中并高亮显示,文本框控件,文本框对象的常用属性、方法、事件,使用文本框对象的相关方法，实现选中效果,文本框控件, . function clearText( ) if (document.myform.txtEmail.value=“请输入真实的电子邮箱，我们将 发送激活密码“) document.myform.txtEmail.val
12、ue=“ ; document.myform.txtEmail.style.color=“red“; *必填 ,清空文本框的内容,修改文本框的颜色,文本框获得焦点就调用方法clearText( ),小结 2,编写如下图所示，实现注册表单的验证功能,年份必须是20打头,日期必须在1到31之间,常见错误-1, function validateform( ) if(sNameCheck() ,提交按钮type=“submit“,清空按钮type=“reset“,常见错误-2, function validateform( ) if(sNameCheck() ,onsubmit不是登录按钮的事件,常
13、见的事件,如何使用图片代替提交按钮,为了美观，现把提交按钮变成图片，但仍然保持 表单的验证功能？如何实现？,使用图片的单击事件。onClick=“checkForm( )“,如何使用图片代替提交按钮,根据上述分析和提供的素材页面来实现表单验证。,素材页面, function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(“用户名不能为空！“); document.myform.txtUserName.focus( ); ,检验是否为空,单击事件，调用表单验证函数,如何使用图片代替提交按钮,能进行表单验证，
14、但即使是正确填写了表单，也 不能提交页面（点击“注册”没反映）。,如何使用图片代替提交按钮,因为图片不具备“提交”按钮的提交功能，所以需 要人工调用提交方法 submit( ) 。, function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(“用户名不能为空！“); document.myform.txtUserName.focus( ); else document.myform.submit( ); ,查看源代码,如果表单输入合法，则提交表单,制作回车切换输入的效果,输入完毕后回车，默认会提交表
15、单。 页面效果 如何制作回车Tab切换效果？ 页面效果,keyCode代码,制作回车切换输入的效果,1、 使用键盘输入事件onKeyDown事件 2、 检查输入是否是回车键ASCII码13，若是则将 输入改为Tab键ASCII码9, function changeFocus( ) if (event.keyCode=13) event.keyCode=9; ,键盘按下，调用实 现Tab效果的函数,修改回车键为Tab键,Event事件对象包含输入键信息,制作回车切换输入的效果,上述注册页面中，需要给每个文本框添加键盘按 下事件，有没有更简单的办法？, ,keyCode：得到在键盘上按下的键 srcElement： .type 得到标签类型 .tagname 得到标签名称,event对象,制作回车切换输入的效果,通过给document对象添加键盘事件。, function changeFocus( ) if (event.keyCode=13 /调用表单的onKeyDown事件 ,如果按键是回车键，并且控件类型不是提交、重置按钮等按钮，则变为Tab切换,document对象的onKeyDown事件，它将接收页面中所有的键盘事件,数
