$.ajax注册表单

古城微笑少年丶 2021-07-24 18:14 432阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单注册</title>
        <style>
            body { 
                margin: 0;
                padding: 0;
                background-color: #F7F7F7;
            }
    
            ul { 
                margin: 0;
                padding: 50px;
                list-style: none;
            }
    
            .register { 
                width: 800px;
                margin: 50px auto;
                background-color: #FFF;
                border: 1px solid #CCC;
                border-radius: 5px;
            }
    
            li { 
                display: flex;
                margin: 20px 0;
            }
            
            label, input { 
                display: block;
                float: left;
                height: 46px;
                font-size: 24px;
                box-sizing: border-box;
                color: #333;
            }
    
            label { 
                width: 200px;
                line-height: 46px;
                margin-right: 30px;
                text-align: right;
            }
    
            input { 
                width: 320px;
                padding: 8px;
                line-height: 1;
                outline: none;
                position: relative;
            }
    
            input.code { 
                width: 120px;
            }
    
            input.verify { 
                width: 190px;
                margin-left: 10px;
            }
    
            input.disabled { 
                background-color: #CCC !important;
            }
    
            input[type=button] { 
                border: none;
                color: #FFF;
                background-color: #E64145;
                border-radius: 4px;
                cursor: pointer;
            }
    
            .tips { 
                position: fixed;
                top: 0;
                width: 100%;
                height: 40px;
                text-align: center;
            }
    
            .tips p { 
                min-width: 300px;
                max-width: 400px;
                line-height: 40px;
                margin: 0 auto;
                color: #FFF;
                display: none;
                background-color: #C91623;
            }
    
            input.gray { 
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div class="register">
            <form id="ajaxForm">
                <ul>
                    <li>
                        <label for="">用户名</label>
                        <input type="text" name="name" class="name">
                    </li>
                    <li>
                        <label for="">请设置密码</label>
                        <input type="password" name="pass" class="pass">
                    </li>
                    <li>
                        <label for="">请确认密码</label>
                        <input type="password" name="repass" class="repass">
                    </li>
                    <li>
                        <label for="">验证手机</label>
                        <input type="text" name="mobile" class="mobile">
                    </li>
                    <li>
                        <label for="">短信验证码</label>
                        <input type="text" name="code" class="code">
                        <input type="button" value="获取验证码" class="verify">
                    </li>
                    <li>
                        <label for=""></label>
                        <input type="button" class="btn" value="立即注册">
                    </li>
                </ul>
            </form>
        </div>
        
        <div class="tips">
            <p>aaa</p>
    </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script>
            // 需求：
            // 1- 点击注册按钮， 获取表单数据， 在表单数据验证通过的情况下， 向后台发生请求，进行注册
            // 2- 接收后台返回注册结果，并显示
    
            //注册功能
            //总需求：点击注册按钮，向服务端发送请求
            //需求0：获取表单数据
            //需求1:表单校验
                //1.1 用户名不能为空，否则提示"请输入用户名"
                //1.2 密码长度不能小于6，否则提示"请输入密码"
                //1.3 确认密码必须与密码一致，否则提示"确认密码与密码不一致"
                //1.4 手机号码不能为空，否则提示"请输入手机号码";
                //1.5 手机号码格式必须正确，否则提示"手机号格式错误"
                //1.6 短信验证码必须是4位的数字，否则提示"验证码格式错误"
            //需求2：点击注册按钮时，按钮显示为"注册中...",并且不能重复提交请求
            //需求3：根据不同响应结果，处理响应
                //3.1显示注册结果
    
    
            // 1- 点击注册按钮， 获取表单数据
            $('.btn').click(function () { 
                // 获取表单数据
                // var name = $('.name').val();
                // var pass = $('.pass').val();
                // var repass = $('.repass').val();
                // var str = 'name='+ name +'&pass=' + pass; ....
                // name=zs&age=29
                // jq提供 表单序列化： 用于快速获取表单数据
                // 本质： 把表单name属性 和value 进行拼接
                // name=zs&pass=123&repass=123&mobile=123&code=123
                var str = $('#ajaxForm').serialize();
    
                // console.log(str);
                // return false 可以终止请求
    
                // 写ajax基本结构
                $.ajax({ 
                    type: 'post',
                    url: './register.php',
                    data: str,
                    dataType: 'json',
                    // timeout: 1000,
                    beforeSend: function () { 
                        // 在请求发生之前 做数据验证 ， 如果数据不合理，程序到此结束
                        //1.1 用户名不能为空，否则提示"请输入用户名"
                        if ($('.name').val().trim().length == 0){ 
                            // 提示错误信息
                            $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，用户名不能为空哦');
                            // 程序到此结束
                            return false;
                        }
                        // 1.2 密码长度不能小于6
                        if ($('.pass').val().length < 6){ 
                            // 提示错误信息
                            $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，密码长度不能小于6位哦');
                            // 程序到此结束
                            return false;
                        }
                        //1.3 确认密码必须与密码一致
                        if ($('.pass').val() !== $('.repass').val() ){ 
                            // 提示错误信息
                            $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，两次密码不一致哦');
                            // 程序到此结束
                            return false;
                        }
                        //1.4手机号码格式1开头的11位数组，否则提示"手机号格式错误"
                        var telReg = /^1\d{10}$/;
                        if (! telReg.test( $('.mobile').val() )){ 
                            // 提示错误信息
                            $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，手机号有误哦');
                            // 程序到此结束
                            return false;
                        }               
    
                        // 1.5 短信验证码必须是4位的数字
                        if ($('.code').val().length !== 4){ 
                            // 提示错误信息
                            $('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('亲，验证码有误哦');
                            // 程序到此结束
                            return false;
                        }
    
                        // 如果程序能执行到此， 说明所有的验证全部通过
                        // 让按钮变色，给用户提示，请求已发送
                        // $('img').attr('src', '1.jpg');
                        // 对于值为bool类型 属性 disabled checked selected 用prop 来操作
                        $('.btn').addClass('gray').val('正在注册...').prop('disabled', true);
    
    
    
                    },
                    success: function (info) { 
                        // info = JSON.parse(info);
                        console.log(info);
                        if (info.code === 200) { 
                            alert(info.msg);
                        }                   
                    },
                    error: function () { },
                    complete: function () { 
                        //本次注册完成后， 可以进行下次注册了
                        $('.btn').removeClass('gray').val('立即注册').prop('disabled', false);
                    }
                });
                
            })
    
    
        </script>
    
    
    </body>
    </html>