温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

layui发送手机验证码

发布时间:2020-07-11 13:02:28 来源:网络 阅读:3001 作者:IT阿飞 栏目:web开发
 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>登入</title>     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">     <meta name="keywords" content="fly,layui,前端社区">     <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区,致力于为web开发提供强劲动力">     <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css">     <link rel="stylesheet" href="__PUBLIC__/res/css/global.css"> </head> <body> <include  file="Common/head"  /> <div class="main layui-clear">     <div class="fly-panel fly-panel-user" pad20>         <div class="layui-tab layui-tab-brief">             <ul class="layui-tab-title">                 <li class="layui-this">登入</li>                 <li><a href="reg.html">注册</a></li>             </ul>             <div class="layui-form layui-tab-content" id="LAY_ucm" >                 <div class="layui-tab-item layui-show">                     <div class="layui-form layui-form-pane">                         <form method="post" action="{:U('Login/check_login')}">                             <div class="layui-form-item">                                 <label for="L_phone" class="layui-form-label">手机号</label>                                 <div class="layui-input-inline">                                     <input type="text" id="L_phone" name="phone" required lay-verify="phone" autocomplete="off" class="layui-input">                                 </div>                             </div>                             <div class="layui-form-item">                                 <label for="L_vercode" class="layui-form-label">图片验证码</label>                                 <div class="layui-input-inline">                                     <input type="text" id="L_vercode" name="vercode" required lay-verify="required" placeholder="请输入图片的验证码" autocomplete="off" class="layui-input">                                 </div>                                 <div class="layui-form-mid" >                                     <span ><img src="{:U('Common/yzm')}" onclick="this.src='{:U(\'Common/yzm\')}'" alt=""></span>                                 </div>                             </div>                             <div class="layui-form-item">                                 <button type="button" class="layui-btn" id="send_phone" ><span id="send_str">发送手机验证码</span>&nbsp;&nbsp;<span id="p_djs">(<span id="djs">0</span>)</span></button>                                 </span></div>                             <div class="layui-form-item">                                 <label for="L_pass" class="layui-form-label">手机验证码</label>                                 <div class="layui-input-inline">                                     <input type="password" id="L_pass" name="pass" required lay-verify="required" autocomplete="off" class="layui-input">                                 </div>                             </div>                             <div class="layui-form-item">                                 <button class="layui-btn"  lay-filter="*" lay-submit>立即登录</button>                                 <!--<span >-->                   <!--<a href="forget.html">忘记密码?</a>-->                 </span>                             </div>                             <!--<div class="layui-form-item fly-form-app">-->                                 <!--<span>或者使用社交账号登入</span>-->                                 <!--<a href="http://fly.layui.com:8098/app/qq" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-qq" title="QQ登入"></a>-->                                 <!--<a href="http://fly.layui.com:8098/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-weibo" title="微博登入"></a>-->                             <!--</div>-->                         </form>                     </div>                 </div>             </div>         </div>     </div> </div> <include  file="Common/foot"  /> <script>     $ = layui.$;     $("#p_djs").hide();     $('#send_phone').on('click', function(){         $("#send_str").text("已发送手机验证码");         var phone = $('#L_phone').val();         var yzm = $('#L_vercode').val();         if(phone == ''){             layer.msg('手机号不能为空!',{icon:2});             return false;         }         if(yzm == ''){             layer.msg('图形验证码不能为空!',{icon:2});             return false;         }         if($('#djs').text()!=0){             layer.msg('手机验证码已发送!',{icon:2});             return false;         }         $("#djs").text(60);         $("#p_djs").show();         $.post("{:U('Common/checkverify')}",{code:yzm},function(data){             if(data==200){                 $("#p_djs").show();                 var setTime;                 var time=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>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI