JavaScript學習筆記（三十三）——實作注冊功能

1、建立表單

<form>
        <div class="item">
            <label>使用者名</label>
            <input id="username" name="username" type="text">
            <span id="usernameTips"></span>
        </div>
        <div class="item">
            <label>密碼</label>
            <input id="password" name="password" type="password">
            <span id="passwordTips"></span>
        </div>
        <div class="item">
            <label>确認密碼</label>
            <input id='password1' name="password1" type="password">
            <span id="password1Tips"></span>
        </div>
        <div class="submit">
            <button type="button" id="submitBtn">注冊</button>
        </div>
    </form>

2、引入封裝函數

3、擷取元素

let username = document.getElementById("username");
let password = document.getElementById("password");
let password1 = document.getElementById("password1");
let usernameTips = document.getElementById("usernameTips");
let passwordTips = document.getElementById("passwordTips");
let password1Tips = document.getElementById("password1Tips");
let submitBtn = document.getElementById("submitBtn");

4、定義兩個變量，用于判定是否可以送出資料

let username_lock = false;
let password_lock = false;

5、使用者名輸入框事件

當使用者名輸入框失去焦點的時候，先檢查是否通過正則驗證，再通過發送AJAX請求，檢查輸入的使用者名是否已經存在。如果存在，則不能使用該使用者名，此時username_lock設為false，因為設計資料庫時，将使用者名設為了主鍵，主鍵不能重複。如果使用者名不存在，則可以注冊該使用者名，此時username_lock設為true。

// 使用者名輸入框失去焦點事件
        username.onblur = function(){
            // 擷取使用者名
            let usernameVal = username.value;
            // 正則，不能以數字開頭，可以包含數字字母下劃線，不能少于6位多于14位
            let reg = /^[^\d]\w{6,14}$/;
            // 檢測是否通過正則驗證
            let result = reg.test(usernameVal);
            // 如果驗證失敗，顯示紅色 ×
            usernameTips.innerHTML = result ? "" : "×";
            usernameTips.style.color = result ? "" : "red";
            // 如果驗證通過，則進行下一道驗證，如果驗證失敗，則不進行下一道驗證，并且username_lock保持false，直接return
            if(!result){
                username_lock = false;
                return;
            }
            // 驗證通過，發送ajax請求，檢測是否重名，因為username被設定為主鍵，不允許重名
            AJAX.get("/06_regist/05_checkusername.php", {username:usernameVal}, function(data){
                // 如果不存在重名
                if(!data.error){
                    // 開鎖
                    username_lock = true;
                    // 提示使用者該使用者名可以被注冊
                    usernameTips.innerHTML = "√";
                    usernameTips.style.color = "green";
                }else{
                    alert(data.msg)
                    // 提示使用者該使用者名不可以被注冊
                    usernameTips.innerHTML = "×";
                    usernameTips.style.color = "red";
                }
            })
        }

使用者名不存在：

JavaScript學習筆記（三十三）——實作注冊功能

使用者名已存在：

JavaScript學習筆記（三十三）——實作注冊功能

驗證使用者名接口檔案

<?php
    // 1、接收前端傳遞過來的資料
    $username = $_GET["username"];
    // 2、連接配接資料庫
    mysql_connect("localhost", "root", "123456");
    // 3、選責資料庫
    mysql_select_db("gx2006");
    // 4、定義sql語句
    $sql = "SELECT * FROM user WHERE username = '$username'";
    // 5、執行sql語句
    $result = mysql_query($sql);
    // 6、查找使用者名是否存在
    $row = mysql_fetch_array($result);
    // 因為是根據主鍵查詢，是以查詢到的結果要麼有一條記錄，要麼沒有記錄
    if($row){
        echo json_encode(array('error' => 1, 'msg' => '使用者已存在，不可使用該使用者名'));
    }else{
        echo json_encode(array('error' => 0, 'msg' => '使用者不存在，可以使用該使用者名'));
    }
?>

6、密碼輸入框事件

密碼輸入框失去焦點時，檢查密碼是否通過正則驗證。

// 密碼輸入框失去焦點事件
        password.onblur = function(){
            // 擷取密碼
            let passwordVal = password.value;
            // 定義正則
            let reg = /^\w{8,16}$/;
            // 檢測是否通過正則驗證
            let result = reg.test(passwordVal);
            // 如果驗證失敗，顯示紅色 ×；如果驗證成功，顯示綠色 √
            passwordTips.innerHTML = result ? "√" : "×";
            passwordTips.style.color = result ? "green" : "red";
        }

密碼不通過正則驗證：

JavaScript學習筆記（三十三）——實作注冊功能

密碼通過正則驗證：

JavaScript學習筆記（三十三）——實作注冊功能

