表单验证以及获取手机验证码的小demo

    //  需求：根据不同的响应结果，进行响应。
    //  (1) 如果接口调用成功
    //      如果响应代码为100，倒计时
    //      如果响应代码为101，提示手机号重复
    //  (2)如果接口调用失败，告诉用户"服务器繁忙，请稍候再试"


    function showTips(content) {
        $('.tips>p').text(content).stop(true).slideDown(1000).delay(100).slideUp(2000)
    }
    // 明确需求:
    // 实现 点击按钮, 给用户手机发送短信
    // 调用后台提供的接口, 后台就可以帮我们发送短信了

    // 1. 发送请求前, 进行格式校验
    //  (1) 手机号码不能为空   如果为空提示"手机号不能为空"
    //  (2) 手机号码格式必须正确, 提示"请输入正确的手机号码"

    var $sendBt = $('#sendBt');
    $sendBt.click(function () {

        //  (1) 手机号码不能为空   如果为空提示"手机号不能为空"
        if($('#mobile').val().trim()===""){
            showTips("呵呵");
            return;
        }
        //(2) 手机号码格式必须正确, 提示"请输入正确的手机号码"(正则验证)
        if(!/^1\d{10}$/.test($('#mobile').val())){
            showTips("哈哈");
            return;
        }
        // 点击发送时，按钮显示为"发送中",并且不能重复提交请求
        $sendBt.val("发送中。。。").addClass("disabled");
        $.ajax({
            type:"get",
            url:"getCode.php",
            data:{
                mobile:$('#mobile').val()
            },
            dataType:"json",
            success: function (data) {
                console.log(data);
                if(data.code ===100){
                    showTips(data.msg);
                    var count = 3;
                    var timer = setInterval(function () {
                        count--;
                        $sendBt.val(count+'秒后再次发送');
                    if(count === 0){
                        clearInterval(timer);
                        $sendBt.val('发送验证码').removeClass('disabled');
                    }
                    },1000)
                }
                if(data.code ===101){
                    showTips(data.msg);
                    $sendBt.val('再次发送验证码').removeClass('disabled');
                }

            },
            error: function (error) {
                showTips("服务器繁忙");
                //恢复按钮
                $sendBt.val("获取验证码").removeClass("disabled");
            }
        })

    })
    //注册功能

    //总需求：点击注册按钮，向服务端发送请求
    var $submitBt = $('#submitBt');

    $submitBt.click(function () {
        //需求1:表单校验
        //1.1 用户名不能为空，否则提示"请输入用户名"
        if($('.name').val().trim() == ""){
            showTips("请输入用户名");
            return;
        }
        //1.2 密码不能为空，否则提示"请输入密码"
        if($('.pass').val().trim() == ""){
            showTips("请输入密码");
            return;
        }
        //1.3 确认密码必须与密码一直，否则提示"确认密码与密码不一致"
        if($('.repass').val() !== $('.pass').val()){
            showTips("确认密码与密码不一致");
            return;
        }
        //  (1) 手机号码不能为空   如果为空提示"手机号不能为空"
        if($('#mobile').val().trim()==""){
            showTips("呵呵");
            return;
        }
        //(2) 手机号码格式必须正确, 提示"请输入正确的手机号码"(正则验证)
        if(!/^1\d{10}$/.test($('#mobile').val())){
            showTips("哈哈");
            return;
        }
        //1.6 短信验证码必须是4位的数字，否则提示"验证码格式错误"
        if(!/\d{4}$/.test($('.code').val())){
            showTips("验证码提示错误");
            return;
        }
        //需求2：点击注册按钮时，按钮显示为"注册中...",并且不能重复提交请求
        if($submitBt.hasClass('disabled')){
            return;
        }

        $submitBt.val('注册中...').addClass('disabled');

//        console.log($('#ajaxForm').serialize());
        //需求3：根据不同响应结果，处理响应
        $.ajax({
            url: "register.php",
            type: "post",
            dataType: "json",
            // $(表单).serialize 方法 会将所有表单中 设置了 name 属性的表单元素,
            // 进行 参数拼接, jquery 直接支持在 data 传输这种格式
            // name=1234&pass=1234&mobile=15751776628&code=1234
            data: $('#ajaxForm').serialize(),
            //3.1 接口调用成功
            success: function (data) {
                console.log(data);
                //100 提示用户注册成功，3s后跳转到首页
                if(data.code ===100){
                    showTips(data.msg);
                    setTimeout(function () {
                        location.href = "www.baidu.com";
                    },3000)
                }
                //101 提示用户"用户名jepson已经存在"
                if(data.code ===101){
                    showTips(data.msg);
                    $submitBt.val('立即注册').removeClass('disabled');
                }
                //102 提示用户"验证码错误"
                if(data.code ===102 ){
                    showTips(data.msg);
                    $submitBt.val("立即注册").removeClass('disabled');
                }
            },
            //3.1 接口调用失败，提示"服务器繁忙，请稍后再试",恢复按钮的值
            error: function (error) {
                showTips("服务器繁忙，请稍后再试");
                $submitBt.val('立即注册').removeClass('disabled');
            }
        })





    })