layui发送手机验证码

2025-01-01 技术教程

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>登入</title><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1"><metaname="keywords"content="fly,layui,前端社区"><metaname="description"content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力"><linkrel="stylesheet"href="__PUBLIC__/layui/css/layui.css"><linkrel="stylesheet"href="__PUBLIC__/res/css/global.css"></head><body><includefile="Common/head"/><divclass="mainlayui-clear"><divclass="fly-panelfly-panel-user"pad20><divclass="layui-tablayui-tab-brief"><ulclass="layui-tab-title"><liclass="layui-this">登入</li><li><ahref="reg.html">注册</a></li></ul><divclass="layui-formlayui-tab-content"id="LAY_ucm"><divclass="layui-tab-itemlayui-show"><divclass="layui-formlayui-form-pane"><formmethod="post"action="{:U('Login/check_login')}"><divclass="layui-form-item"><labelfor="L_phone"class="layui-form-label">手机号</label><divclass="layui-input-inline"><inputtype="text"id="L_phone"name="phone"requiredlay-verify="phone"autocomplete="off"class="layui-input"></div></div><divclass="layui-form-item"><labelfor="L_vercode"class="layui-form-label">图片验证码</label><divclass="layui-input-inline"><inputtype="text"id="L_vercode"name="vercode"requiredlay-verify="required"placeholder="请输入图片的验证码"autocomplete="off"class="layui-input"></div><divclass="layui-form-mid"><span><imgsrc="{:U('Common/yzm')}"onclick="this.src='{:U(\'Common/yzm\')}'"alt=""></span></div></div><divclass="layui-form-item"><buttontype="button"class="layui-btn"id="send_phone"><spanid="send_str">发送手机验证码</span>  <spanid="p_djs">(<spanid="djs">0</span>)</span></button></span></div><divclass="layui-form-item"><labelfor="L_pass"class="layui-form-label">手机验证码</label><divclass="layui-input-inline"><inputtype="password"id="L_pass"name="pass"requiredlay-verify="required"autocomplete="off"class="layui-input"></div></div><divclass="layui-form-item"><buttonclass="layui-btn"lay-filter="*"lay-submit>立即登录</button></span></div></form></div></div></div></div></div></div><includefile="Common/foot"/><script>$=layui.$;$("#p_djs").hide();$('#send_phone').on('click',function(){$("#send_str").text("已发送手机验证码");varphone=$('#L_phone').val();varyzm=$('#L_vercode').val();if(phone==''){layer.msg('手机号不能为空！',{icon:2});returnfalse;}if(yzm==''){layer.msg('图形验证码不能为空！',{icon:2});returnfalse;}if($('#djs').text()!=0){layer.msg('手机验证码已发送！',{icon:2});returnfalse;}$("#djs").text(60);$("#p_djs").show();$.post("{:U('Common/checkverify')}",{code:yzm},function(data){if(data==200){$("#p_djs").show();varsetTime;vartime=parseInt($("#djs").text());setTime=setInterval(function(){if(time<=0){$("#send_str").text("重新发送手机验证码");$("#djs").text(0);$("#p_djs").hide();clearInterval(setTime);return;}time--;$("#djs").text(time);},1000);}else{layer.msg('图形验证码不正确！',{icon:2});$("#p_djs").hide();$("#djs").text(0);$("#send_str").text("重新发送手机验证码");}});});</script></body></html>