（水平有限，如果發現有什麼問題，歡迎指出來）

HTML+css先做出來一個登入頁，包括基本的輸入框和button。再做一個註冊頁。程式碼如下：

隨後解釋程式碼

 <form id="register" name="myForm" class="register" action="infoReceive.jsp"  method="post">
        <div class="t1">
            <input style="color:white;border-width:0px;margin:0 auto;width:150px;height:50px; background-color:rgb(125, 147, 168);"
                type='submit' onclick="TurnToLogin()" value="登入">
        </div>
        <div class="t2">
            <input style="border-width:0px;margin:0 auto;width:150px;height:50px;background-color:rgb(125, 147, 168); "
                type='submit' onclick="TurnToRegister()" value='註冊'>
        </div>
        <div class="t3">
            <input style="width:250px;height:50px;" type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
        </div>
        <div class="t3">
            <input style="width:250px;height:50px;" type="text" name="name"  required="required" placeholder="請輸入使用者名稱"></td>
        </div>
        <div class="t3">
            <input style="margin:0 auto; width:250px;height:50px;" type="password" id="pwd" required="required"
                placeholder="請輸入6-20位密碼，建議數字和字母組合"></td>
        </div>
        <div class="t3">
            <input style="margin:0 auto; width:250px;height:50px;" type="password" id="pwd2" required="required"
                placeholder="確認密碼"></td>
        </div>
        <div class="t7">
            <input style="width:120px;height:50px;" type="yanzheng" name="yanzheng" required="required" placeholder="輸入驗證碼"></td>
            <div class="t8">
            </div>
        </div>
        <div class="t5">
            <input name="tongyi" type="checkbox" required="required">我同意《使用者註冊協議》<br></td>
        </div>
        <div class="t6">
            <input style="color:white;border-width:0px;margin:0 auto; width:250px;height:50px;background-color:#187FE4;"
                type="submit" onclick="validateForm()" value="註冊"></td>
        </div>
    </form>


    <form id="login" name="myForm2" class="login" action="welcome.html" onsubmit="return checkUser();" method="post">
        <div class="t1">
            <input style="color:white;border-width:0px;margin:0 auto;width:150px;height:50px; background-color:rgb(125, 147, 168);"
                type='button' onclick="TurnToLogin()" value='登入'>&nbsp;&nbsp;&nbsp;
        </div>
        <div class="t2">
            <input style="border-width:0px;margin:0 auto;width:150px;height:50px;background-color:rgb(125, 147, 168); "
                type='button' onclick="TurnToRegister()" value='註冊'>
        </div>

        <div class="t3">
            <input style="width:250px;height:50px;" type="text" name="name2" id="loginname" placeholder="請輸入使用者名稱"></td>
        </div>
        <div class="t3">
            <input style="margin:0 auto; width:250px;height:50px;" type="password" name="pwd3" id="loginpwd"
                placeholder="請輸入密碼"></td>
        </div>

        <div class="t6">
            <input style="color:white;border-width:0px;margin:0 auto; width:250px;height:50px;background-color:#187FE4;"
                type="submit" value="登入"></td>
        </div>
    </form>
 

重要的css如下:

這是上面兩個form的樣式，關鍵在於：display: block;和display: none;

這個樣式的意思是，顯示或者不顯示。這是使登入和註冊的表單在同一靜態頁面內自由切換的關鍵之一。

​
.register{
     margin-top:100px;
     float:right;
     margin-right:200px;
     width:300px;
     height:500px;
     border:0;
     background-color:white;
     opacity: 0.75;
	 display: block;
}
 .login{
     margin-top:100px;
     float:right;
     margin-right:200px;
     width:300px;
    height:300px;
    border:0;
    background-color:white;
    opacity: 0.75;
	display: none;
 }

​
 

接下來是JavaScript的程式碼。只需在HTML的底部加上如下程式碼：

//切換登入註冊
    var TurnToLogin = () => {
        document.getElementById('login').style.display = "block";
        document.getElementById('register').style.display = "none";
    }
    var TurnToRegister = () => {
        document.getElementById('register').style.display = "block";
        document.getElementById('login').style.display = "none";
    }
 

第一個函式，從登錄檔單切換為登入表單。

document.getElementById('login').style.display = "block";//將id=login的form的style設定為block

document.getElementById('register').style.display = "none";//將id=register的form的style設定為none

第二個函式類似。

HTML中，為註冊和登入兩個按鈕新增點選事件：

<div class="t1">             <input style="color:white;border-width:0px;margin:0 auto;width:150px;height:50px;

              background-color:rgb(125, 147,       168);"   

              type='submit' onclick="TurnToLogin()" value="登入">  </div>  <div class="t2">             <input style="border-width:0px;margin:0 auto;width:150px;height:50px;background-color:rgb(125, 147, 168); "                 type='submit' onclick="TurnToRegister()" value='註冊'>  </div>

這樣就能實現登錄檔單切換到登入表單了。對login和register同樣新增點選事件。

最後，對登錄檔單新增驗證，比如郵箱格式，和必填。如下這個js函式對form新增onsubmit="validateForm()"，在表單提交時，會檢查email輸入框內的內容是否是一個正確的郵箱。

function validateForm() {

var x = document.getElementById("email").value;

var atpos = x.indexOf("@");

var dotpos = x.lastIndexOf(".");

if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {

alert("不是一個有效的 e-mail 地址");

return false;

}

}

至於必填，HTML有一個屬性，專門可以檢查是否填寫。

required="required"

在登入功能的實現中，我簡單寫了一個判斷使用者名稱和密碼的函式。併為<form id="login" name="myForm2" class="login" action="welcome.html" onsubmit="return checkUser();" method="post"> 新增onsubmit="return checkUser();"。這樣就能在提交表單時檢查使用者名稱和密碼是否正確。

    function checkUser() {
        var result = document.getElementById("loginname").value;
        var password = document.getElementById("loginpwd").value;
        if (result != "root" || password != "123456") {
            window.alert("使用者名稱或密碼不正確：內建使用者名稱root，密碼123456");
            return false;
        } else {
            return true;
        }
    }

到此，這個註冊/登入的前端頁面基本就做好了。