JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 jQuery 創建類似 Facebook 的註冊表單

簡介

Facebook 展示了出色的 UI 設計。隨著它已成為我們生活的重要組成部分,它也提高了 Web 開發的標準,推動開發人員達到更高的期望。

然而,這也有好的一面——它挑戰 Web 開發人員和設計人員,讓自己變得更好,並不斷改進他們的工作。

在本教程中,我們將向最優秀的人學習,並創建一個類似於 facebook 的註冊表單。所以繼續下載演示文件 開始學習吧!

XHTML

我們首先建立 XHTML 主幹,如 index.php 所示 在演示文件中:

<div id="div-regForm">

<div class="form-title">Sign Up</div>
<div class="form-sub-title">It's free and anyone can join</div>

<form id="regForm" action="submit.php" method="post">
<table>
<tbody>
<tr>

    <td><label for="fname">First Name:</label></td>
    <td><div class="input-container">
    <input name="fname" id="fname" type="text" />
    </div></td>

</tr>
<tr>

    <td><label for="lname">Last Name:</label></td>
    <td><div class="input-container">
    <input name="lname" id="lname" type="text" />
    </div></td>

</tr>
<tr>

    <td><label for="email">Your Email:</label></td>
    <td><div class="input-container">
    <input name="email" id="email" type="text" />
    </div></td>

</tr>
<tr>

    <td><label for="pass">New Password:</label></td>
    <td><div class="input-container">
    <input name="pass" id="pass" type="password" />
    </div></td>

</tr>
<tr>

    <td><label for="sex-select">I am:</label></td>
    <td>
    <div class="input-container">
    <select name="sex-select" id="sex-select">
    <option value="0">Select Sex:</option>
    <option value="1">Female</option>
    <option value="2">Male</option>
    </select>

    </div>
    </td>
</tr>
<tr>
    <td><label>Birthday:</label></td>
    <td>

    <div class="input-container">

    <select name="month">
    <option value="0">Month:</option>
    <?=generate_options(1,12,'callback_month')?>
    </select>

    <select name="day">
    <option value="0">Day:</option>
    <?=generate_options(1,31)?>
    </select>

    <select name="year">
    <option value="0">Year:</option>
    <?=generate_options(date('Y'),1900)?>
    </select>

    </div>

    </td>

</tr>
<tr>

    <td>&nbsp;</td>
    <td><input type="submit" class="greenButton" value="Sign Up" />
    <img id="loading" src="img/ajax-loader.gif" alt="working.." />
    </td>

</tr>

</tbody>
</table>

</form>

<div id="error">
&nbsp;
</div>

</div>

我們首先為表單創建一個 div 容器,並為其分配 id div-regForm .我們將在其中定位各種表單組件。

稍後我們會創建表單的標題,使用 CSS 進行適當的樣式設置,稍後您會看到。

然後我們有表格本身。這裡需要注意的是,表單實際上並不是由它自己提交的——它都是通過 AJAX 完成的,這意味著你要在 方法 中輸入什麼並不重要 和動作 屬性。

在表單內部,我們放置一個表格,這將使我們能夠輕鬆地為表單標籤和字段創建網格佈局。自從 div 佈局開始流行以來,就以這種方式使用表格一直存在爭議,但請注意 facebook 本身 正在使用相同的技術,它自動為我贏得了它。

每個輸入字段都有各自的標籤 元素作為一個,你猜對了 - 一個字段標籤。我們甚至使用 for 屬性,意思是點擊標籤,選擇右邊的文本框。

接下來是一個選擇框,在此之後我們有 3 行非常有趣的行,我已經為您突出顯示了。我們使用一個簡潔的 PHP 小函數來生成所有 選項 進入包含選擇出生日期的選擇框的元素。我們將在一分鐘內討論這個問題。

後來我們有了註冊按鈕和一個小 gif,默認情況下它是隱藏的,只有在 AJAX 請求進行時才會顯示。

最後一個 div 元素是我們的錯誤容器,默認也是隱藏的。

CSS

為了將我們簡單的 XHML 編碼轉換為引人注目且類似於 facebook 的東西,我們需要一些嚴肅的樣式。

讓我們看看我們在 demo.css 中定義的 CSS .

/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
    margin:0px;
    padding:0px;
}

body{
    margin-top:20px;
    font-family:Arial, Helvetica, sans-serif;
    color:#51555C;
    height:100%;

    font-size:11px;
}

/* Form styles */

input,select{
    padding:3px;
    color:#333333;

    border:1px solid #96A6C5;
    margin-top:2px;
    width:200px;
    font-size:11px;
}

select{
    width:auto;
    padding:2px;
}

