要求

• • 必備知識

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

轉載于:https://www.cnblogs.com/Li-Cheng/p/3662149.html

總結

以上是生活随笔為你收集整理的自制“低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃,好吗？。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。