注册页面图片验证+手机验证

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/jsp/base/taglib.jsp" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>系统-注册</title>

    <jsp:include page="/jsp/base/styles.jsp"/>
</head>

<body class="login-body">

<div class="container">
    <lc:cached id="_msg" remove="true"/>
    <input type="hidden" id="back_msg" value="${_msg}"/>
    <lc:cached id="_msg_type" remove="true"/>
    <input type="hidden" id="back_msg_type" value="${_msg_type}"/>

    <form name="form_signin" class="form-signin" action="/w/client/signup" method="post" onsubmit="return fPostSignup();">
        <h2 class="form-signin-heading">客户注册</h2>
        <div class="login-wrap">
            <div class="form-group">
                <input name="mobile" autocomplete="off" pattern="^[1][0-9]{10}$" maxlength="11" type="text" value="${entity.mobile}"
                       class="form-control input-lg" placeholder="手机号码,如13900010002" autofocus required>
                <small class="help-block">手机号是您唯一登录标识</small>
            </div>
            <div class="form-group">
                <input name="passwd" type="password" minlength="6" maxlength="10" pattern="^[0-9a-zA-Z]{6,10}$" class="form-control input-lg" placeholder="密码" required autocomplete="off">
                <small class="help-block">6-10位,数字或字母</small>
            </div>
            <div class="form-group">
                <input id="password_repeat" type="password" class="form-control input-lg" minlength="6" maxlength="10" placeholder="确认密码"
                       autocomplete="off" required data-toggle="popover" data-placement="bottom" data-trigger="click" data-content="请确保与上面的密码一致">
                <small class="help-block">再次输入上面的密码</small>
            </div>
            <div class="form-group">
               <select class="form-control input-sm" name="clientEntity" required>
                    <option value="">客户类型</option>
                    <c:forEach var="t" items="${entityType}">
                        <option value="${t.code }" <c:if test="${entity.clientEntity == t.code}">selected</c:if> >${t.label}</option>
                    </c:forEach>
               </select>
               <small class="help-block">你的类型,企业或者个人</small>
            </div>
            <div class="form-group">
               <input name="name" autocomplete="off" maxlength="50" pattern="^[\u4e00-\u9fa5\w\d\-_()()]{0,50}$" type="text" value="${entity.name}" class="form-control input-lg" placeholder="姓名(个人客户)/企业名(企业客户)" required>
               <small class="help-block">只能是 中文、英文、数字和-_()()特殊字符</small>
            </div>
            <div class="form-group">
                <input type="text" class="form-control"  name="vcode"  placeholder="验证码 " maxlength="4" required style="display: inline-block;width: 60%;"/>
                <img src="/jsp/access/vcode.jsp" id="img_vcode" onclick="javascript:this.src='/jsp/access/vcode.jsp?' + Math.random()" style="cursor:pointer;margin-left: 10%;" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control"  name="mcode"  placeholder="手机验证码 " maxlength="6" required style="display: inline-block;width: 60%;"/>
                &nbsp;<button type="button" id="btn_sendMail" onclick="sendMail()" class="btn btn-info btn-sm">获取手机验证码</button>
            </div>
            <div class="form-group pull-right">
                <input class="checkbox-input" type="checkbox" name="agreement" required/>
                <div class="pull-right"  style="margin-top:2px;">
                    &nbsp;已阅读,并同意<a href="https://glpcqtestloan.b0.upaiyun.com/files/20170621/mmk11csdjbyqpsgo.pdf" target="_blank">《贷款协议》</a>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" id="signup_btn" class="btn btn-primary btn-lg btn-block">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</button>
            </div>
            <div class="form-group" style="margin-bottom: 30px;">
                <div class="col-sm-12">
                    <span class="pull-right">
                        已有帐号,&nbsp;<a href="/w/client/login" class="text-center">去登录 </a>
                    </span>
                </div>
            </div>
        </div>
    </form>
</div>

<jsp:include page="/jsp/base/scripts.jsp"/>
<jsp:include page="/jsp/base/alert.jsp" />
<script>
    function fPostSignup() {
        $("#signup_btn").attr("disabled","disabled");
        $('form[name=form_signin] .form-group').removeClass('has-error');

        var password = $("#password_repeat").val(), valid = $("input:invalid").length == 0 && $("input[name=passwd]:password").val() == password, mobile = $("input[name=mobile]").val();
        $('#password_repeat').focus().popover('hide');
        if (!valid) {
            $("input:invalid").eq(0).focus().popover('show');
            // 两次密码不一致
            if ($("input[name=passwd]:password").val() != password) {
                $("#password_repeat").focus().popover('show');
            }
            $("#signup_btn").removeAttr("disabled");
        } else {
            password = CryptoJS.MD5(password).toString();
            localStorage.setItem("SignInMobile", mobile);
            localStorage.setItem("SignInPassword", password);
            $("input[name=passwd]:password").val(password);
        }
        return valid;
    }

    // 发送短信
    function sendMail(){
         var mobile = $("input[name='mobile']").val();
         if(mobile != ""){
             var reg = /^[1][0-9]{10}$/;
             if(reg.test(mobile)){
                 var vcode = $("input[name='vcode']").val();
                 if(vcode != ""){
                     $.ajax({
                            type: "post",
                            url: "/w/client/checkVCode.json",
                            data:{vcode:vcode},
                            cache:false,
                            async:false, 
                            dataType: "json",
                            success: function(data){
                                if(data.result){
                                    $.ajax({
                                        type: "post",
                                        url: "/w/client/sendMCode.json",
                                        data:{mobile:mobile,vcode:vcode},
                                        cache:false,
                                        async:false, 
                                        dataType: "json",
                                        success: function(data){
                                            if(data.result){
                                                settime($("#btn_sendMail"));
                                            }else{
                                                $("#alert-modal-msg").html("短信发送失败,请稍后重试!");
                                                $("#alert_display_botton").click();
                                            }
                                        }
                                    });
                                }else{
                                    $("input[name='vcode']").val("");
                                    $("#img_vcode").click();
                                    $("#alert-modal-msg").html("请先输入正确的验证码,再获取手机验证码!");
                                    $("#alert_display_botton").click();
                                }
                            }
                        });
                 }else{
                     $("#alert-modal-msg").html("请先输入验证码,再获取手机验证码!");
                     $("#alert_display_botton").click();
                 }
             }else{
                 $("#alert-modal-msg").html("请先输入正确的手机号,再获取手机验证码!");
                 $("#alert_display_botton").click();
             }
         }else{
             $("#alert-modal-msg").html("请先输入手机号,再获取手机验证码!");
             $("#alert_display_botton").click();
         }
    }

    // 短信后倒计时
    var countdown = 120;
    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttr("disabled");
            obj.html("获取手机验证码");
            countdown = 120;
            return;
        } else {
            obj.attr("disabled","disabled");
            obj.html(countdown + "s后重新获取");
            countdown--;
        }
        setTimeout(function() {settime(obj)} ,1000)
    }
</script>
</body>
</html>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值