Vue实现发送短息60秒倒计时

Vue实现注册账号时,发送短信60秒倒计时功能,并进行手机号校验的Demo案例,如果能帮到您,我感到非常荣幸,废话不多说,直接上干货,

首先来一个测试页面,引入Vue.js,及基本格式
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户注册</title>
    <script src="js/vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <label for="">手机号码:</label>
        <input type="text" name="mobile"/>
        <input type="button" value="发送">
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
           
        },
        methods:{
        },
    })
</script>
</body>
</html>
根据需求编写data中的数据
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户注册</title>
    <script src="js/vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <label for="">手机号码:</label>
        <input type="text" name="mobile"/>
        <input type="button" value="发送">
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            // 倒计时周期
            countNum:60,
            // 用于倒计时标记,true-正在倒计时
            countFlag:false,
            // 定时器
            intervalBtn:{},
            btnMsg:"点击发送验证码",
            //手机号码
            mobile:""
        },
        methods:{
        },
    })
</script>
</body>
</html>
编写方法和数据渲染
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户注册</title>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
</head>
<body>
    <div id="app">
        <label for="">手机号码:</label>
        <input type="text" class="txt" name="mobile" v-model="mobile"/>
        <input type="button" :disabled="countFlag" @click="sendMobile" v-model="btnMsg == null ? countNum+'s后重新发送' : btnMsg">
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            // 倒计时周期
            countNum:60,
            // 用于倒计时标记,true-正在倒计时
            countFlag:false,
            // 定时器
            intervalBtn:{},
            //默认按钮的值
            btnMsg:"点击发送验证码",
            //手机号码
            mobile:""
        },
        methods:{
            // 倒计时
            countDown(){
                // 设置btn倒计时时显示的信息
                this.btnMsg = null;
                // 更改btn状态
                this.countFlag =! this.countFlag;
                // 设置倒计时
                this.intervalBtn = setInterval(() => {
                    if(this.countNum <= 0) {
                        // 重置btn提示信息
                        this.btnMsg = "点击发送验证码";
                        // 清除定时器
                        clearInterval(this.intervalBtn)
                        // 更改btn状态
                        this.countFlag =! this.countFlag;
                        // 重置倒计时状态
                        this.countNum = 5;
                    };
                    // 倒计时
                    this.countNum -- ;
                }, 1000);
            },
            sendMobile(){
            	//获取输入手机号码
                let mobile = this.mobile
                //正则校验手机号是否合法
                if(!(/^1(3|4|5|7|8)\d{9}$/.test(mobile))){
                    alert("手机号错误")
                    return
                }
               	//触发定时器方法
                this.countDown()    
            }
        },
    })
</script>
</body>
</html>

如有您有任何疑问,欢迎评论

Logo

前往低代码交流专区

更多推荐