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

posted @ 2019-10-18 16:43  鳳舞九天  阅读(2716)  评论(0编辑  收藏  举报