原文：https://blog.csdn.net/weixin_43201015/article/details/84405352

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

首先来一个测试页面，引入Vue.js，及基本格式

用户注册

new Vue({

el:"#app",

data:{

},

methods:{

},

})

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中的数据

用户注册

new Vue({

el:"#app",

data:{

// 倒计时周期

countNum:60,

// 用于倒计时标记，true-正在倒计时

countFlag:false,

// 定时器

intervalBtn:{},

btnMsg:"点击发送验证码",

//手机号码

mobile:""

},

methods:{

},

})

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

编写方法和数据渲染

用户注册

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()

}

},

})

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