自己做的一个用户注册的表单,注册需要验证手机号,会发送短信验证码,所以在用户填写完验证码之后点击注册,再提交表单之前先请求后台验证一下短信验证码是否正确,错误会有提示,正确就会提交表单注册.

前端使用thymeleaf模板,semantic UI框架,后台是spring boot

先看注册的form

<form class="ui form attached fluid segment" name="enrollInfo" id="enroll" th:action="@{/enroll}" method="post" th:onsubmit="'return validateMsgCode();'">
            <div class="ui error message">
                <div class="header" id="error">请求正确填写注册信息哦!</div>
            </div>
            <div class="field">
                <div class="ui left icon input">
                    <i class="user icon"></i>
                    <input type="text" name="username" placeholder="独一无二的用户名">
                </div>
            </div>
            <div class="field">
                <div class="ui left icon input">
                    <i class="mobile alternate icon"></i>
                    <input type="text" name="telPhone" placeholder="手机号">
                </div>
            </div>
            <div class="field">
                <div class="ui left icon input">
                    <i class="envelope square icon"></i>
                    <input type="text" name="msgCode" placeholder="短信验证码">
                    <button class="ui positive button msg" type="button" th:onclick="'getMsgNum(this)'">发送验证码</button>
                </div>
            </div>
            <div class="field">
                <div class="ui left icon input">
                    <i class="shield alternate icon"></i>
                    <input type="password" name="password" placeholder="6-16位的密码,可由数字、字符、字母组成">
                </div>
            </div>
            <button class="fluid teal ui button" type="submit">注册</button>
        </form>

这里采用的方法是在form标签中使用onsubmit,thymeleaf的写法是th:onsubmit="'return 执行函数()'",我js中的实现看下面代码

function validateMsgCode() {
    var result = false;
    var data = {
        telPhone: $("input[name='telPhone']").val(),
        msgCode: $("input[name='msgCode']").val()
    };
    syncAjaxData("POST", "/validateMsgCode", JSON.stringify(data), function (response) {
        console.log("result=" + response);
        if (response) {
            result = true;
        }else {
            console.log("验证码错误");
            $('.ui.form').form('add prompt', "msgCode", "验证码错误或超时");
        }
    });
    return result;
}

重点就在这里了

这里Ajax请求的后台就是一个短信的验证没什么可说的,Ajax是我封装了以下的,里面有一句重要的代码async: false,,就是要将Ajax设为同步的,这样才可以改变result的值,否则Ajax会新开一个异步线程去执行,这样影响不到函数里的变量,验证就没有作用了,
但我这里同步Ajax出现了一个新问题,就是如果验证错误,我会通过semantic中表单验证的方法给指定字段添加错误提示(具体使用方法可以参考官方文档),$('.ui.form').form('add prompt', "msgCode", "验证码错误或超时");,但我在测试中发现这个验证总是闪一下就没了,到现在不明白为什么,
就是下面这个样子,手速快,在它要没了的时候我给截了下来,

注册界面

function validateMsgCode() {
    var result = false;
    var data = {
        telPhone: $("input[name='telPhone']").val(),
        msgCode: $("input[name='msgCode']").val()
    };
    ajaxData("POST", "/validateMsgCode", JSON.stringify(data), function (response) {
        console.log("result=" + response);
        if (!response) {
            console.log("验证码错误");
            $('.ui.form').form('add prompt', "msgCode", "验证码错误或超时");
        }
    });
    syncAjaxData("POST", "/validateMsgCode", JSON.stringify(data), function (response) {
        console.log("result=" + response);
        if (response) {
            result = true;
        }
    });
    return result;
}

先用一个异步的Ajax来做验证错误提示,再用一个同步的Ajax做字段验证,这样可以做到错误提示,并且起到表单验证的作用,缺陷就是多了一次重复的请求,但为了实现效果,多一次请求没有太大影响吧.