vue+vant 实现手机号获取验证码页面

html

         <van-field label="手机号"v-model="phone"centerrequiredplaceholder="请输入手机号":border="true" /><van-field v-model="sms"centerrequiredclearablelabel="验证码"placeholder="请输入验证码":border="false"use-button-slot><van-button slot="button"size="small"type="primary"@click="gainCode">{{time}}</van-button></van-field>

js

 data() {return {isClick: true,time: '获取验证码',phone: '',sms: '',}},methods:{// 获取验证码async gainCode() {if (this.isClick) {if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)) {const res = await sendVerifyCode({ phone: this.phone })  // 获取验证码接口this.isClick = falselet s = 60this.time = s + 's'let interval = setInterval(() => {s--this.time = s + 's'if (s < 0) {this.time = '重新获取'this.isClick = trueclearInterval(interval)}}, 1000)} else {Toast.fail('请输入正确的手机号码')}}},}

效果

vue+vant 实现手机号获取验证码页面相关推荐

输入手机号获取验证码的注册页面，说出测试过程
考察的点有两个,一个是对手机号格式和验证码格式的验证,一个是对验证码获取功能的验证. 基本原理:验证码1分钟内只能发一次,有效期10分钟.验证码是后台Java代码生成的,然后验证码生成时间和此验证码会 ...
手机号获取验证码、验证验证码是否正确
html: <div class="left_box lf"> <div class="menu"> <span style=&q ...
手机号获取验证码：django版本2.2/ js
(venv)虚拟环境安装django版本2.2.12 pip install django==2.2.12 -i https://pypi.tuna.tsinghua.edu.cn/simple/ ( ...
短信验证（手机号注册，绑定手机号获取验证码）
今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册按钮 ...
Android短信验证（手机号注册，绑定手机号获取验证码）实例
今天写一个常见的功能--手机app中注册或绑定手机号的获取验证码的功能.也就是短信验证功能具体效果就是,你在注册界面填写手机号,点击获取验证码按钮,---然后会收到验证短信,填入验证码后点击注册 ...
最完整手机号获取验证码登陆注册逻辑
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/qq_37523448/article/ ...
html+js手机号获取验证码功能实现
1.找可靠的平台获得接口,我选择的是网易易盾(以下基于该平台实现),有100次的验证码发送机会. 2.找到平台,https://dun.163.com/ 3.根据官方的示例代码,调试运行通过之后,更改 ...
登录——通过手机号获取验证码（阿里云短信服务）
vue+elementui 实现点击验证码出现60秒倒计时
vue+elementui 实现点击验证码出现60秒倒计时 div部分 <div class="verCode@click="getVerCode":disable ...

vue+vant 实现手机号获取验证码页面

vue+vant 实现手机号获取验证码页面

html

js

效果

vue+vant 实现手机号获取验证码页面相关推荐

最新文章

热门文章

vue+vant 实现手机号 获取验证码页面

vue+vant 实现手机号 获取验证码页面

html

js

效果

vue+vant 实现手机号 获取验证码页面相关推荐

最新文章

热门文章

vue+vant 实现手机号获取验证码页面

vue+vant 实现手机号获取验证码页面

vue+vant 实现手机号获取验证码页面相关推荐