网站开发技术

记点笔记、 学点技术 欢迎交流建站技术。本站关注lamp技术

您尚未登录。

#1 2014-11-12 09:31:40

刘牛德
会员

制作一个漂亮的登陆界面

<?php

// 获取post 数据
function post($s="") {
    if($s) {
       return isset($_POST[$s]) ? $_POST[$s] :  "";
    } else {
        return $_POST;
    }
}


    $name = post('name');
    $password = post('password');
    
//    $name = 'admin';
//    $password = '123';

    // 这里判断结果验证的结果,
    if($name && $password) {
        if(("admin" === $name ) && ("123" === $password)) {
            // 结果是正确的处理     
            setcookie( 'date', md5($name).'@'.md5($password) );
            echo "0";    
        } else {
            // 结果是错误的处理
            echo "2";    die();
        }
    }
    
?>

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>欢迎登陆</title>
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
        <script>
            $(function() {

               $("#submit").click(function() {
                   htmlobj = $.ajax({
                      type:"post",
                      url: "logo.php",
                      data: "name="+$("#name").val()+"&"+"password="+$("#password").val(),
                      async: false,
                      datatype: 'text',
                      success: function(data) {
                        
                      }
                   });
                   
                   // 0 表示成功  1 表示用户名错误(当然密码也是错误的) 2 表示密码错误 
                   x = parseInt((htmlobj.responseText).toString());

                  switch(x) {
                      case 0 :
                           $(".name_wrong").hide();
                           $(".password_wrong").hide();
                           window.location.href="index.php";
                           break;
                      case 1 :
                           $(".name_wrong").show();
                           $(".password_wrong").show();
                           break;
                      case 2 :
                           $(".name_wrong").hide();
                           $(".password_wrong").show();
                      default :
                           break;
                  }
               });
            });
        
        </script>
        <style>
            body { background-color: rgb(235,245,241); }
            #logo { width: 400px; margin: 0 auto; margin-top: 100px;  padding: 50px;  }
            form { position: relative; }
            .info { font-size: 18px; font-weight: bold; height: 35px;  margin: 0 auto; line-height: 40px; }
            input { width:240px; height: 25px; font-size: 18px; padding-left: 10px; margin: 0 auto; line-height: 25px; }
            fieldset { padding-left: 70px;  border-radius: 10px; }
            #submit { font-size: 16px; margin-top: 20px; width: 60px; height: 27px; }
            legend { font-size: 20px; font-weight: bolder; }
            .name_wrong { display: none;  color: red; width: 30px; position: absolute;  top: 62px; left: 340px; font-size: 30px; font-weight: 800; }
            .password_wrong { display: none; color: red; position: absolute;   top: 128px; left: 340px; font-size: 30px; font-weight: 800; }
        </style>
  
        
    </head>
    <body>
        <div id="logo">
            <form action="" method="post">
                <fieldset>
                <legend>欢迎&nbsp;☆登陆☆&nbsp;</legend>
                <div class="info">名字</div>
                <input type="text" name="name" id="name"/> <div class="name_wrong">×</div>
                <div class="info">密码</div> <div class="password_wrong">×</div>
                <input type="password" name="password" id="password"/>
                <input type="button" value="提交" id="submit"/>
                </fieldset>
            </form>
        </div>
    </body>
</html>


离线

页脚

Powered by FluxBB