.formline{
    padding:3px;
}

label{
    font-size:11px;
    text-align:right;
}

table{
    width:300px;
}

td{
    font-size:11px;
}

.input-container{
    padding:1px;
}

#div-regForm,.registered{
    border:3px solid #eeeeee;
    padding:15px;

    background:url(img/bg.jpg) repeat-x #cbd4e4;
    color:#203360;

    margin:30px auto 40px auto;
    width:400px;
}

.form-title,
.form-sub-title{
    font-size:20px;

    font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
    font-size:20px;
    font-weight:bold;
}

.form-sub-title{
    font-weight:normal;
    padding:6px 0 15px 0;
}

.greenButton{
    width:auto;
    margin:10px 0 0 2px;
    padding:3px 4px 3px 4px;
    color:white;
    background-color:#589d39;
    outline:none;
    border:1px solid #006600;
    font-weight:bold;
}

.greenButton:active{
    background-color:#006600;
    padding:4px 3px 2px 5px;
}

#loading{
    left:10px;
    position:relative;
    top:3px;
    visibility:hidden;
}

#error{
    background-color:#ffebe8;
    border:1px solid #dd3c10;
    padding:7px 3px;
    text-align:center;
    margin-top:10px;
    visibility:hidden;
}

第 1-6 行是我們重置的地方 一些 XHTML 元素,以確保它們在所有瀏覽器中顯示相同。

我們繼續為 body 設置樣式 部分並開始設置表單元素的樣式。

我們設計的第一個元素是 input選擇 . Select 與輸入共享其大部分樣式,但寬度和填充也不同,因此我們添加了一組額外的樣式來覆蓋它們。

它主要是寬度和填充到第 81 行,我們在這裡設置了註冊按鈕的樣式。我們有兩種 normal 的樣式 、非按下狀態和活動 , 按下狀態。活動狀態的作用是將按鈕的文本標籤移動到右下角一個像素,同時使背景變暗,從而產生按鈕被按下的錯覺。

最後兩個樣式是#loading#error ,通過它們的 ID 選擇相應的元素並用 visibility:hidden 隱藏它們 默認。我們只會在合適的時候用 jQuery 來展示它們。

PHP 代碼

請記住,幾分鐘前我提到了 generate_options PHP函數?
在這裡,取自我們的 functions.php 文件:

function generate_options($from,$to,$callback=false)
{
    $reverse=false;

    if($from>$to)
    {
        $tmp=$from;
        $from=$to;
        $to=$tmp;

        $reverse=true;
    }

    $return_string=array();
    for($i=$from;$i<=$to;$i++)
    {
        $return_string[]='
        <option value="'.$i.'">'.($callback?$callback($i):$i).'</option>
        ';
    }

    if($reverse)
    {
        $return_string=array_reverse($return_string);
    }

    return join('',$return_string);
}

function callback_month($month)
{
    return date('M',mktime(0,0,0,$month,1));
}

/* and here is how we use it (taken from our XHTML code above):
generate_options(1,31);             // generate days
generate_options(date('Y'),1900);           // generate years, in reverse
generate_options(1,12,'callback_month');        // generate months
*/

這是一個簡潔的代碼和平。現在讓我們解釋一下它的作用。

您在我們的 generate_options 中註意到的第一件事 函數是參數$from$to 用於生成的選項範圍(在我們的例子中是天、月和年),以及一個可選參數 $callback ,這是一個回調函數(稍後會詳細介紹)。

在函數內部,我們定義了 $reverse 作為假。如果我們以如下方式使用函數:generate_options(1,31) ,我們只是生成一系列選項元素並以相同的順序輸出它們。如果我們切換參數的位置,輸出的順序是相反的。

這正是我們在第 5 行中所做的 .我們檢查 $from 的範圍是否 和 $to 被反轉並設置 $reverse .但與此同時,我們正在交換它們的值,以便我們使用與正常生成相同的構造。如果我們還沒有這樣做,我們將不得不編寫另一個 for 來完成這項工作。

接下來我們填充一個名為 $return_string 的數組 使用生成的選項,必要時將其反轉並通過連接數組元素將其輸出為字符串。

記住 $callback 我前面講過?這是它的一部分。在第 18 行,我們檢查是否提供了 $callback - 如 generate_options(1,12,'callback_month') ,如果是,我們執行函數並提供當前的 $i 計數器的值。在實踐中,就像我們在做 callback_month($i) .

稍後我們有 callback_month 函數,我們在月份生成中用作回調。它基本上需要一個整數參數(我們的 $i 以上),並以字符串形式返回月份名稱。

jQuery 源碼

