Ajax 注册邮箱查重小案例

最新推荐文章于 2022-02-04 10:35:28 发布

敢问

最新推荐文章于 2022-02-04 10:35:28 发布

阅读量260

点赞数

分类专栏： AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_41040445/article/details/114967846

版权

AJAX 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

案例模仿的网易163邮箱注册，主要实现当注册邮箱的时候，如果当前邮箱已注册那么无法注册，如果当前邮箱可以注册，那么注册成功并添加到数据库中

运行环境 phpnow

上代码吧

.html

<body>
    <div class="container">
        <h1 class="tit">欢迎注册网易邮箱</h1>
        <div class="item">
            <label class="input-placeholder">邮箱地址</label>
            <input type="text" class="username" name="username">
            <div class="tip">6～18个字符，可使用字母、数字、下划线，需要以字母开头</div>
            <div class="domain">@163.com</div>
            <p class="success" id="success">恭喜，该邮件地址可以注册</p>
            <p class="error" id="error">该邮箱地址不可注册</p>
        </div>
        <div class="item">
            <label class="input-placeholder">密码</label>
            <input type="text" class="" name="password">
            <div class="tip">6～16个字符，区分大小写</div>
        </div>
        <div class="item">
            <label class="input-placeholder">手机号码</label>
            <input type="text" class="" name="phone">
            <div class="tip">可通过该手机号找回密码</div>
        </div>

        <button class="btn" id="btn">立即注册</button>
    </div>
    <script src="js/ajax.js"></script>
    <script>
        var inputs = document.getElementsByTagName("input");
        var successTip = document.getElementById("success");
        var errorTip = document.getElementById("error");
        var btn = document.getElementById("btn");
        // 记录存储名称
        var key = {
            "username": "用户名",
            "password": "密码",
            "phone": "手机号码"
        }
        // 设置一个状态，用来判断当前的邮箱地址是否已经被注册了，如果被注册了，就不允许提交
        var emailFlag = true;
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onfocus = function () {
                // 当聚焦的时候让label消失
                this.previousSibling.previousSibling.style.display = 'none';
                // 当聚焦的时候让下面的提示文案显示
                this.nextSibling.nextSibling.style.display = 'block';
                // 强制让成功和失败的提示消失
                if (this.name == 'username') {
                    errorTip.style.display = "none";
                    successTip.style.display = "none";
                }

                //console.log(this.nextSibling)
                //console.log(this.previousSibling.previousSibling)
            }
            // 失去焦点
            inputs[i].onblur = function () {
                // 当失去焦点的时候，判断，如果有value值，就不让label显示，否则就显示label
                if (!this.value) {
                    this.previousSibling.previousSibling.style.display = 'block';
                }
                // 当聚焦的时候让下面的提示文案隐藏
                this.nextSibling.nextSibling.style.display = 'none';
                // 如果是用户名则发送ajax请求去判断当前的用户是否已经被注册
                if (this.name == 'username' && this.value) {
                    // 发送Ajax请求校验
                    validate(this.value)
                }
            }
        }
        // 发送请求提交数据
        btn.onclick = function () {
            // 第一步要先判断用户名是否可以使用，如果不可以抛出错误
            if (!emailFlag) {
                alert("当前名称被占用，请输入新的名称");
                return;
            }
            //提交参数
            var subObj = {};
            // 判断所有的表单信息是否都填上了，如果没有就抛出错误提示
            for (var i = 0; i < inputs.length; i++) {
                if (!inputs[i].value) {
                    alert(key[inputs[i].name] + "，不能为空");
                    return;
                } else {
                    // 表单信息赋值
                    subObj[inputs[i].name] = inputs[i].value
                }
            }
            // 如果都没有被return就将所有的信息提交到数据库
            add(subObj);
        }
        // 校验请求
        function validate(value) {
            ajax.get("email_info.php", {
                "username": value
            }, function (data) {
                // 显示成功提示
                if (data == "SUCCESS") {
                    successTip.style.display = "block";
                    // 邮箱的可提交状态为true
                    emailFlag = true;
                } else if (data == "ERROR") {
                    //显示失败提示
                    errorTip.style.display = "block";
                    emailFlag = false;
                }
            })


        }
        // 发送请求
        function add(json) {
            console.log(json)
            // 提交逻辑
            ajax.post("add.php", json, function (data) {
                if (data == "SUCCESS") {
                    alert("提交成功");
                    emailFlag = false
                } else if (data == "ERROR") {
                    alert("提交失败")
                }
            })
        }
    </script>
</body>

email_info.php

<?php
    // 得到邮箱地址
    $username = $_GET["username"];
    // 链接数据库
    $connect = mysql_connect("localhost","root",123456);
    // 选择数据库
    mysql_select_db("xiaobai");
    // 设置字符集
    mysql_query("SET NAMES UTF8");
    // 查询SQL
    $sql = "SELECT * FROM email_info WHERE username = '{$username}'";
    // 执行SQL
    $result = mysql_query($sql);

    //返回查出来的结果数量
    $num = mysql_num_rows($result);
    // 当前的结果如果等于0就说明数据库没有重复的邮箱 注册的邮箱能够使用
    if ($num == 0) {
        echo "SUCCESS";
    }else{
        echo "ERROR";
    }
?>

add.php

<?php
  // 得到邮箱地址，密码和手机号
    $username = $_POST["username"];
    $password = $_POST["password"];
    $phone = $_POST["phone"];
    $connect = mysql_connect("localhost","root",123456);
    mysql_select_db("xiaobai");
    mysql_query("SET NAMES UTF8");
    //$sql = "SELECT * FROM email_info WHERE username = '{$username}'";
    // 插入SQL
    $sql = "INSERT INTO email_info (username,password,phone) VALUES('{$username}','{$password}','{$phone}')";
    $result = mysql_query($sql);
     // 如果$result返回1了，就说明提交成功了
    if($result == 1){
        echo "SUCCESS";
    }else {
        echo "ERROR";
    }
?>

数据库

效果图

敢问

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax 注册邮箱查重小案例

案例模仿的网易163邮箱注册，主要实现当注册邮箱的时候，如果当前邮箱已注册那么无法注册，如果当前邮箱可以注册，那么注册成功并添加到数据库中运行环境 phpnow上代码吧.html<body> <div class="container"> <h1 class="tit">欢迎注册网易邮箱</h1> <div class="item"> <label cla..
复制链接

扫一扫