HTML + CSS + JavaScript 實現註冊頁面信息驗證（表單驗證）

時間 2020-07-26

標籤 html css javascript 實現註冊頁面信息驗證表單欄目 HTML 简体版

原文原文鏈接

要求

建立一個註冊頁面，以下圖。html

而後再對註冊信息進行判斷，判斷其是否符合要求。（如：密碼6-12位字符，不能有空格等）正則表達式

圖片素材以下：瀏覽器

註冊頁面的整個框架

註冊頁面框架分析

頁面內容主要分爲三個部分：框架

咱們能夠使用三個塊標籤，能夠將這三個部分分別放到每一個塊標籤中。post

註冊頁面框架的實現

第一部分：兩個段落文本測試

<!-- 左邊部分 -->
<div class="rg_left">
    <p>新用戶註冊</p>
    <p>USER REGISTER</p>
</div>

第二部分：一個表單字體

<!-- 中間部分 -->
<div class="rg_center">
    <!-- 定義表單 form -->
    <form action="#" method="post">
        <!-- 定義一個表格 -->
        <table>
            <!-- 表格第一行有兩個單元格：用戶名 + 輸入用戶名信息區域 -->
            <tr>
                <!-- 定義一個標籤：用戶名 -->
                <td class="td_left"><label for="username">用戶名</label></td>
                <!-- 定義輸入用戶名信息的框框 -->
                <td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入用戶名"></td>
            </tr>

            <!-- 表格第二行有兩個單元格：密碼 + 輸入密碼區域 -->
            <tr>
                <!-- 定義一個標籤：密碼 -->
                <td class="td_left"><label for="password">密碼</label></td>
                <!-- 定義輸入密碼的框框 -->
                <td class="td_right"><input type="password" name="password" id="password" placeholder="請輸入密碼"></td>
            </tr>

            <!-- 表格第三行有兩個單元格：郵箱 + 輸入郵箱區域 -->
            <tr>
                <!-- 定義一個標籤：郵箱 -->
                <td class="td_left"><label for="email">Email</label></td>
                <!-- 定義輸入郵箱的框框 -->
                <td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
            </tr>

            <!-- 表格第四行有兩個單元格：姓名 + 輸入姓名區域 -->
            <tr>
                <!-- 定義一個標籤：姓名 -->
                <td class="td_left"><label for="name">姓名</label></td>
                <!-- 定義輸入姓名的框框 -->
                <td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td>
            </tr>

            <!-- 表格第五行有兩個單元格：手機號 + 輸入手機號碼區域 -->
            <tr>
                <!-- 定義一個標籤：手機號 -->
                <td class="td_left"><label for="tel">手機號</label></td>
                <!-- 定義輸入手機號碼的框框 -->
                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td>
            </tr>

            <!-- 表格第六行有兩個單元格：性別 + 選擇性別的按鈕 -->
            <tr>
                <!-- 定義一個標籤：性別 -->
                <td class="td_left"><label>性別</label></td>
                <!-- 定義兩個選擇按鈕：一個按鈕"男"，一個按鈕"女" -->
                <td class="td_right">
                    <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td>
            </tr>

            <!-- 表格第七行有兩個單元格：出生日期 + 選擇出生日期控件 -->
            <tr>
                <!-- 定義一個標籤：出生日期 -->
                <td class="td_left"><label for="birthday">出生日期</label></td>
                <!-- 定義選擇出生日期控件 -->
                <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
            </tr>

            <!-- 表格第八行有兩個單元格：驗證碼 + （輸入驗證碼區域 + 驗證碼圖片） -->
            <tr>
                <!-- 定義一個標籤：驗證碼 -->
                <td class="td_left"><label for="checkcode" >驗證碼</label></td>
                <!-- 定義輸入驗證碼的框框 -->
                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
                    <!-- 驗證碼圖片 -->
                    <img id="img_check" src="img/verify_code.jpg">
                </td>
            </tr>

            <!-- 表格第八行有一個單元格：註冊按鈕 -->
            <tr>
                <!-- 定義一個提交按鈕 -->
                <td colspan="2" align="center"><input type="submit" id="btn_sub" value="註冊"></td>
            </tr>
        </table>
    </form>
</div>

第三部分：登陸/有帳號url

<!-- 右邊部分 -->
<div class="rg_right ">
    <p>已有帳號？<a href="#">當即登陸</a></p>
</div>

三個部分效果以下：spa

對這三個部分和頁面背景，用CSS樣式進行修飾：3d

/* 選擇body標籤，設置背景 */ body { background: url("./img/register_bg.png");
}

/* 爲內容部分添加一個方框 */ .rg_layout { width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white;
    /*讓div水平居中*/ margin: auto;
}

/* 將內容分爲三個部分：左、中、右 */ .rg_left { float: left; margin: 15px;
} .rg_center { float: left;
} .rg_right { float: right; margin: 15px;
}

/* 對左邊部分進行描述：字體大小，字體顏色 */ .rg_left > p:first-child { color:#FFD026; font-size: 20px;
} .rg_left > p:last-child { color:#A6A6A6; font-size: 20px;
}

/* 對右邊部分進行描述：字體大小，字體顏色 */ .rg_right > p:first-child { font-size: 15px;

} .rg_right p a { color:pink;
}

/* 對中間部分進行描述*/ .td_left { width: 100px;
    /* 每行的高度爲45個像素點 */ height: 45px;
    /* 字體向右對齊 */ text-align: right;
} .td_right {
    /* 左邊字體部分與右邊內容部分之間，填充（隔開）50個像素點的位置 */ padding-left: 50px ;
}

