一個手機發送驗證碼的demo

時間 2019-11-29

標籤一個手機發送驗證碼 demo 简体版

原文原文鏈接

公司要作手機驗證碼，想起我之前作的一個demo 就直接拿過來用了，倒計時是參考的網上的資料 javascript

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="x-dns-prefetch-control" content="on" />

<script type="text/javascript" src="/jquery-1.7.1.min.js"></script>
<label><input id="mobile" type="tel" placeholder="請輸入手機號"></label>

<input id="getsms" type="button" value="獲取驗證碼" >    
<script>
$("#getsms").click(function(){
    getCode();
    var get_code=$("#getsms");
    time(get_code);
})
    

// 獲取驗證碼
    function getCode(){
        var mobile = $("#mobile").val();
        
        var get_code_url="****.php";
        $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            url: get_code_url,
            data: {"mobile":mobile},
            dataType: "json",
            complete: function () { },
            success: function (result) {
                //console.debug(result);
                alert(result);
            
            },
            error: function (result, status) { 
                
            }
        });
    }
    //驗證碼倒計時
    var wait=60;//時間 
    function time(o,p) {//o爲按鈕的對象，p爲可選，這裏是60秒事後，提示文字的改變 
    if (wait == 0) { 
    o.removeAttr("disabled"); 
    o.val("獲取驗證碼");//改變按鈕中value的值 
    p.html("若是您在1分鐘內沒有收到驗證碼，請檢查您填寫的手機號碼是否正確或從新發送"); 
    wait = 60; 
    } else { 
    o.attr("disabled", true);//倒計時過程當中禁止點擊按鈕 
    o.val("倒數" + wait + "秒");//改變按鈕中value的值 
    wait--; 
    setTimeout(function() { 
    time(o,p);//循環調用 
    }, 
    1000) 
    } 
    } 
</script>