<%@ 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%;"/>
<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;">
已阅读,并同意<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">注 册</button>
</div>
<div class="form-group" style="margin-bottom: 30px;">
<div class="col-sm-12">
<span class="pull-right">
已有帐号, <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>
注册页面图片验证+手机验证
最新推荐文章于 2022-05-26 11:51:39 发布