前端 js 發送驗證碼

時間 2019-12-09

原文原文鏈接

1. 代碼以下：javascript

<html>  
<head>  
<meta charset="utf-8">
<title></title>  
<script src="jquery.min.js" type="text/javascript"></script>  
<script type="text/javascript">  
/*-------------------------------------------*/  
var InterValObj; //timer變量，控制時間  
var count = 120; //間隔函數，1秒執行  
var curCount;//當前剩餘秒數  
var code = ""; //驗證碼  
var codeLength = 6;//驗證碼長度  
function sendMessage() {  
    curCount = count;  
    var phone=$("#phone").val();//手機號碼  
    if(phone != ""){  
        //產生驗證碼  
        for (var i = 0; i < codeLength; i++) {  
            code += parseInt(Math.random() * 9).toString();  
        }  
        //設置button效果，開始計時  
        $("#btnSendCode").attr("disabled", "true");  
        $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");  
        InterValObj = window.setInterval(SetRemainTime, 1000); //啓動計時器，1秒執行一次  
    //向後臺發送處理數據  
        $.ajax({  
            type: "POST", //用POST方式傳輸  
            dataType: "text", //數據格式:JSON  
            url: 'Login.ashx', //目標地址  
            data: "phone=" + phone + "&code=" + code,  
            error: function (XMLHttpRequest, textStatus, errorThrown) { },  
            success: function (msg){ }  
        });  
    }else{  
        alert("手機號碼不能爲空！");  
    }  
}  
//timer處理函數  
function SetRemainTime() {  
    if (curCount == 0) {                  
        window.clearInterval(InterValObj);//中止計時器  
        $("#btnSendCode").removeAttr("disabled");//啓用按鈕  
        $("#btnSendCode").val("從新發送驗證碼");  
        code = ""; //清除驗證碼。若是不清除，過期間後，輸入收到的驗證碼依然有效      
    }  
    else {  
        curCount--;  
        $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");  
    }  
}  
</script>  
</head>  
<body>      
<form>  
    <div>  
        <font color="red">*</font>手機號碼：  
    </div>  
    <div>  
        <input type="text" id="phone" name="phone"/>  
    </div>  
    <div>  
        <font color="red">*</font>驗證碼：  
    </div>  
    <div>  
        <input type="text" id="checkCode" name="checkCode" size="6"/>  
        <input id="btnSendCode" type="button" value="發送驗證碼" onclick="sendMessage()" />  
    </div>  
    <div>
        <input type="submit" value="登錄"/>
    </div>
</form>  
</body>  
</html>