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

Vue实现发送短息60秒倒计时Vue实现注册账号时，发送短信60秒倒计时功能，并进行手机号校验的Demo案例，如果能帮到您，我感到非常荣幸，废话不多说，直接上干货，首先来一个测试页面，引入Vue.js，及基本格式<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">&am

Do Re Mi

4013人浏览 · 2018-11-24 00:30:56

Do Re Mi · 2018-11-24 00:30:56 发布

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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^