傳送郵箱驗證碼
阿新 • • 發佈：2018-11-08
傳送郵箱驗證碼與傳送簡訊驗證碼很像，只是校驗的方法不同。
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../../layui/css/layui.css" /> </head> <body> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">郵箱</label> <div class="layui-input-inline"> <input type="text" name="email" lay-verify="email" id="email" placeholder="請輸入郵箱" 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="emailcode" lay-verify="required" placeholder="請輸入郵箱驗證碼" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <input id="send-email-code" style="width: 120px;height: 39px;text-align: center;background-color: white;border: 1px solid #E2E2E2" name="send-email-code" type="button" value="獲取驗證碼" /> </div> </div> <div class="layui-form-item"> <span id="emailTip"></span> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" id="submit-email-code" >立即提交</button> </div> </div> </form> <script type="text/javascript" src="../../layui/layui.js" ></script> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../../js/user/emailcodeVerify.js" ></script> <script> layui.use(['form','jquery'],function(){ var form = layui.form, $ = layui.$; }); </script> </body> </html>
js
var InterValObj; //timer變數，控制時間 var count = 60; //間隔函式，1秒執行 var curCount;//當前剩餘秒數 //向郵箱傳送驗證碼 $('#send-email-code').click(function(){ //校驗郵箱 var email = $("#email").val(); if(!email.match(/^[a-z0-9]+([._]*[a-z0-9]+)*@[a-z0-9]+([_.][a-z0-9]+)+$/gi)){ alert("郵箱格式不正確！請重新輸入"); return false; } // 設定button效果，開始計時 curCount = count; document.getElementById("send-email-code").setAttribute("disabled","true" );//設定按鈕為禁用狀態 document.getElementById("send-email-code").value=curCount + "秒後重獲";//更改按鈕文字 InterValObj = window.setInterval(SetRemainTime, 1000); // 啟動計時器timer處理函式，1秒執行一次 //請求傳送驗證碼 // $.ajax({ // type:"get", // url:"", // async:true, // data:{"email":email}, // success:function(obj){ // if(){//驗證碼傳送成功 // $('#emailTip').html("<font color='#339933'>√ 郵箱驗證碼已發到您的手機,請查收</font>"); // }else if(){ // $("#emailTip").html("<font color='red'>× 簡訊驗證碼傳送失敗，請重新發送</font>"); // } // }, // dataType:"json" // }); }); //timer處理函式 function SetRemainTime() { if (curCount == 0) {//超時重新獲取驗證碼 window.clearInterval(InterValObj);// 停止計時器 document.getElementById("send-email-code").removeAttribute("disabled");//移除禁用狀態改為可用 document.getElementById("send-email-code").value="重獲驗證碼"; }else { curCount--; document.getElementById("send-email-code").value=curCount + "秒後重獲"; } }
初始介面：
不填寫郵箱直接點選提交：
不填寫郵箱直接獲取驗證碼：
不填寫驗證碼直接點選提交：
點選獲取驗證碼：
