一、首先看效果展示：
二、下面就来介绍如何实现
1、html表单部分如下，样式使用的是AdminLTE前端框架，可以不理会。简要说明一下：
（1）我在form表单头部加了id=“myform”，为了在js中进行阻断提交时获取form
（2）在每一个<input>表单后面加了一个span，并给span加了不同的id，为了在阻断提交时获得span值判断是否需要阻断提交。
（3）点击带有事件的a标签会去后台获取验证码，同时该a标签后台带了一个a标签，这个a标签为了在验证码获取成功后，显示再次获取验证码的剩余时间。
<div class="register-box">
<div class="register-logo">
<b>教育在线</b>
</div>
<div class="register-box-body">
<p class="login-box-msg">注册一个新账户</p>
<form action="/saveregister" method="post" id="myform">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="请输入手机号" name="phone"><span id="spanphone"></span>
<span class="glyphicon glyphicon-phone form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="请输入密码" name="password"><span id="spanpassword"></span>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="请再次输入密码" name="repassword"><span id="spanrepassword"></span>
<span class="glyphicon glyphicon-log-in form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="请输入手机验证码" name="yanzhenma"><span id="spanyanzhenma"></span>
<span class="glyphicon glyphicon-bishop form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-6">
<a onclick="getAuth()" style="cursor: pointer" id="getcode">获取手机验证码</a><a id="resttime"></a>
</div>
<!-- /.col -->
<div class="col-xs-6">
<button type="submit" class="btn btn-primary btn-block btn-flat" onclick="save()">注册</button>
</div>
<!-- /.col -->
</div>
</form>
<a href="/login" class="text-center">我已经有账户了</a>
</div>
<!-- /.form-box -->
</div>2、对每个表单字段进行验证
（1）对phone表单进行js验证，在验证时使用了正则判断是否是手机号，同时通过ajax去后台查询phone是否已注册。
//电话验证
$("[name=phone]").blur(function () {
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
var phone=$("[name=phone]").val();
if ($("[name=phone]").val() != "") {
if(!myreg.test(phone)){
$("[name=phone]").next().text("请输入正确的手机号").css("color", "red");
}else{
//ajax后台查询是否手机号已注册
$.ajax({
url: "/solephone",
data:{"phone":phone},
type: "POST",
success: function (result) {
if (result != "0") {
$("[name=phone]").next().text("手机号已注册！").css("color", "red");
} else {
$("[name=phone]").next().text("");
}
}
});
}
} else {
$("[name=phone]").next().text("不能为空").css("color", "red");
}
});（2）对密码进行判断，没有规定什么格式，不为空即可。
//密码验证
$("[name=password]").blur(function () {
if ($("[name=password]").val() != "") {
$("[name=password]").next().text("");
} else {
$("[name=password]").next().text("不能为空").css("color", "red");
}
});（3）重复输入密码，进行前后比较，repassword后面的span标签显示比较结果。
//两次密码确定
$("[name=repassword]").blur(function () {
if ($("[name=repassword]").val() != "") {
var password=$("[name=password]").val();
if($("[name=repassword]").val()==password){
$("[name=repassword]").next().text("");
}else{
$("[name=repassword]").next().text("两次密码输入不一致").css("color", "red");
}
} else {
$("[name=repassword]").next().text("不能为空").css("color", "red");
}
});（4）下面对验证码进行判断，我们需要获取前台输入的验证码，带到后台进行判断，如何手机还没有获取过验证码，在其后面的span提示请先获取验证码，如何后台响应前台的验证码与手机号获取的不一致，我们在span中提示不一致。
//验证码验证
$("[name=yanzhenma]").blur(function () {
//获得前台输入的验证码
var preauthcode=$("[name=yanzhenma]").val();
if ($("[name=yanzhenma]").val() != "") {
//验证码不为空时，到后台进行比较，返回响应码，为1，提示请先获得验证码
//为2，提示验证码错误
//为3，验证码正确，无提示
$.ajax({
url: "/comparecode",
data:{"preauthcode":preauthcode},
type: "POST",
success: function (result) {
if (result == "1") {
$("[name=yanzhenma]").next().text("请先获得验证码！").css("color", "red");
} else if(result == "2") {
$("[name=yanzhenma]").next().text("输入验证码与手机验证码不匹配！").css("color", "red");
} else if(result == "3"){
$("[name=yanzhenma]").next().text("");
}
}
});
} else {
$("[name=yanzhenma]").next().text("不能为空").css("color", "red");
}
});3、获取验证码操作步骤：
（1）点击获取后我们先拿到phone表单中的内容进行判断符合要求后用ajax传到后台，进行获取，我使用了阿里的短信服务，可以给手机发验证码，如果没有该服务的话，提供一个解决思路，就是到后台后返回前台一个随机的数字组合，alert返回的result。注意：无论是阿里的短信服务还是直接传过来随机生成的验证码，我们必须在返回前台之前，把验证码保存到session中，以便判断验证码字段时使用。
//获取验证码
function getAuth() {
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
var phone=$("[name=phone]").val();
if ($("[name=phone]").val() != "") {
if(!myreg.test(phone)){
alert("请输入正确的手机号");
}else{
//ajax后台查询是否手机号已注册
$.ajax({
url: "/getcode",
data:{"phone":phone},
type: "POST",
success: function (result) {
if (result == "0") {
alert("成功获取验证码，请注意查收！");
settime();
} else {
alert("获取失败")
}
}
});
}
} else {
alert("请先填写手机号！")
}
}（2）在获取成功之后，我们把该带有点击事件的a标签清空，并给它后面的a标签赋值。使用循环，进行剩余时间判断，当剩余时间为0时，重新恢复到最初的状态（第一个a标签有点击事件，第二个a标签无值）。该循环settime（）在上面成功获取验证码后调用了，代码如下：
//倒计时代码
var countdown=60;
function settime() {
if (countdown == 0) {
$("#resttime").text("");
$("#getcode").text("获取手机验证码");
countdown = 60;
return false;
} else {
$("#getcode").text("");
$("#resttime").text("重新发送剩余（"+countdown+"）秒");
countdown--;
}
setTimeout(function() {
settime();
},1000);
}4、传到后台的ajax判断代码：
（1）判断手机唯一性代码如下，十分简单。
/**
*注册时验证手机唯一性
*/
@RequestMapping("/solephone")
@ResponseBody
public int solephone(String phone) {
int i=sd.solephone(phone);
return i;
}（2）后台获取验证码代码如下：我使用了long长整型获取了当前的时间，拿到4位验证码并保存session。我的session是shiro权限验证的session，可能大家操作时此处会有所不同。使用了SmsService方法对手机号发送验证码。成功返回0，失败返回1，在此处代码只要传到后台的phone不为空，肯定获取成功。
/**
* 后台获得验证码
*/
@RequestMapping("/getcode")
@ResponseBody
public int getcode(String phone) {
long l=System.currentTimeMillis();
int k1=(int) (l%10000);
String code=String.valueOf(k1);
//session中保存code
Subject subject = SecurityUtils.getSubject();
Session session = subject.getSession();
session.setAttribute("autocode",code);
//成功返回0，失败返回1
if(phone!=null){
SmsService.send(phone,code);
return 0;
}else{
return 1;
}
}（3）ajax传到后台判断验证码唯一性代码如下：将session中的验证码与传过来的比较，不同的响应值代表的含义在代码中有体现。
/**
*判断验证码的正确性
*/
@RequestMapping("/comparecode")
@ResponseBody
public int authorization(String preauthcode) {
Subject subject = SecurityUtils.getSubject();
Session session = subject.getSession();
String autocode= (String) session.getAttribute("autocode");
//验证码不为空时，到后台进行比较，返回响应码，为1，提示请先获得验证码
//为2，提示验证码错误
//为3，验证码正确，无提示
if(autocode==null){
return 1;
}else if(autocode.equals(preauthcode)){
return 3;
}else{
return 2;
}
}5、保存操作的步骤。
1、获取imput中的值，同时获取input后面的span值，只要input有为空的，span有不为空的，就阻断提交。代码如下：
/*保存操作*/
function save() {
//拿到表单的值
var phone=$("[name=phone]").val();
var password=$("[name=password]").val();
var repassword=$("[name=repassword]").val();
var yanzhenma=$("[name=yanzhenma]").val();
//拿到表单附近的span的判断值
var spanphone=$("#spanphone").text();
var spanpassword=$("#spanpassword").text();
var spanrepassword=$("#spanrepassword").text();
var spanyanzhenma=$("#spanyanzhenma").text();
//如果input内容为空阻断提交 如何input后面的span判断有字说明不符合要求，阻断提交
if (phone == ""||password==""||repassword==""||yanzhenma==""||spanphone!=""||
spanpassword!=""||spanrepassword!=""||spanyanzhenma!="") {
$("#myform").bind("submit", (function (e) {
e.preventDefault();
}));
confirm("输入的信息有误，请重新检查");
} else {
var r=confirm("确认保存？");
if(r==true){
$("#myform").unbind("submit");
}else{
}
}
}2、使用这种方式的理由为：
（1）只要我们输入表单时离开会离开判断是否符合符合，只要不符合，后面的span就会提示，这样就 span就不为空了，不能提交成功。只有改正确了对应的span才为空。
（2）当我们不去输入表单时，我们的表单就有空的，也会阻断。
（3）这一前一后的判断，就能保证我们的提交内容符合要求。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