7、确認密碼輸入框事件

當确認密碼輸入框失去焦點時，先檢查是否通過正則驗證，如果驗證不通過，此時password_lock設為false。再檢查兩次密碼是否一緻，如果一緻，此時password_lock設為true。

// 确認密碼輸入框失去焦點事件
        password1.onblur = function(){
            // 擷取密碼
            let passwordVal = password.value;
            // 擷取确認密碼
            let passwordVal1 = password1.value;
            // 定義正則
            let reg = /^\w{8,16}$/;
            // 檢測是否通過正則驗證
            let result = reg.test(passwordVal1);
            // 如果驗證失敗
            if(!result){
                // 保持上鎖
                password_lock = false;
                password1Tips.innerHTML = "×";
                password1Tips.style.color = "red";
                return;
            }
            // 驗證通過，判斷密碼和确認密碼是否一緻
            let isSAME = passwordVal === passwordVal1;
            password1Tips.innerHTML = isSAME ? "√" : "×";
            password1Tips.style.color = isSAME ? "green" : "red";
            // 開鎖
            password_lock = isSAME ? "true" : "false";
        }

兩次密碼不一緻：

JavaScript學習筆記（三十三）——實作注冊功能

兩次密碼一緻：

JavaScript學習筆記（三十三）——實作注冊功能

8、密碼輸入框擷取焦點事件

由于可能有的使用者先輸入了确認密碼，再輸入密碼，将導緻在驗證上産生bug。為了解決該問題，我們設定當密碼輸入框獲得焦點的時候，不管确認密碼輸入框中是否存在内容，都将其清空。

// 密碼輸入框獲得焦點事件
        // 将确認密碼輸入框的内容清空
        password.onfocus = function(){
            password1.value = "";
            password1Tips.innerHTML = "";
        }

9、注冊按鈕點選事件

點選注冊按鈕後，先判斷username_lock和password_lock兩個是否都為true，如果都為true，則可以送出AJAX請求，否則不可以送出AJAX請求。如果成功發送請求，成功注冊後，彈出提示“注冊成功”，然後跳轉頁面。

// 注冊按鈕點選事件
        submitBtn.onclick = function(){
            // 判斷兩個鎖是否為true
            if(!(username_lock && password_lock)){
                alert("資訊輸入錯誤，請重新檢查！");
                return;
            }
            // 擷取使用者名
            let user = username.value;
            // 擷取密碼
            let psw = password.value;
            // 發送ajax請求
            AJAX.post("/06_regist/05_regist.php", {username: user, password: psw}, function(data){
                console.log(data);
                // 如果注冊成功
                if(!data.error){
                    setTimeout(function(){
                        location.href = "06_login.html";
                    }, 500)
                } else{
                    alert(data.msg);
                }
            })
        }

注冊成功：

JavaScript學習筆記（三十三）——實作注冊功能

注冊接口檔案

<?php
    header("content-type: text/html;charset=utf-8");
    // 1 接收前端傳遞過來的資料 
    $username = $_POST["username"];
    $password = $_POST["password"];

    // 2 連接配接資料庫
    mysql_connect("localhost", "root", "123456");

    // 3 選擇資料庫
    mysql_select_db("gx2006");

    // 4 定義sql語句
    $sql = "INSERT INTO user VALUES('$username', '$password')";

    // 5 執行sql語句
    $result = mysql_query($sql);

    // 6 擷取執行結果 
    if ($result) {
        echo json_encode(array("error" => 0, "msg" => "注冊成功"));
    } else {
        echo json_encode(array("error" => 1, "msg" => "注冊失敗"));
    }
 
?>

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 600px;
            height: 200px;
            border: 2px solid #ccc;
            margin: 100px auto;
        }

        .item {
            display: flex;
            height: 50px;
            align-items: center;
        }
        .item label {
            flex: 2;
            text-align: right;
            padding-right: 20px;
            box-sizing: border-box;
        }
        .item input {
            flex: 5;
        }
        .item span {
            flex: 1;
            text-align: center;
            font-weight: bold;
        }
        .submit {
            text-align: center;
        }
        .submit button {
            width: 150px;
            height: 30px;
            background-color: pink;
            border-color: pink;
            color: white;
        }
    </style>
