javascript验证表单效果-JavaSript-爱易网页

javascript验证表单效果

日期：2014-05-16　浏览次数：20298 次

【求助】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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript验证表单效果

相关资料更多>

推荐阅读更多>