Vue实现发送短息60秒倒计时
原文：https://blog.csdn.net/weixin_43201015/article/details/84405352
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
根据需求编写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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
编写方法和数据渲染
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
如有您有任何疑问，欢迎评论
————————————————
版权声明：本文为CSDN博主「Do Re Mi」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43201015/article/details/84405352
