leyui短信验证码发送功能
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label-funds">手机验证码:</i></label>
<div class="layui-input-inline">
<input type="text" name="captcha" placeholder="请输入验证码"
autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<button type="button" class="layui-btn verification-code" >获取验证码</button>
</div>
js 要写到
getVerificationCodeUrl = /*[[@{/storeValueUser/getVerificationCode}]]*/ '';
layui.use(['element', 'form', 'laydate'], function () { 写到这里面
//以下是核心代码
//发送验证码
$('.verification-code').on('click', function () {
$.ajax({
//async: false,
dataType: 'json',//数据类型
type: "POST",
data: {
"phone": $("#userPhones").val()
},
url: getVerificationCodeUrl,
success: function (result) {
if (result.code === '200') {
settime();
} else if (result.code === '50001') {
layer.alert(result.msg, {icon: 2});
}else if (result.code === '50002') {
layer.alert(result.msg, {icon: 2});
}else if (result.code === '50003') {
layer.alert(result.msg, {icon: 2});
}
}
});
});
//验证码
var counts = 60;
function settime(val) {
if (counts == 0) {
$(".verification-code").removeClass('layui-disabled').html('获取验证码')
counts = 60;
return false;
} else {
$(".verification-code").addClass('layui-disabled').html("重新发送(" + counts + ")");
counts--;
}
setTimeout(function () {
settime(val);
}, 1000);
}
})
;
//以上是核心代码
}
后台代码就好整了,要的话上网搜,很多,看你基于阿里还是自己内部的平台了