layui封装库
<!--layui封装库--> <script src="js/layui/layui.js" charset="utf-8"></script> <link rel="stylesheet" href="js/layui/css/layui.css">
构建表单
<div style="margin-top: 10px;"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">手机号码</label> <div class="layui-input-inline"><input type="text" name="mobile" id="mobile" lay-verify="mobile" autocomplete="off" class="layui-input"></div> </div> <div class="layui-form-item"> <label class="layui-form-label">验证码</label> <div class="layui-input-inline"><input type="text" name="smscode" id="smscode" lay-verify="smscode" autocomplete="off" class="layui-input" disabled="disabled"></div> <div class="layui-input-inline"> <input type="button" class="layui-btn layui-btn-primary" id="btnSendCode" disabled="disabled" value="获取验证码"> </div> </div> </form> </div>
layui调用
/*layui调用*/ layui.use(['layer', 'form'], function () { $ = layui.jquery; var form = layui.form, layer = layui.layer; //自定义验证规则 form.verify({ mobile: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位,只能是数字。'] }); }); $(function () { var wait = 60; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value = "获取验证码"; wait = 60; } else { o.setAttribute("disabled", true); o.value = "重新发送(" + wait + ")"; wait--; setTimeout(function () { time(o); }, 1000); } } $("#mobile").change(function () { var mobile = $.trim($("#mobile").val()); if (mobile.length == 11) { $("#smscode").attr("disabled", false).css({"background-color": "#fff"}); $("#btnSendCode").attr("disabled", false).removeClass("layui-btn layui-btn-primary").addClass("layui-btn layui-btn-normal"); document.getElementById("btnSendCode").onclick = function () { if (wait != 60) { console.log("请" + wait + "秒后再试!"); return; } if (mobile == '') { console.log("请填写手机号码"); return; } $("#smscode").val(""); time(this); $.getJSON("smsbao.php", {act: 'sms_reg', mobile: mobile}, function (res) { if (res.err == '0') { console.log("发送失败," + res.err, 4000); return; } else { $("#smscode").val(res.code); console.log("验证码已发送,5分钟内有效"); return; } }); } } else { $("#smscode").attr("disabled", true); $("#btnSendCode").attr("disabled", false).removeClass("layui-btn layui-btn-primary").addClass("layui-btn layui-btn-normal"); } }); })
@lockdata.cn