Java用户注册手机短信验证码校验功能实现- 校招VIP

文章申明：转载来源：https://blog.51cto.com/zhangxueliang/2966881

验证用户提交的手机短信验证码，如果验证码错误就跳回到当前页面。在短信验证码未填写或未正确填写时，就关闭底下注册按钮的功能，只有短信验证码通过校验后才打开注册按钮的功能。

第二种方式是所有输入项全部填写完成后一并提交给服务器，服务器统一进行校验。本例采用第二种方式。

由于后台短信验证码校验时如果不通过其他的注册信息没法成功提交，所以要在CustomerAction类中先将短信校验这一项默认设置为通过，才能一并获得提交注册的信息。

//调用SMS服务发送短信
        //String result = SmsUtils.sendSmsByHTTP(model.getTelephone(),msg);
        String result = "000/XXX";
        if(result.startsWith("000")){
            //以"000"开头表示短信发送成功
            return NONE;
        }else{
            //发送失败，就抛出一个运行期异常
            throw new RuntimeException("短信发送失败,信息码："+result);
        }

要保证页面输入框input中的name值跟后台的domain类中的属性的值保持一致。

<div class="signup" ng-app="signupApp" ng-controller="signupCtrl">
                    <div class="col-md-9 signupbox">
                        <form id="customerForm" action="customer_regist.action" method="post" class="form col-md-6">
                            <div class=" form-group">
                                <label for="inputaccount" class="col-sm-3 control-label"><b>*</b>手机号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="telephone" ng-model="telephone" id="inputaccount" placeholder="请输入手机号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputaccount" class="col-sm-3 control-label"><b>*</b>验证码</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" id="inputaccount" placeholder="请输入验证码" name="checkcode">
                                </div>
                                <div class="col-sm-3 song">
                                    <!-- 发送验证码按钮 -->
                                    <a class="btn btn-default" 
                                        ng-click="getCheckCode(telephone)" 
                                        ng-bind="btnMsg">
                                    </a>
                                </div>

                            </div>
                            <div class="form-group">
                                <label for="inputaccount" class="col-sm-3 control-label"><b>*</b>密码</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="inputaccount" placeholder="6-16位数字或英文字母" name="password">
                                    <p class="text-right grey">安全强度：*****</p>
                                </div>

                            </div>

                            <div class="form-group">
                                <label for="inputaccount" class="col-sm-3 control-label"><b>*</b>确认密码</label>
                                <div class="col-sm-8">
                                    <input type="password" class="form-control" id="inputaccount" placeholder="6-16位数字或英文字母">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputaccount" class="col-sm-3 control-label"><b>*</b>绑定邮箱</label>
                                <div class="col-sm-8">
                                    <input type="email" class="form-control" id="inputemail" placeholder="请输入需要绑定的邮箱" name="email">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-8 song">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> 查看并同意<a href="#"> 《速运快递服务协议》</a>
                                        </label>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group signbtn">
                                <div class="col-sm-offset-3 col-sm-8 song">
                                    <a class="btn btn-danger" href="javascript:$('#customerForm').submit();">注册</a>
                                </div>
                            </div>

                        </form>

                    </div>

给a标签中的【注册】按钮添加点击事件，当click时直接提交表单数据。

注：在一般的form表单中都会有一个用于提交的input，这个input的type属性值为submit，所以点击这个input时就会将form中的数据进行提交。

本例中考虑到整体的美观和服务于其他业务逻辑，并没有在form中设置这么一个input，因而需要使用原生的js技术将一个普通的a标签转换成按钮，然后给该按钮注册点击事件，只要一点击就提交表单数据。

<a class="btn btn-danger" href="javascript:$('#customerForm').submit();">
注册
</a>

接下来编写后台Action代码，要注意一个问题，因为本例中我使用了webservice技术

在signup.html所在的项目中并没有一个实体类用来保存前端页面提交过来的数据，最终数据被提交到了另外一个crm系统crm_management中，因此需要在crm_management系统中提供一个regist的服务，否则用户注册的数据时没法保存的。

CustomerAction代码要点如下：
① 用户注册成功后，设置跳转到regist_success.html页面。
② 校验短信验证码，如果校验不通过，就跳回到注册页面。
③ 需要在@Action中配置两个结果集@Result，一个是注册成功后需要跳转的页面，一个是注册失败后需要跳转的页面。
④ 使用属性驱动接收页面提交的验证码。提供set方法。生成的短信验证码已经被保存到session中了，不信？！
查看代码中我已经编写了ServletActionContext.getRequest().setAttribute(model.getTelephone,randomCode)来将短信验证码保存到session中。
⑤ 直接从session中获取之前生成的短信验证码，因为之前保存验证码时使用的是手机号码作为key，所以可以直接通过手机号来获取验证码。短信验证码实际上就是使用RandomStringUtils工具类中的randomNumeric(4)方法生成了一个4位数的随机数字字符串。通过ServletActionContext.getRequest().getSession().getAttribute(model.getTelephone());来获取短信验证码。
⑥ 如果短信验证码为空或者不等于我们随机生成的验证码，那么就是校验失败，将客户的页面跳转到注册页面signup.html。直接return INPUT；返回一个input视图。
⑦ 注册成功就调用webservice连接crm来保存用户的注册信息。直接return SUCCESS;返回一个SUCCESS视图。

完整的CustomerAction代码，包含上例中生成短信验证码的业务代码：

@ParentPackage("json-default")
@Namespace("/")
@Controller
@Scope("prototype")
public class CustomerAction2 extends BaseAction<Customer> {
    @Action(value="customer_sendSms")
    public String sendSms() throws IOException{
        //生成短信验证码
        String randomCode = RandomStringUtils.randomNumeric(4);
        //将短信验证码保存到session中
        ServletActionContext.getRequest().getSession().setAttribute(model.getTelephone(),randomCode);
        //编辑短信内容
        String msg = "你好！本次获取的验证码位："+randomCode;
        //调用SMS服务发送短信
        //String result = SmsUtils.sendSmsByHTTP(model.getTelephone(),msg);
        String result = "000/XXX";
        if(result.startsWith("000")){
            //以"000"开头表示短信发送成功
            return NONE;
        }else{
            //发送失败，就抛出一个运行期异常
            throw new RuntimeException("短信发送失败,信息码："+result);
        }
    }

    //属性驱动接收页面填写的验证码
    private String checkCode;
    public void setCheckCode(String checkCode) {
        this.checkCode = checkCode;
    }
    @Action(value="customer_regist",results={@Result(name="success",type="redirect",location="signup_success.html"),
            @Result(name="input",type="redirect",location="signup.html")})
    public String regist(){
        //先校验短信验证码，如果不通过就跳回登录页面
        //从session中获取之前生成的短信验证码
        String checkcodeSession = (String) ServletActionContext.getRequest().getAttribute(model.getTelephone());
        if(checkcodeSession==null||!checkcodeSession.equals(checkCode)){
            System.out.println("短信验证码错误！");
            //短信验证码错误
            return INPUT;
        }
        //调用webservice连接crm保存客户信息
        System.out.println("客户注册成功...");
        return SUCCESS;
    }
}