jQuery 验证码获取倒计时发送和其他验证

最新推荐文章于 2023-05-12 15:32:11 发布

十方天士

最新推荐文章于 2023-05-12 15:32:11 发布

阅读量198

点赞数

文章标签： jquery java

本文链接：https://blog.csdn.net/hunagzheng123456/article/details/119666702

版权

业务有需要开发，现做评估和记录
我这都写在html中

<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-register-forget" method="POST" enctype="multipart/form-data">

        <div class="form-group">
            <label class="col-sm-3 control-label">手机号码：</label>
            <div class="col-sm-8">
                <input id="tel" name="tel" th:value="${register.tel}"
                       class="form-control" type="text" autocomplete="off">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">密码：</label>
            <div class="col-sm-8">
                <input id="password" name="password" th:value="${register.password}"
                       class="form-control" type="text" autocomplete="off">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">验证码：</label>

            <div class="col-sm-8">
                <div class="input-group">
                    <input id="checkCode" name="checkCode" th:value="${register.checkCode}"
                           class="form-control" type="text" autocomplete="off">
                    <!--                    <span class="input-group-addon" style="color: dodgerblue"><i>获取验证码</i></span>-->
                    <span class="input-group-btn">
                        <input type="button" class="btn btn-success"
                               id="verify_code" value="获取验证码"></input>
                    </span>
                </div>
                <span class="f12 red code-msg" name="code-msg"></span>
            </div>
        </div>


        <div class="form-group">
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" id="sub" class="btn btn-primary">提交</button>
                <button th:onclick="'javascript:layer_close()'"
                        class="btn btn-danger" type="button">关闭
                </button>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include::footer"></th:block>

</script>
<script type="text/javascript">
    const prefix = ctx + "api/standard/register";
    $(function () {
        $("#sub").click(function () {
            const phones = $.trim($("#tel").val());
            const password = $.trim($("#password").val());
            const checkCode = $.trim($("#checkCode").val());
            const isMobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if (!phones) {
                $('[name=tel]').after(errMsg('手机号码不能为空！'));
                return false;
            } else if (!isMobile.test(phones)) {
                $('[name=tel]').after(errMsg('请输入正确的手机号码！'));
                return false;
            } else if (!password) {
                $('[name=password]').after(errMsg('密码不能为空！'));
                return false;
            } else if (!checkCode) {
                $('[name=code-msg]').after(errMsg('请输入验证码！'));
                return false;
            }
            /*            else if (!checkTelOnlyOne(phones)) {
                            $('[name=tel]').after(errMsg('该手机号未注册'));
                            return false;
                        } */

            else if (!checkPassword(password)) {
                return false;
            } else {
                $.ajax({
                    url: prefix + "/doForget",
                    type: "post",
                    dataType: "JSON",
                    data: {
                        "tel": phones,
                        "password": password,
                        "checkCode": checkCode,
                    },

                    success: function (data) {
                        if (data.code == 0) {
                            if (data.data == "1") {
                                $('[name=checkCode]').after(errMsg('验证码错误，请重新输入！'));
                                return false
                            } else {
                                layer.msg("操作成功", {
                                    icon: 1,
                                    time: 500,
                                    shade: [0.1, '#fff']
                                }, function () {
                                    layer_close()
                                });
                            }
                        } else {
                            $.modalAlert(data.msg, modal_status.FAIL);
                        }
                    },
                    error: function () {
                        return false;
                    }
                });
            }
            return false
        });


        //验证码倒计时
        var InterValObj; //timer变量，控制时间
        var count = 30; //间隔函数，1秒执行
        var curCount;//当前剩余秒数
        var code = ""; //验证码
        var codeLength = 4;//验证码长度
        $("#verify_code").click(function () {
            curCount = count;
            var phone = $.trim($("#tel").val());//手机号码
            var isMobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if (phone != "" && isMobile.test(phone) && phone.length == 11) {
                //设置button效果，开始计时
                $("#verify_code").attr("disabled", "true");
                $("#verify_code").val("请在" + curCount + "秒内输入验证码");
                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                //产生验证码
                /*          for (var i = 0; i < codeLength; i++) {
                              code += parseInt(Math.random() * 9).toString();
                          }*/
                //向后台获验证码
                $.ajax({
                    url: prefix + "/getCheckCode",
                    type: "get",
                    dataType: "JSON",
                    data: {
                        phone: phone,
                    },
                    success: function (data) {
                        if (data.data == "0") {
                            $('[name=tel]').after(errMsg('该手机未注册！'));
                            $("#verify_code").removeAttr("disabled");//启用按钮
                            $("#verify_code").val("重新发送验证码");
                            window.clearInterval(InterValObj);//停止计时器
                        } else {
                            $('.error').remove();
                        }
                    }
                });
            } else {
                $('[name=tel]').after(errMsg('请输入正确的手机号码！'));
                return false;
            }
        });

        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {
                window.clearInterval(InterValObj);//停止计时器
                $("#verify_code").removeAttr("disabled");//启用按钮
                $("#verify_code").val("重新发送验证码");
                code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
            } else {
                curCount--;
                $("#verify_code").val("请在" + curCount + "秒内输入验证码");
            }
        }
    })

    function checkPassword(value) {
        var checkPwd = /^(?![A-Za-z]+$)(?![A-Za-z\d]+$)(?![A-Za-z\W]+$)(?![A-Za-z\d]+$)(?![A-Za-z\W]+$)(?![\d\W]+$)\S+$/;

        // 限制密码最小长度8位，最大长度20位。
        if (value.length < 8 || value.length > 20) {
            $('[name=password]').after(errMsg('密码长度不合法，最小为8位字符，最大为20位字符！'));
            return false;
        } else if (!checkPwd.test(value)) {
            $('[name=password]').after(errMsg('密码必须包含（大小写字母、数字、特殊字符）的组合方式！'));
            return false;
        } else {
            return true
        }
    };

    function checkTelOnlyOne(phone) {
        //手机号码是否存在
        $.ajax({
            url: prefix + "/checkUserPhoneUnique",
            type: "post",
            dataType: "JSON",
            data: {
                "phone": phone,
            },
            async: false,
            success: function (data) {
                if (data) { //说明手机存在
                    alert(data)
                    return true
                } else {
                    return false;
                }
            },
            error: function () {
                return false;
            }
        });
    }

    //错误信息显示
    function errMsg(html) {
        $('.error').remove();
        var str = '<div class="error">*' + html + '</div>';
        return str;
    };
</script>
</body>
</html>

效果如下

十方天士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 验证码获取倒计时发送和其他验证

业务有需要开发，现做评估和记录我这都写在html中<!DOCTYPE HTML><html lang="zh" xmlns:th="http://www.thymeleaf.org"><meta charset="utf-8"><head th:include="include :: header"></head><body class="white-bg"><div class="wrapper wrap.
复制链接

扫一扫