关于jQuery中的ajax get+php表单验证最完整示例

最新推荐文章于 2021-08-06 13:19:07 发布

BroncLee

最新推荐文章于 2021-08-06 13:19:07 发布

阅读量445

点赞数 1

文章标签： php javascript jquery ajax html5

本文链接：https://blog.csdn.net/ayoM_/article/details/106143731

版权

关于jQuery中的ajax get+php表单验证实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
        form{
            margin: 200px auto;
            width: 400px;
            height: 200px;
            background-color: antiquewhite;
            padding: 25px 90px;
            box-sizing: border-box;
        }
        input[type=submit]{
            width: 170px;
            margin-left: 25px;
        }
        p{
            margin-top: 0px;
            color: red;
            text-align: center;
            font-weight: 600;
        }
    </style>

</head>
<body>
    <form action="getData.php" id="form" name="get">
        用户名: <input type="text" name="user_name" id="username" ><br><br>
        邮箱 ： <input type="email" name="email" id="email" ><br><br>
        密码 ： <input type="password" name="pass" id="password"  ><br><br>
        <input type="submit" id="submit" value="注册">
        <p id="content"></p>
    </form>

   <script>
        
        $(document).ready(function(){
            $("#form").submit(function(){
                login();
                return false;
                });
            });
            function login() {     
                // 获取到填写的数据
                var username = $("#username").val();
                var email = $("#email").val();
                var password = $("#password").val();
                if (username == ""){
                    $("#content").text("请输入登录用户名");
                    $("#username").focus();
                    return false;
                }
                if(email == ""){
                    $("#content").text("请输入邮箱");
                    $("#email").focus();
                    return false;
                }
                if(password == ""){
                    $("#content").text("请输入登录密码");
                    $("#password").focus();
                    return false;
                }
                // 发送一个请求   ajax 请求
                $.ajax({
                    url:"getData.php",  // ajax请求要请求的地址
                    type:"GET", // 请求的类型  get  post
                    data:"username=" + username + "&email="+ email + "&password=" + password, // 请求要发送的数据  常在post请求中使用，get请求只需要拼接请求的url就可以
                    beforeSend: function(){
                        $("#content").text("登录中，请稍候");
                    },
                    success: function (msg) {
                        // 请求成功之后要执行的方法
                        // msg 接收请求成功之后的返回值
                        // console.log(msg);
                        if(msg == 'lengthno'){
                            $("#content").text("长度不合格，请输入至少6位长度的用户名");
                        }else if(msg == 'reuse'){
                            $("#content").text("用户名已被占用");
                        }else if(msg == 'emailf'){
                            $("#content").text("请输入正确的邮箱");
                        }else if(msg == 'passf'){
                            $("#content").text("请输入正确的密码");
                        }else if(msg == 'success'){
                            $("#content").text("注册成功");
                        }
                    },
                    error:function (error) {
                        // 请求失败之后要执行的内容
                        $("#content").text("请求失败");
                    }
                })
            }
        
   </script>
</body>
</html>

getData.php

<?php


//后端验证
//检测用户名是否有
//在js里检测了 省一次请求 nice
// if(!isset($_GET['username']) || empty($_GET['username'])){
//     die('userf');
// }
//符合规则么
if(strlen($_GET['username'])<6){
    die('lengthno');
}
//检测用户名是否存在   数据库查询
$arr = ['dasd','ergouzi','gan','aoligei','xiaoxiannv'];
if(in_array($_GET['username'],$arr)){
    die('reuse');
}
//邮箱
if(!isset($_GET['email']) || empty($_GET['email'])){
    die('emailf');
}
//密码
if(!isset($_GET['password']) || empty($_GET['password'])){
    die('passf');
}

//注册
$user = $_GET['username'];
$email = $_GET['email'];
$pass = $_GET['password'];
//保存数据库
$str = $user.'|'.$email.'|'.$pass.'#';
file_put_contents('user.txt',$str,FILE_APPEND);
echo 'success';

暂时用txt替代数据库
user.txt

username|email@com|password#

没有名字会提示
在这里插入图片描述
名字不够长

在这里插入图片描述邮箱填写验证
成功那为什么这里两个汉字就能通过验证呢以为1个汉字占3个字节而一个字母只占一个字节奥利给

BroncLee

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于jQuery中的ajax get+php表单验证最完整示例

关于jQuery中的ajax get+php表单验证实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/j
复制链接

扫一扫