正則校驗手機號碼並獲取手機驗證碼倒計時的實例

時間 2019-12-09

原文原文鏈接

最近在作一個微信外賣的商城，裏面涉及到了了一個登陸界面。對首次使用的朋友要獲取手機驗證碼來登錄咱們的外賣平臺，話很少說直接看demo。javascript

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></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></form><script src="js/jquery.min.js"></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(checkPhone()){            //產生驗證碼            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 + "秒內輸入六位驗證碼");        }    }    //正則校驗    function checkPhone(){        var phone = document.getElementById('phone').value;        if(!(/^1[3|4|5|7|8]\d{9}$/.test(phone))){            alert("請仔細覈對本身的號碼哦");            return false;        }    }</script></body></html>有須要的的朋友能夠自取，css樣式美化就本身去添加。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。