最近做了一个表单,但表单验证这块没找到自己想要的效果,百度和谷歌了好久都没有找到。
我想让验证表单的提示信息,以弹出层的效果显示,之后渐渐消失
比如用户名没有输入,点击了提交,会弹出一个提示层:用户名不能为空什么的提示语句。提示层并渐渐消失的效果
请达人帮助...感激万分~~
------解决方案--------------------
- 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>