按钮
首先是获取验证码的按钮:
<div class="layui-form-item"><label for="phoneCode" class="layui-form-label">验证码</label><div class="layui-input-inline"><input type="text" id="phoneCode" name="phoneCode" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="请填写验证码"></div><button type="button" class="layui-btn" id="btnSendPhoneCode" name="btnSendPhoneCode" onclick="getPhoneCode()">获取验证码</button></div>
这里要注意button的type值是button,很多时候容易写成submit,在点击按钮时,输入框会提示需要填写内容。
当我点击获取验证码按钮,就来到了方法这里:
if (idx > 1) {idx--;$("#btnSendPhoneCode").text(idx + "秒后重新发送");$("#btnSendPhoneCode").addClass("layui-btn-disabled");} else {$("#btnSendPhoneCode").text("发送验证码");$("#btnSendPhoneCode").attr("onclick","getPhoneCode();");$("#btnSendPhoneCode").removeClass("layui-btn-disabled");clearInterval(intv1)}
idx是设置的秒数, 当idx大于1时,进行倒计时,改变按钮的值,并将按钮设置为禁用按钮,不可点击。
当idx小于等于1时,将按钮的值改回,并删除禁用,可再次点击获取验证码,点击后即上一步。
效果图
未点击时:
点击获取验证码:
今天先分享这些,有问题请评论或私信哦。