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

验证用户提交的手机短信验证码,若是验证码错误就跳回到当前页面。在短信验证码未填写或未正确填写时,就关闭底下注册按钮的功能,只有短信验证码经过校验后才打开注册按钮的功能。第二种方式是全部输入项所有填写完成后一并提交给服务器,服务器统一进行校验。本例采用第二种方式。
因为后台短信验证码校验时若是不经过其余的注册信息无法成功提交,因此要在CustomerAction类中先将短信校验这一项默认设置为经过,才能一并得到提交注册的信息。javascript

//调用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类中的属性的值保持一致。html

<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代码,包含上例中生成短信验证码的业务代码:java

@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;
    }
}

这里写图片描述