注册页面表单js验证，手机验证码验证，阻断提交表单的可行性方案（移植性极强）

jiankang666

发布于 2022-05-12 20:25:26

3.5K0

发布于 2022-05-12 20:25:26

文章被收录于专栏：java基础笔记

一、首先看效果展示：

二、下面就来介绍如何实现

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）这一前一后的判断，就能保证我们的提交内容符合要求。