自己做的一个用户注册的表单,注册需要验证手机号,会发送短信验证码,所以在用户填写完验证码之后点击注册,再提交表单之前先请求后台验证一下短信验证码是否正确,错误会有提示,正确就会提交表单注册.
前端使用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", "验证码错误或超时");,但我在测试中发现这个验证总是闪一下就没了,到现在不明白为什么,
就是下面这个样子,手速快,在它要没了的时候我给截了下来,
注册界面
这样确实是进行字段的验证,验证错误不会提交,正确就会提交注册,但闪一下就没了,这样肯定也是不行,
最后发现主要是onsubmit方法的原因,如果我使用异步Ajax,在一个异步的线程中执行,相当于跳出方法外执行就没有问题,但异步的做不到字段的验证,陷入了纠结中,表单验证和错误提示二者选一个,要么同步Ajax放弃错误提示,要么异步Ajax放弃验证,后者肯定是不行的,但前者的用户体验也会不好,最后想到的办法是二者我都要了,
具体实现就是写在onSubmit方法中写两个Ajax,一个异步一个同步,异步的用来做错误提示,同步用来做字段验证,修改后的js代码就是这样了
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做字段验证,这样可以做到错误提示,并且起到表单验证的作用,缺陷就是多了一次重复的请求,但为了实现效果,多一次请求没有太大影响吧.
网友评论