【求助】javascript验证表单效果
最近做了一个表单，但表单验证这块没找到自己想要的效果，百度和谷歌了好久都没有找到。
我想让验证表单的提示信息，以弹出层的效果显示，之后渐渐消失
比如用户名没有输入，点击了提交，会弹出一个提示层：用户名不能为空什么的提示语句。提示层并渐渐消失的效果
请达人帮助...感激万分~~
[解决办法]
- HTML code
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>提示信息框</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <style type="text/css"> #message_box { position: absolute; width: 350px; height: 200px; z-index: 2; display:none; } #mask { position: absolute; top: 0; left: 0; background:#777; filter: alpha(opacity=60); opacity:0.6; z-index: 1; display:none; } .message { border: 1px solid #369; width: 95%; height: 95%; background: #fff; color: #036; font-size: 12px; line-height: 150%; } .header { background: #369; height: 10%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding: 3 5 0 5; color: #fff; cursor:move; } #content { margin:10px; width:290px; height:auto; } </style></head><body> 用户名：<input type="text" id="txtname" /> 密码：<input type="text" id="txtpwd" /> <input type="button" value="Login" onclick="checklogin()" /> <!--弹出层内容开始--> <div id="message_box"> <div class="message"> <div class="header"> <div style="display: inline; width: 150px;"> 提示信息 </div> <span onclick="hidebox('message_box','mask')" style="float: right; display: inline; cursor: hand" title="关闭">×</span> </div> <div id="content"> <ul> <li>3213213</li> </ul> </div> </div> </div> <!--弹出层内容结束--> <!--遮罩层--> <div id="mask"> </div> <script type="text/javascript"> //功能：显示弹出框 //参数：boxid弹出框id、maskid遮罩层id function showbox(boxid,maskid) { $("#"+maskid).css({'width':document.body.scrollWidth,'height':document.body.scrollHeight}); $("#"+boxid).css({'left':(document.body.clientWidth-$("#message_box").width())/2,'top':(document.body.clientHeight-$("#message_box").height())/2}); $("#"+maskid).show(); $("#"+boxid).show(); } //功能：关闭弹出框 //参数：boxid弹出框id、maskid遮罩层id function hidebox(boxid,maskid) { $("#"+maskid).hide(); $("#"+boxid).fadeOut('slow'); } //弹出层拖动开始(有点小问题) var mpositionX=''; var mpositionY=''; $(".header").mousedown(function(e){ mpositionX=e.pageX-$("#message_box").offset().left; mpositionY=e.pageY-$("#message_box").offset().top; $(".header").bind('mousemove',function(e){$("#message_box").css({'left':e.pageX-mpositionX,'top':e.pageY-mpositionY});}); }); $(".header").mouseup(function(){ $(".header").unbind('mousemove'); }); //弹出层拖动结束 //窗口滚动、放大缩小时重新显示弹出层 $(window).bind('scroll resize',function(){ showbox('message_box','mask'); }) //登录check function checklogin() { var msg=""; if($.trim($("#txtname").val())=="") { msg=msg+"<li>请输入用户名！</li>"; } if($.trim($("#txtpwd").val())=="") { msg=msg+"<li>请输入密码！</li>"; } if(msg!="") { $("#content").html("<ul>"+msg+"</ul>"); showbox('message_box','mask'); } else { //登录操作 } } </script></body></html>
[解决办法]
[解决办法]
- JScript code
//改写 showbox增加一个定时触发关闭弹出层函数 function showbox(boxid,maskid) { $("#"+maskid).css({'width':document.body.scrollWidth,'height':document.body.scrollHeight}); $("#"+boxid).css({'left':(document.body.clientWidth-$("#message_box").width())/2,'top':(document.body.clientHeight-$("#message_box").height())/2}); $("#"+maskid).show(); $("#"+boxid).show(); [color=#FF0000]setTimeOut(hidebox('message_box','mask'),5000); //5s之后自动调用关闭弹出层函数[/color] }//备注： function hidebox(boxid,maskid) { $("#"+maskid).hide(); [color=#FF0000]$("#"+boxid).fadeOut('slow'); //lz可以根据自己需要设置弹出层淡出的速度[/color] }
[解决办法]
- JScript code
$('#btn').click(function(){...弹出框},this(div).fadeOut('slow'));