好的,現在我們已經完成了表單的外觀,我們需要能夠將數據發送到處理它的 PHP 後端。為此,我們使用了 jQuery,您可以通過將這些代碼行放在頁面的 head 部分中來將其包含在頁面中:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

該庫自動包含在 Google 的 CDN 中。之後就可以使用jQuery的ajax方法了。

這是位於 script.js 中的代碼 .

$(document).ready(function(){

    // UPDATE: commented out because the submit() method was added below instead
    //$('.greenButton').click(function(){
    //  register();

    //});

    $('#regForm').submit(function(e) {

        register();
        e.preventDefault();

    });

});

function register()
{
    hideshow('loading',1);
    error(0);

    $.ajax({
        type: "POST",
        url: "submit.php",
        data: $('#regForm').serialize(),
        dataType: "json",
        success: function(msg){

            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }

            hideshow('loading',0);
        }
    });

}

function hideshow(el,act)
{
    if(act) $('#'+el).css('visibility','visible');
    else $('#'+el).css('visibility','hidden');
}

function error(act,txt)
{
    hideshow('error',act);
    if(txt) $('#error').html(txt);
}

$(document).ready 中的第一行代碼 在頁面加載並綁定我們的 register() 後執行 使用 preventDefault() 來處理表單的 onsubmit 事件 方法來阻止表單被提交。

這是 $.ajax 的簡單性 方法(第 23 行) - 在幾行代碼中我們發送到 submit.php 通過 POST 所有 regForm 的字段(regForm 是我們註冊表單的 ID)。我們收到 JSON 格式的響應(稍後會詳細介紹),該響應由 success 中給出的函數處理 .在此示例中(第 30-37 行),我們處理返回的對象並決定是顯示錯誤,還是重定向到僅限註冊用戶的頁面。

後來我們有了 hideshow() 隱藏或顯示頁面上的元素的函數(例如我們表單上的旋轉 gif 動畫)和 error 管理表單上錯誤顯示的函數。

但是我們如何判斷表單中的信息是否正確,如果正確,將用戶重定向到哪裡呢?

這是在 submit.php 中完成的 :

// we check if everything is filled in

if(empty($_POST['fname']) || empty($_POST['lname']) || empty($_POST['email']) || empty($_POST['pass']))
{
    die('{status:0,txt:"All the fields are required"}');
}

// is the sex selected?

if(!(int)$_POST['sex-select'])
{
    die('{status:0,txt:"You have to select your sex"}');
}

// is the birthday selected?

if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
    die('{status:0,txt:"You have to fill in your birthday"}');
}

// is the email valid?

if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email'])))
    die('{status:0,txt:"You haven\'t provided a valid email"}');

echo '{status:1,txt:"registered.html"}';

在這裡,我們檢查一些最典型的錯誤情況。我們輸出的每條消息都必須格式化為帶有 status 的 javascript 對象 和 txt 特性。它們可以在我們的 AJAX 中作為 msg.txt 訪問 和 msg.status .這裡的主要思想是錯誤返回 status 值為 0 且註冊成功返回狀態 1,其中 txt 是只有註冊用戶才能訪問的資源的 URL。

*注意 根據您的需要,您必須自己添加用於插入新數據庫記錄、創建會話和進行更多錯誤檢查的代碼。

這樣我們的表格就完成了。

結論

今天,我們創建了一個外觀精美且功能強大的註冊頁面,其靈感來自 facebook 本身。我們成功地使用 jQuery 和 $.ajax 方法創建了一個實時的異步註冊表單,完成了錯誤檢查和瀏覽器重定向。


Tutorial JavaScript 教程
  1. React 教程中的用戶註冊表單(視頻)

  2. 通過 JavaScript 更改字體

  3. XHTML、CSS 和 jQuery 中的 iPhone 跳板

  4. 如何從 Jquery 中的 Object Promise 返回值

  5. 你一直在做錯 mapDispatchToProps

  6. javascript子字符串

  7. 使用鉤子反應上下文 API

  1. 使用 jQuery 檢查標題的可見項目——需要不同的方法

  2. 構建緩存裝飾器以保持您的應用程序快速🏎

  3. 使用 ESLint + Gulp 更好地編碼

  4. 在 VS Code 遠程容器/devcontainer 中使用 Next.js 開發模式快速刷新

  5. 使用 chart.js 構建您的費用跟踪器 - 第 1 部分

  6. TypeScript 的缺點?

  7. Vite vue ts tailwind模板:安裝TailwindCSS

  1. React Futures - 服務器組件

  2. 使用 Vue 更改懸停時的圖片

  3. 關於 React 路由器 4

  4. 如何使用 Typescript、ESLint、Prettier 設置 GatsbyJS 啟動器