$.ajax注册表单

最新推荐文章于 2022-12-05 00:51:31 发布
i_am_a_div_日积月累_
最新推荐文章于 2022-12-05 00:51:31 发布
阅读量128
点赞数
分类专栏： js
本文链接：https://blog.csdn.net/i_am_a_div/article/details/115079963
版权
js 专栏收录该内容
36 篇文章 1 订阅
订阅专栏
<!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>