自制“低奢內”CSS3登入表單，包含JS驗證，請別嫌棄哦。

Cheng發表於2014-04-07
CSSS3JS

要求

    • 必備知識

      基本瞭解CSS語法,初步瞭解CSS3語法知識。和JS/JQuery基本語法。

    • 開發環境

      Adobe Dreamweaver CS6

    • 演示地址

      演示地址


預覽截圖(抬抬你的滑鼠就可以看到演示地址哦):

2014-04-07_030455

製作步驟:

一, html結構

<div id="home">
     <form id="login" class="current1" method="post">           
                <h3>使用者登入</h3>
                <img class="avator" src="images/avatar.png" width="96"  height="96"/>
                <label>郵箱/名稱<input type="text" name="name" style="width:215px;" /><span>郵箱為空</span></label>
                <label>密碼<input type="password" name="pass"  /><span>密碼為空</span></label>
                <button type="button">登入</button>        
               </form> 
</div>

二, css程式碼

*{padding: 0;margin: 0;}

/* 清除浮動 */
.clearfix:after {content: "";display: table;clear: both;}
html, body { height: 100%; }
body {    font-family:"Microsoft YaHei"; background:#EBEBEB; background:url(../images/stardust.png);       font-weight: 300;  font-size: 15px;  color: #333;overflow: hidden;}
a {text-decoration: none; color:#000;}
a:hover{color:#F87982;}

/*home*/
#home{padding-top:100px;}

/*logint介面*/
#login{ padding:20px 30px 30px; width:300px; background:#FFF; margin:auto;
border-radius: 3px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.current1{
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}


.current{
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);

}
#login h3{ font-size:18px; line-height:25px; font-weight:300; letter-spacing:3px; margin-bottom:20px; color:#C8C8C8; text-align:center;}
#login label{ color:#C8C8C8; display:block; height:35px; padding:0 10px; font-size:12px; line-height:35px;  background:#EBEBEB; margin-bottom:10px;position:relative;}
#login label input{  font:13px/20px "Microsoft YaHei"; background:none;  height:20px; border:none; margin:7px 0 0 10px;width:245px;outline:none ; letter-spacing:normal;  z-index:1; position:relative;  }
#login label  span{ display:block;  height:35px; color:#F30; width:100px; position:absolute; top:0; left:190px; text-align:right;padding:0 10px 0 0; z-index:0; display:none; }
#login button{ font-family:"Microsoft YaHei"; cursor:pointer; width:300px;  height:35px; background:#FE4E5B; border:none; font-size:14px; line-height:30px;  letter-spacing:3px; color:#FFF; position:relative; margin-top:10px;
-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;}
#login button:hover{ background:#F87982; color:#000;}

/*頭像*/
.avator{
    display:block;
    margin:0 auto 20px;
    border-radius:50%;
}

三, JS程式碼

$(function(){
    $("#login").addClass("current");    
    
    /**
     * 正則檢驗郵箱
     * email 傳入郵箱
     * return true 表示驗證通過
     */
    function check_email(email) {
        if (/^[\w\-\.]+@[\w\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(email)) return true;
    }
    
    
    //input 按鍵事件
    $("input[name]").keyup(function(e){
          //禁止輸入空格  把空格替換掉
          if($(this).attr('name')=="pass"&&e.keyCode==32){
              $(this).val(function(i,v){
                  return $.trim(v);
              });
          }
          if($.trim($(this).val())!=""){
              $(this).nextAll('span').eq(0).css({display:'none'}); 
          }
    });
    
    
    //錯誤資訊
    var succ_arr=[];
    
    //input失去焦點事件
    $("input[name]").focusout(function(e){
        
            var msg="";
             if($.trim($(this).val())==""){
                  if($(this).attr('name')=='name'){
                          succ_arr[0]=false;
                          msg="登入名為空";
                  }else if($(this).attr('name')=='pass'){
                           succ_arr[1]=false;
                           msg="密碼為空";
                  }
                
            }else{
                  if($(this).attr('name')=='name'){
                          succ_arr[0]=true;
                         
                  }else if($(this).attr('name')=='pass'){
                           succ_arr[1]=true;
                           
                  }
            }
              var a=$(this).nextAll('span').eq(0);
             a.css({display:'block'}).text(msg);
    });
    
    
    //Ajax使用者註冊
    $("button[type='button']").click(function(){
         $("input[name]").focusout();  //讓所有的input標記失去一次焦點 來設定msg資訊
         for (x in succ_arr){if(succ_arr[x]==false) return;}
        // $("#login").removeClass("current");    
         var data=$('#login').serialize(); //序列化表單元素
        
        
        
        /**
             有興趣的可以到這裡 自行傳送Ajax請求 實現註冊功能
        */
         
        
        
    });
    
    
    
    
    
    
});

好吧，結束了，是不是太簡單了。那趕緊動手試試吧。如果嫌程式碼太粗糙的話，自己進行程式碼重構吧，Oh,My God! ，我剛才是不是用了一個非常專業性的技術詞彙呢?! 好吧，你們贏了，如果實在接受不了這種“低奢內”的登入表單的話，我已經到網上找了一個“高大上”的CSS3登入表單和大家分享，可以點選這裡檢視哦:

到網上收集了一個“高上大”的CSS3登入表單和大家分享一下

2014-04-07_005106

請別嫌棄它真的是太“高大上”了,好嗎？好吧，這回是真的結束了。

 

如以上文章或連結對你有幫助的話，別忘了在文章結尾處輕輕點選一下 “還不錯”按鈕或到頁面右下角點選 “贊一個” 按鈕哦。你也可以點選頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。

 

作者:Li-Cheng
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

相關文章