随笔 - 0, 文章 - 75, 评论 - 0, 引用 - 0
数据加载中……

表单验证的相关事件和辅助特效

制作图片代替按钮的提交效果:


<img src="images/regquick.jpg" width="114" height="27" onClick="checkForm()" onmouseover="cursor:pointer">


通过onclick事件,调用方法checkForm检查或提交



function checkForm(){


if(document.myform.txtUserName.value.length==0){


alert("用户名不能为空");


document.myform.txtUserName.focus();
//让txtUserName获得焦点



else{


document.myform.submit();
//提交


}


}



制作回车切换输入的效果:


function changeFocus(){


if(event.keyCode==13)
//判断按键是否是回车键


event.keyCode=9;
//设置按键为Tab键


}



<input type="text" onKeyDown="changeFocus()">


onKeyDown为键盘输入事件,它是当键盘上的一个键被下压时,就会发生onKeyDown事件



如果有多个文本框,都想实现回车切换输入效果,用一个统一的对象的onKeyDown事件来代替,可以增加代码的复用性。


function changeFocus(){


if(event.keyCode==13 && event.srcElement.type!='button' &&


event.srcElement.type!='submit' && event.srcElement.type!='')


event.keyCode=9;


}


document.onKeyDown = changeFocus;
//document对象的onKeyDown事件


解释:判断按下回车键的控件类型:不能是按钮、提交按钮、不能为空,在除此之外的其他控件类型上,只要按回车键,就实现Tab切换效果


event.srcElement表示返回触发事件的元素


event.srcElement.type表示捕获事件元素的类型,对应HTML中的元素的type值



制作输入提示的特效:


首先插入一个层,用来做提示信息


<div id="loginError" style="display:inline">


设置DIV的显示方式为inline,即和文本同一行


function checkLogin(){


var myDiv=document.getElementByIdx_x("loginError");


myDiv.innerHTML="";


var strName=document.userfrm.loginName.value;


if(strName.length==0){


myDiv.innerHTML="<font
color='red'>用户名不能为空</font>";


return;


}


}


<input type="text" onblur="checkLogin()">


当失去焦点时,调用checkLogin()方法验证输入



制作内容动态改变的层特效:(类似于手机充值、点卡切换效果)


第一种:


通过改变DIV的innerHTML,适用于动态显示的内容较少时


第二种:


当动态显示的内容较多,并相对固定时,则应该预先制作好DIV内容


然后使用myDiv.style.display="none/block",来动态改变层的隐藏或显示



制作过程:


1.制作静态页面


2.分别添加2个层,用来显示切换效果


3.写一个初始化DIV1层不显示的函数InitDIV()


function InitDIV(){


document.getElementByIdx_x("DIV1").style.display="none";


}


<body onload="InitDIV()"> //页面加载时,自动隐藏DIV1层


4.编写函数,用来显示和隐藏2个层的切换


function displayDIV(){


if(document.myform.methodRadio[0].checked==true){
//表示是否选中了第一个单选按钮



document.getElementByIdx_x("DIV1").style.display="block";


document.getElementByIdx_x("DIV2").style.display="none";


}


else{



document.getElementByIdx_x("DIV2").style.display="block";


document.getElementByIdx_x("DIV1").style.display="none";


}


}


 



posted on 2012-04-22 15:18 hantai 阅读(101) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: