html表单中添加手机短信认证,表单提交前验证短信验证码是否正确

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

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

先看注册的form

请求正确填写注册信息哦!

发送验证码

注册

这里采用的方法是在form标签中使用onsubmit,thymeleaf的写法是th:οnsubmit="'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) {