版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xuxin132133/article/details/83410684
1.手机验证码用的是秒嘀科技的手机短信功能。
2、前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta title="用户注册页面">
<meta charset="utf-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/register.css" />
<script src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script>
<script src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.min.js"></script>
<script>
/*var pathArray = window.location.pathname.split('/');
var secondLevelLocation = pathArray[1];
var loginUrl = window.location.protocol + "//" + window.location.host + "/"+ secondLevelLocation;*/
$(document).ready(function() {
//打开会员注册
$("#login_container").hide();
$("#_start").animate({
left: '350px',
height: '520px',
width: '400px'
}, 500, function() {
$("#regist_container").show(500);
$("#_close").animate({
height: '40px',
width: '40px'
}, 500);
});
});
</script>
</head>
<body class="body-background">
<div class="login">
<img src="images/logo.png" width="10%" style="margin-top: -10px;margin-left: 30px">
<%--<div class="fr" style="margin-top: -10px">欢迎</div>--%>
<div class="wrapper">
<div class="fl font30">
</div>
</div>
</div>
<!-- 会员登录 -->
<!--<div id='Login_start' style="position: absolute;" >-->
<div id='_start' style="margin-top: 100px">
<br />
<!-- 会员注册 -->
<div id='regist_container' style="display: none;">
<div id="lab1">
<span id="lab_login">会员注册</span>
<span id="lab_toLogin">
 已有账号?
<span id='toLogin' style="color: #EB9316;cursor: pointer;"><a href="login.jsp">立即登录</a></span>
</span>
</div>
<form id="frm" method="post" enctype="application/x-www-form-urlencoded" >
<div id="form_container2" style="padding-top: 25px;">
<input type="text" class="form-control" name="tb_account" value="" placeholder="用户名" id="regist_account" required/>
<input type="password" class="form-control"name="tb_pass" placeholder="密码" id="regist_password1"maxlength="20"/>
<input type="password" class="form-control"name="confirm_pass" placeholder="确认密码" id="regist_password2" required/>
<input type="text" class="form-control"name="tb_phoneNum" placeholder="手机号" id="regist_phone"required/>
<input type="text" class="form-control"name="identify_code" placeholder="验证码" id="regist_vcode"maxlength="6" required/>
<!--<button id="getVCode" type="button" class="btn btn-success" >获取验证码</button>-->
<input id="getVCode" type="button" name="tb_sendCode" class="btn btn-success" value="点击发送验证码" onclick="sendCode(this)" />
</div>
<input type="button" value="注册" class="btn btn-success" id="regist_btn"/>
</form>
</div>
</div>
</body>
<script type="text/javascript">
//点击按钮后，时间为60秒，自动倒计时
var clock = '';
var nums = 60;
var btn;
function doLoop() {
nums--;
if (nums > 0) {
btn.value = '重新获取（'+nums+'）';
} else {
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '点击发送验证码';
nums = 60; //重置时间
}
}
//发送手机验证码
function sendCode(thisBtn) {
var tb_phoneNum=$('#regist_phone').val();
//验证手机号
var pattern=/^1[3,5,7,8,9]\d{9}$/;
var bo=tb_phoneNum.match(pattern);
alert(bo)
if(bo){
$.ajax({
//ajax发送请求信息
url: '<%=request.getContextPath()%>/register/postIdentifyCode.do?tb_phoneNum='+tb_phoneNum,
/* data:{"tb_phoneNum":tb_phoneNum},*/
type: 'post',
/*dataType: JSON,*/
success() {
}
})
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = '重新获取（'+nums+'）';
clock = setInterval(doLoop, 1000); //一秒执行一次
}else {
alert("您的电话号码有误，请重新输入！")
}
}
</script>
<script>
//提交表单数据
$("#regist_btn").click(function () {
/*alert("提交")*/
//第一个密码
var pass_1 = $("[name=tb_pass]").val();
//第二个密码
var pass_2 = $("[name=confirm_pass]").val();
//输入的手机号
var tb_phoneNum = $("[name=tb_phoneNum]").val();
//手机号正则表达式
var pattern = /^1[35789]\d{9}$/;
if (pass_1 != null && pass_1 != pass_2) {
alert("两次密码输入不一致，请重新输入！")
$("[name=confirm_pass]").val("");
} else {
if (!pattern.test(tb_phoneNum)) {
alert("请您输入11位正确手机号！")
} else {
if ($("[name=identify_code]").val() != null&&$("[name=identify_code]").val()!="") {
$.ajax({
url: '<%=request.getContextPath()%>/register/checkCode.do',
type: 'post',
data: $("#frm").serialize(),//序列化表单
contentType: 'application/x-www-form-urlencoded',
dataType: "text",
processData: false,
success: function (result) {
alert(result)
if (result = 'success') {
alert("注册成功！")
window.location.href = "<%=request.getContextPath()%>/shopping/index.jsp";
} else {
alert("注册失败！")
window.location.href = "<%=request.getContextPath()%>/shopping/register.jsp";
}
},
error: function (flag) {
alert("注册失败！")
window.location.href = "<%=request.getContextPath()%>/shopping/register.jsp";
}
})
}else{
alert("验证码不能为空!")
}
}
}
});
</script>
</html>SSM中一般信息数据返回用model