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多任务上传添加进度条