</head>
<body>
    <form>
        <div class="item">
            <label>使用者名</label>
            <input id="username" name="username" type="text">
            <span id="usernameTips"></span>
        </div>
        <div class="item">
            <label>密碼</label>
            <input id="password" name="password" type="password">
            <span id="passwordTips"></span>
        </div>
        <div class="item">
            <label>确認密碼</label>
            <input id='password1' name="password1" type="password">
            <span id="password1Tips"></span>
        </div>
        <div class="submit">
            <button type="button" id="submitBtn">注冊</button>
        </div>
    </form>
    <script src="./AJAX.js"></script>
    <script>
        let username = document.getElementById("username");
        let password = document.getElementById("password");
        let password1 = document.getElementById("password1");
        let usernameTips = document.getElementById("usernameTips");
        let passwordTips = document.getElementById("passwordTips");
        let password1Tips = document.getElementById("password1Tips");
        let submitBtn = document.getElementById("submitBtn");

        // 定義兩個鎖
        let username_lock = false;
        let password_lock = false;

        // 使用者名輸入框失去焦點事件
        username.onblur = function(){
            // 擷取使用者名
            let usernameVal = username.value;
            // 正則，不能以數字開頭，可以包含數字字母下劃線，不能少于6位多于14位
            let reg = /^[^\d]\w{6,14}$/;
            // 檢測是否通過正則驗證
            let result = reg.test(usernameVal);
            // 如果驗證失敗，顯示紅色 ×
            usernameTips.innerHTML = result ? "" : "×";
            usernameTips.style.color = result ? "" : "red";
            // 如果驗證通過，則進行下一道驗證，如果驗證失敗，則不進行下一道驗證，并且username_lock保持false，直接return
            if(!result){
                username_lock = false;
                return;
            }
            // 驗證通過，發送ajax請求，檢測是否重名，因為username被設定為主鍵，不允許重名
            AJAX.get("/06_regist/05_checkusername.php", {username:usernameVal}, function(data){
                // 如果不存在重名
                if(!data.error){
                    // 開鎖
                    username_lock = true;
                    // 提示使用者該使用者名可以被注冊
                    usernameTips.innerHTML = "√";
                    usernameTips.style.color = "green";
                }else{
                    alert(data.msg)
                    // 提示使用者該使用者名不可以被注冊
                    usernameTips.innerHTML = "×";
                    usernameTips.style.color = "red";
                }
            })
        }

        // 密碼輸入框獲得焦點事件
        // 将确認密碼輸入框的内容清空
        password.onfocus = function(){
            password1.value = "";
            password1Tips.innerHTML = "";
        }

        // 密碼輸入框失去焦點事件
        password.onblur = function(){
            // 擷取密碼
            let passwordVal = password.value;
            // 定義正則
            let reg = /^\w{8,16}$/;
            // 檢測是否通過正則驗證
            let result = reg.test(passwordVal);
            // 如果驗證失敗，顯示紅色 ×；如果驗證成功，顯示綠色 √
            passwordTips.innerHTML = result ? "√" : "×";
            passwordTips.style.color = result ? "green" : "red";
        }

        // 确認密碼輸入框失去焦點事件
        password1.onblur = function(){
            // 擷取密碼
            let passwordVal = password.value;
            // 擷取确認密碼
            let passwordVal1 = password1.value;
            // 定義正則
            let reg = /^\w{8,16}$/;
            // 檢測是否通過正則驗證
            let result = reg.test(passwordVal1);
            // 如果驗證失敗
            if(!result){
                // 保持上鎖
                password_lock = false;
                password1Tips.innerHTML = "×";
                password1Tips.style.color = "red";
                return;
            }
            // 驗證通過，判斷密碼和确認密碼是否一緻
            let isSAME = passwordVal === passwordVal1;
            password1Tips.innerHTML = isSAME ? "√" : "×";
            password1Tips.style.color = isSAME ? "green" : "red";
            // 開鎖
            password_lock = isSAME ? "true" : "false";
        }

        // 注冊按鈕點選事件
        submitBtn.onclick = function(){
            // 判斷兩個鎖是否為true
            if(!(username_lock && password_lock)){
                alert("資訊輸入錯誤，請重新檢查！");
                return;
            }
            // 擷取使用者名
            let user = username.value;
            // 擷取密碼
            let psw = password.value;
            // 發送ajax請求
            AJAX.post("/06_regist/05_regist.php", {username: user, password: psw}, function(data){
                console.log(data);
                // 如果注冊成功
                if(!data.error){
                    alert(data.msg);
                    setTimeout(function(){
                        location.href = "06_login.html";
                    }, 500)
                } else{
                    alert(data.msg);
                }
            })
        }
    </script>
</body>
</html>

JavaScript學習筆記（三十三）——實作注冊功能

完整代碼：

繼續閱讀

MySQL的4種隔離級别？出現問題

tab滑鼠經過菜單切換

XX系統實施過程問題總結

vue （vue2.0）使用總結(從大體結構總結)

無元件上傳圖檔到資料庫中，最完整解決方案

vue搭建過程及出現問題

【MySQL資料庫】資料庫索引事務1.索引2.事務

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

NOSQL安全攻擊

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

登入plsql 報錯 the account is locked --使用者被鎖

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條