/* 對信息輸入區域的邊框進行描述 */ #username, #password, #email, #name, #tel, #birthday, #checkcode { width: 251px; height: 32px; border: 1px solid #A6A6A6;
    /* 設置邊框圓角 */ border-radius: 5px; padding-left: 10px;
}

/* 對驗證碼邊框再次進行描述：減少邊框的長度*/ #checkcode { width: 110px;
}

/* 對驗證碼圖片進行描述 */ #img_check{ height: 32px;
    /* 垂直方向對齊 */ vertical-align: middle;
}

/* 對註冊按鈕進行描述 */ #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ;
}

描述以後，效果以下：

不過這個時候尚未驗證功能，下面將實現這一功能。

表單驗證功能的實現

這裏拿用戶名和密碼進行驗證：用戶名和密碼都是6-12位字符，不能有空格。

首先，先向表格中的用戶名和密碼區，插入塊標籤，用來顯示判斷的結果（用戶名/密碼格式是否正確）

<!-- 表格第一行有兩個單元格：用戶名 + 輸入用戶名信息區域 + 用戶名是否符合 -->
<tr>
    <!-- 定義一個標籤：用戶名 -->
    <td class="td_left"><label for="username">用戶名</label></td>
    <!-- 定義輸入用戶名信息的框框、用戶名是否符合 -->
    <td class="td_right">
        <input type="text" name="username" id="username" placeholder="請輸入用戶名">
        <span id="s_username" class="error"></span>
    </td>
</tr>

<!-- 表格第二行有兩個單元格：密碼 + 輸入密碼區域 + 密碼是否符合 -->
<tr>
    <!-- 定義一個標籤：密碼 -->
    <td class="td_left"><label for="password">密碼</label></td>
    <!-- 定義輸入密碼的框框、密碼是否符合 -->
    <td class="td_right">
        <input type="password" name="password" id="password" placeholder="請輸入密碼">
        <span id="s_password" class="error"></span>
    </td>
</tr>

如上，在table中添加的內容是：

<span id="s_username" class="error"></span> 和 <span id="s_password" class="error"></span>

具體功能的實現

校驗用戶名

// 校驗用戶名
function checkUsername(){ // 1.獲取用戶名的值
    var username = document.getElementById("username").value; // 2.定義正則表達式
    var reg_username = /^\w{6,12}$/; // 3.判斷值是否符合正則的規則
    var flag = reg_username.test(username); // 4.提示信息
    var s_username = document.getElementById("s_username"); if(flag){ // 提示綠色對勾
        s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ // 提示紅色用戶名有誤
        s_username.innerHTML = "用戶名格式有誤"; } return flag; }

校驗密碼

// 校驗密碼
function checkPassword(){ // 1.獲取用戶名的值
    var password = document.getElementById("password").value; // 2.定義正則表達式
    var reg_password = /^\w{6,12}$/; // 3.判斷值是否符合正則的規則
    var flag = reg_password.test(password); // 4.提示信息
    var s_password = document.getElementById("s_password"); if(flag){ // 提示綠色對勾
        s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ // 提示紅色用戶名有誤
        s_password.innerHTML = "密碼格式有誤"; } return flag; }

全部的實現代碼以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊頁面</title>
    <style> body { background: url("./img/register_bg.png");
        } .rg_layout { width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; margin: auto;
        } .rg_left { float: left; margin: 15px;
        } .rg_center { float: left;
        } .rg_right { float: right; margin: 15px;
        } .rg_left > p:first-child { color:#FFD026; font-size: 20px;
        } .rg_left > p:last-child { color:#A6A6A6; font-size: 20px;
        } .rg_right > p:first-child { font-size: 15px;

        } .rg_right p a { color:pink;
        } .td_left { width: 100px; height: 45px; text-align: right;
        } .td_right { padding-left: 50px ;
        } #username, #password, #email, #name, #tel, #birthday, #checkcode { width: 251px; height: 32px; border: 1px solid #A6A6A6; border-radius: 5px; padding-left: 10px;
        } #checkcode { width: 110px;
        } #img_check { height: 32px; vertical-align: middle;
        } #btn_sub { width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ;
        } .error { color:red;
        } #td_sub { padding-left: 150px;
        }
    </style>
    <script> window.onload = function(){ document.getElementById("form").onsubmit = function(){ return checkUsername() && checkPassword(); }; document.getElementById("username").onblur = checkUsername; document.getElementById("password").onblur = checkPassword; }; function checkUsername(){ var username = document.getElementById("username").value; var reg_username = /^\w{6,12}$/; var flag = reg_username.test(username); var s_username = document.getElementById("s_username"); if(flag){ s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ s_username.innerHTML = "用戶名格式有誤"; } return flag; } function checkPassword(){ var password = document.getElementById("password").value; var reg_password = /^\w{6,12}$/; var flag = reg_password.test(password); var s_password = document.getElementById("s_password"); if(flag){ s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>"; }else{ s_password.innerHTML = "密碼格式有誤"; } return flag; } </script>
</head>
<body>

<div class="rg_layout">

    <div class="rg_left">
        <p>新用戶註冊</p>
        <p>USER REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_form">
            <form action="#" id="form" method="get">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用戶名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="請輸入用戶名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密碼</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="請輸入密碼">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手機號</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性別</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >驗證碼</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="註冊"></td>
                    </tr>
                </table>

            </form>
        </div>
    </div>

    <div class="rg_right">
        <p>已有帳號?<a href="#">當即登陸</a></p>
    </div>

</div>

</body>
</html>