ajax注册

最新推荐文章于 2024-01-20 16:27:12 发布

江呱呱

最新推荐文章于 2024-01-20 16:27:12 发布

阅读量211

点赞数

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

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108620197

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

ajax注册

1.html端

<!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;
        }
        
        .loading {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%);
            display: none;
        }
    </style>
</head>

<body>
    <form>
        <div class="item">
            <label>用户名</label>
            <input id="username" name="username">
            <span id="usernameTips"></span>
        </div>
        <div class="item">
            <label>密码</label>
            <input id="password" name="password">
            <span id="passwordTips"></span>
        </div>
        <div class="item">
            <label>确认密码</label>
            <input id='password1' disabled='true'>
            <span id="password1Tips"></span>
        </div>
        <div class="submit">
            <button type="button" id="submitBtn">注册</button>
        </div>
    </form>
    <div id="loading" class="loading"><img src="./images/timg.gif" alt=""></div>
    <script src="QF.js"></script>
    <script>
        // 获取元素
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        var password1 = document.getElementById("password1");
        var loading = document.querySelector('#loading');
        var usernameTips = document.getElementById("usernameTips");
        var passwordTips = document.getElementById("passwordTips");
        var password1Tips = document.getElementById("password1Tips");

        var submitBtn = document.getElementById("submitBtn");

        // 定义两个锁
        var username_lock = false;
        var password_lock = false;

        username.onblur = function() {
        	//获取当前username输入框中的值
            var usernameValue = this.value;
            //正则表达式
            var reg = /^[^\d]\w{6,13}$/;
            //测试正则表达式
            var result = reg.test(usernameValue);
            if (result) {
                usernameTips.innerHTML = "√";
                usernameTips.style.color = "green";
                console.log('格式正确');
            } else {
                usernameTips.innerHTML = "×";
                usernameTips.style.color = "red";
                console.log('格式错误');
            }
            //假设表单上的验证不通过  剩下的代码就不执行了
            if (!result) {
                return;
            }
            //发送ajax请求  验证这个用户名有没有存在
            QF.get('http://localhost/day2(http)/checkname.php', {
                username: usernameValue
            }, function(data) {
                if (!data.error) {
                //验证成功之后将锁打开
                    username_lock = true;
                    usernameTips.innerHTML = data.msg;
                    usernameTips.style.color = "green";
                } else {
                    username_lock = false;
                    usernameTips.innerHTML = data.msg;
                    usernameTips.style.color = "red";
                }
            })
        };
        //验证密码
        password.onblur = function() {
            var value = this.value;
            var reg = /^\w{8,16}/;
            var result = reg.test(value);
            if (result) {

                passwordTips.innerHTML = '√';
                passwordTips.style.color = 'green';
                console.log('密码格式正确');
            } else {
                password_lock = false;
                passwordTips.innerHTML = '×';
                passwordTips.style.color = 'red';
                console.log('密码格式错误');
            }
            //将验证密码的框打开  让用户可以输入
            if (password.value != '') {
                password1.disabled = false;
            } else {
                password1.disabled = true;
            }
        }
		//验证重复密码是不是跟密码相同
        password1.onblur = function() {
            var value = this.value;
            var value1 = password.value;
            if (value === value1) {
                password1Tips.innerHTML = '√';
                password1Tips.style.color = 'green';
                console.log('重复密码格式正确');
            } else {
                password1Tips.innerHTML = '×';
                password1Tips.style.color = 'red';
                console.log('重复密码格式错误');
            }
            //相同的话就把两个锁打开
            password_lock = value === value1;
        }
        
        submitBtn.onclick = function() {
        //判断两个输入框有没有输入正确的信息
            if (!(username_lock && password_lock)) {
                alert('请重新检查');
                return;
            }
            var user = username.value;
            var pass = password.value;
            loading.style.display = 'block';
            //发送ajax请求
            QF.post("http://localhost/day2(http)/regist.php", {
                username: user,
                password: pass
            }, function(data) {
                if (!data.error) {
                    setTimeout(function() {
                    	//成功的话就跳转页面
                        location.href = "http://localhost/day2(http)/index.html";
                    }, 1000)
                } else {
                    alert(data.msg)
                }
            })
        }

        // 演示 超时
        // var xhr = new XMLHttpRequest();
        // xhr.onreadystatechange = function() {
        // }
        // // 设置超时时间
        // xhr.timeout = 6000;
        // // 设置超时事件
        // xhr.ontimeout = function() {
        //     console.log("超时了")
        // }
        // xhr.open("post", "timeout.php", true);
        // xhr.send()  
        // setInterval(function() {
        //     console.log(1);
        // }, 1000);
    </script>
</body>

</html>

2.验证账号的后台代码

<?php 
    $username=$_GET["username"];
    //连接数据库
    mysql_connect("localhost","root","root");
    //选择数据库
    mysql_select_db("gz2006");
    //sql语句
    $sql="SELECT * FROM user WHERE username='$username'";
    //执行sql语句
    $result= mysql_query($sql);
    //将得到的结果放到一个变量里面
    $row=mysql_fetch_array($result);
    //如果row不为空的话
    if($row){
        echo json_encode(array("error"=>1,"msg"=>"用户存在"));
    }else{
        echo json_encode(array("error"=>0,"msg"=>"可以使用"));
    }
?>

3.注册代码

<?php 
    $username=$_POST['username'];
    $password=$_POST['password'];
    //连接数据库
    mysql_connect('localhost','root','root');
    //选择数据库
    mysql_select_db('gz2006');
    //sql语句
    $sql="INSERT INTO user VALUES ('$username','$password')";
    //执行sql语句
    $result=mysql_query($sql);
    if($result){
        echo json_encode(array('error'=>0,"msg"=>"注册成功"));
    }else{
        echo json_encode(array('error'=>1,"msg"=>"注册失败"));
    }
?>

江呱呱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax注册

ajax注册1.html端<!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> *
复制链接

扫一扫

专栏目录