web-work/VoiceService/target/classes/static/regist.html

<link rel="stylesheet" type="text/css" href="/analysis/css/styles.css">
<script src="/analysis/js/jquery-3.2.1.min.js"></script>
<script src="/analysis/js/jquery.validate-1.19.3.min.js"></script>
<script src="/analysis/js/layer.js"></script>
<script src="/analysis/js/md5.js"></script>
<div class="inputDiv1">
    <div class="inputDiv2">
        <form id="form1">
            <div>姓名</div>
            <div><input id="name" name="name" value="" type="text"
                        required maxlength="15"
                        data-msg-required="请输姓名"
                        data-msg-maxlength="姓名不能超过15个字"></div>
            <div>性别</div>
            <div>
                <select id="sex" name="sex">
                    <option></option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
            <div>年龄</div>
            <div><input id="age" name="age" value="" type="number"
                        maxlength="3" min="1"
                        data-msg-maxlength="年龄不能超过3位数"
                        data-msg-min="年龄不能小于1">
            </div>
            <div>密码</div>
            <div><input id="password" name="password" value="" type="password"
                        required maxlength="11" minlength="8"
                        data-msg-required="请输入密码"
                        data-msg-maxlength="密码长度必须8-11位数且包含数字和大小写字母"
                        data-msg-minlength="密码长度必须8-11位数且包含数字和大小写字母"
            ></div>
            <div>确认密码</div>
            <div><input id="re_pwd" name="re_pwd" value="" type="password"
                        required maxlength="11"
                        data-msg-required="请再次输入密码"
                        data-msg-maxlength="密码长度必须8-11位数且包含数字和大小写字母"
            ></div>
            <div>手机号码</div>
            <div><input id="phone" name="phone" value="" type="text"
                        required minlength="11" maxlength="11" number="true"
                        data-msg-required="请输入手机号码"
                        data-msg-minlength="手机号码不正确"
                        data-msg-maxlength="手机号码不正确"
                        data-msg-number="手机号码不正确"
            ></div>
            <div>验证码</div>
            <!--            <img id="qrImage" style="margin: 0 auto;" src="/analysis/captcha/image" onclick="this.src='/analysis/captcha/image?'+Math.random()">-->
            <div style="width: 100%; margin: 0 auto; line-height: 40px">
                <input style="width: 30%" id="qrcode" name="qrcode" value="" type="text"
                       required maxlength="6"
                       data-msg-required="请输入验证码">
                <span id="sendQr"><a href="javascript:getPhoneQr()">点击获取手机验证码</a></span>
                <span id="countdown">120</span>
                <!--                <input style="width: 30%" type="button" value="获取手机验证码">-->
            </div>
        </form>
        <div>&nbsp;</div>
        <div style="width: 100%; text-align: center; margin: 0 auto">
            <!--                <a href="javascript:regist()" style="text-decoration: none; color: #ffffff">-->
            <button class="blueBtnDiv" onclick="regist()" style="cursor:pointer; border: 0">
                注册
            </button>
            <!--                </a>-->
        </div>
        <div>&nbsp;</div>

    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#countdown").hide()
    })

    function getPhoneQr() {
        if ($("#phone").valid()) {
            var data = {};
            data.phone = btoa($("#phone").val())
            $.ajax({
                url: '/analysis/phoneQr/send',
                type: 'POST',
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: 'json',
                success: function (res) {
                    // layer.close(LAYER_LOAD_ID)
                    if (res.code == 0) {
                        // window.parent.isLogin = true
                        layer.alert("手机验证码已成功发送", {icon: 1}, function () {
                            layer.closeAll()
                            // window.parent.layer.close(window.parent.LAYER_ID)
                            startCountdown()
                        });
                    } else {
                        // window.parent.isLogin = false
                        layer.alert(res.message, {icon: 2});
                    }
                },
                error: function (xhr, status, error) {
                    // layer.close(LAYER_LOAD_ID)
                    console.error('访问服务器错误:', error);
                    window.parent.isLogin = false
                    layer.alert("服务器繁忙，请稍后重试！", {icon: 2});
                },
                complete: function (XHR, TS) {
                    // layer.close(LAYER_LOAD_ID)
                    // $("#qrImage").attr('src', '/analysis/captcha/image?' + Math.random())
                }
            });
        }
    }

    var countdown = 120

    function startCountdown() {
        $("#sendQr").hide()
        $("#countdown").show()
        $("#countdown").text(countdown + '秒后重新发送');
        timer = setInterval(function () {
            countdown--;
            if (countdown > 0) {
                $("#countdown").text(countdown + '秒后重新发送');
            } else {
                clearInterval(timer);
                countdown = 120; // 重置倒计时
                // $btn.prop('disabled', false).text('发送验证码');
                $("#sendQr").show()
                $("#countdown").hide()

            }
        }, 1000);
    }

    function pswdStrength(val) {
        return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(val);
    }

    function checkStrength(password) {
        let strength = 0;
        if (password.length >= 8) strength++;
        if (/[A-Z]/.test(password)) strength++;
        if (/[a-z]/.test(password)) strength++;
        if (/[0-9]/.test(password)) strength++;
        if (/[@$!%*?&]/.test(password)) strength++;
        return strength
        // switch(strength) {
        //     case 5: return "STRONG"; // 最强
        //     case 4: return "MEDIUM";
        //     case 3: return "WEAK";
        //     default: return "TOO_WEAK";
        // }
    }

    function regist() {
        // alert(checkStrength($("#password").val()), {icon: 2})
        if (!$("#form1").valid()) {
            return
        }
        if (checkStrength($("#password").val()) <= 3) {
            layer.alert("密码长度必须8-11位数且包含大小写字母,数字", {icon: 2});
            return;
        }
        if ($("#password").val() != $("#re_pwd").val()) {
            layer.alert("两次输入的密码不一致！", {icon: 2});
            return;
        }
        const t = $("#form1").serializeArray()
        var data = {};
        $.each(t, function (i, field) {
            data[field.name] = field.value;
        });
        data.password = hex_md5(data.password)
        data.phone = btoa(data.phone)
        const LAYER_LOAD_ID = layer.load(2)
        $.ajax({
            url: '/analysis/regist/doReg',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: 'json',
            success: function (res) {
                // layer.close(LAYER_LOAD_ID)
                if (res.code == 0) {
                    // window.parent.isLogin = true
                    layer.alert("注册成功", {icon: 1}, function () {
                        layer.closeAll()
                        window.parent.layer.close(window.parent.LAYER_ID)
                    });
                } else {
                    // window.parent.isLogin = false
                    layer.alert(res.message, {icon: 2});
                }
            },
            error: function (xhr, status, error) {
                // layer.close(LAYER_LOAD_ID)
                console.error('访问服务器错误:', error);
                window.parent.isLogin = false
                layer.alert("服务器繁忙，请稍后重试！", {icon: 2});
            },
            complete: function (XHR, TS) {
                layer.close(LAYER_LOAD_ID)
                // $("#qrImage").attr('src', '/analysis/captcha/image?' + Math.random())
            }
        });
    }
</script>