自制“低奢內”CSS3註冊表單,包含JS驗證哦。請別嫌棄,好嗎?。

已邀請:

盛開txt

贊同來自:



要求






  • 必備知識


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




  • 開發環境


    Adobe Dreamweaver CS6




  • 演示地址


    演示地址



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








制作步驟:


一, html結構



<div id="home">
<div class="tip current1">
<h2>提交的信息</h2>
<div class="msg">
<p></p>
</div>
<div class="button">
<button>確認</button>
</div>
<i class="fa fa-times icon"></i>
</div>
<form id="regist" class="current1" method="post">
<h3>註冊</h3>
<label>郵箱<input type="text" name="email" /><span>郵箱為空</span></label>
<label>名稱<input type="text" name="name" /><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;}

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

.tip{background-color: #FFFFFF;width:360px; margin:auto; position:relative;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.44);

}
.tip h2{ font-weight:normal; padding:10px;border-bottom: 1px solid #E7E7E7;color:#C8C8C8;}
.tip div.msg{ padding:10px;color:#C8C8C8; border-bottom: 1px solid #E7E7E7; word-break:break-all; }
.tip div.button{ height:50px; background:#F0F0F0;}
.tip button{ float:right; margin:10px;}
.tip .icon{ display:block; position:absolute; right:15px; top:15px; color:#C8C8C8; cursor:pointer;}

/*regist界面*/
#regist{ padding:30px; width:300px; background:#FFF; margin:auto; position:relative; top:-182px;
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);

}
#regist h3{ font-size:18px; line-height:25px; font-weight:300; letter-spacing:3px; margin-bottom:22px; color:#C8C8C8;}
#regist label{ color:#C8C8C8; display:block; height:35px; padding:0 10px; font-size:12px; line-height:35px; background:#EBEBEB; margin-bottom:28px;position:relative;}
#regist 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; }
#regist 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; }
#regist button,.tip button{ font-family:"Microsoft YaHei"; cursor:pointer; width:90px; height:30px; background:#FE4E5B; border:none; font-size:14px; line-height:30px; letter-spacing:3px; color:#FFF; position:relative;
-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;}
#regist button:hover,.tip button:hover{ background:#F87982; color:#000;}

三, JS代碼



$(function(){
$("#regist").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')=='email'){
succ_arr[2]=false;
msg="郵箱為空";
}

}else{
if($(this).attr('name')=='name'){
succ_arr[0]=true;

}else if($(this).attr('name')=='pass'){
succ_arr[1]=true;

}else if($(this).attr('name')=='email'){
succ_arr[2]=true;
if(!check_email($.trim($(this).val()))){
succ_arr[2]=false;
msg="格式不正確";
}
}
}
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;}
$("#regist").removeClass("current");
$(".tip").addClass("current");
var data=$('#regist').serialize(); //序列化表單元素
$(".tip p").html(data);

/**
有興趣的可以到這裡 自行發送Ajax請求 實現註冊功能
*/

});

$(".tip button,.tip i").click(function(){
$("#regist").addClass("current");
$(".tip").removeClass("current");
$("input[name]").val("");
});

});

這是要結束瞭嗎?是的,結束瞭。是不是很簡單呢?等等,好像少瞭一點一樣,哦,代碼需要引入瞭Font Awesome矢量字體圖標呢! 可這是什麼東西呢?點擊下面鏈接進行查看吧:


Font Awesome 4.0.3 提供瞭369個網頁常用的矢量字體圖標,新浪、人人 的矢量圖標也到其中喲


關於登入表單可以點擊這裡查看:


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


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


作者:Li-Cheng


出處: http://www.cnblogs.com/Li-Cheng/p/3662149.html


本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。

要回復問題請先登錄註冊