前期回顾

懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用，及其好使的插件，开发懒人必整，就算是自己可以写，一大堆代码，真的要写吗？https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501

先说先验证码思路，其实很简单，

1、前端触发获取验证码,同步显示有效验证倒计时;

2、后台通过代理平台发送验证短信;

解释：你在页面触发验证码请求后，后台接口发送至代理平台，代理平台发送信息到你手机上，验证码回复的信息可以自定义设置，需要在代理验证码平台购买

念及此，写一个，前台很有意思，短短几行代码，实现一个功能，热爱代码永不断，

前台效果：

用例：

<template><div class="login"><el-input v-model="phone" :suffix-icon="icon" class="inp"></el-input><el-button type="primary" v-if="flag" @click="getCode" :disabled="dis">获取验证码</el-button><span v-else>获取验证码还有{{ num }}秒</span></div>
</template><script>
export default {data() {return {phone: "",num: 5,flag: true,//按钮和验证码的切换条件icon: 'el-icon-close',dis: true};},methods: {getCode() {this.flag = falselet timer = null;//每次点击都会先赋值成null，防止用户快速多次点击，造成//定时器队列timer = setInterval(() => {//点击按钮如果num大于等于1就--，if (this.num >= 1) {this.num--;} else {//点击按钮如果没有大于等于1，说明小于1，就恢复成按钮状态clearInterval(timer);this.flag = true;}}, 1000);},phoneReg() {let reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/if (reg.test(this.phone)) {this.icon = 'el-icon-check'this.dis = false} else {this.icon = 'el-icon-close'this.dis = true}}},watch: {phone: {// deep: true,// immediate: true,handler(newVal, oldVal) {// 其实将phoneReg这个函数直接写在这里也可以，// 但是为了结构更加清晰，尽量的将逻辑抽离，这样一眼明了！this.phoneReg()},},},};
</script><style lang="scss" scoped>
.login {padding: 15px;/deep/ .el-input__inner{height: 50px;border-radius: 5px;}/deep/ .el-input{width: 400px;margin: 15px;}/deep/ .el-icon-check{color: green;font-size: 25px;line-height: 50px;}/deep/ .el-icon-close:before {font-size: 25px;color: red;line-height: 50px;}
}
</style>

结语：

祝大家在2022都变得更强

30秒学会 —— 《获取验证码基本操作》相关推荐

小程序激励视频观看超过30秒，获取奖励
小程序激励视频观看超过30秒,获取奖励需求是这样子的,小程序里面插入了video标签,拥有视频功能,用户看视频超过30秒时候,会显示弹框弹出奖励思路: 需求是这样子的,小程序里面插入了video标 ...
使用 JavaScript 基于定时器实现30秒倒计时限制验证码发送
存放于工具 JS 文件中的代码 var clock = '';//定时器对象,用于页面30秒倒计时效果 var nums = 30; var validateCodeButton; //基于定时器实现 ...
震惊了！每30秒学会一个Python小技巧，Github星数4600+
点击上方"码农突围",马上关注,每天上午8:50准时推送真爱,请置顶或星标作者:xiaoyu,数据爱好者 Python数据科学出品很多学习Python的朋友在项目实战中会遇到 ...
每30秒学会一个Python小技巧，GitHub星数4600+
(图片付费下载自视觉中国) 作者 | xiaoyu,数据爱好者来源 | Python数据科学(ID:PyDataScience) 很多学习Python的朋友在项目实战中会遇到不少功能实现上的问题,有 ...
震惊了！每30秒学会一个Python小技巧，Github星数6000+
点击上方"Python数据科学",星标公众号重磅干货,第一时间送达 ☞500g+超全学习资源免费领取,干货来袭! 作者:xiaoyu,数据爱好者 Python数据科学出品很多学 ...
python打乱list_超实用！每 30 秒学会一个 Python 小技巧，GitHub 标星 5300！
公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 很多学习 Python 的朋友在项目实战中会遇到不少功能实现上的问题,有些问 ...
python unique函数_每30秒学会一个Python小技巧，GitHub星数4600+
作者 | xiaoyu,数据爱好者来源 | Python数据科学(ID:PyDataScience)很多学习Python的朋友在项目实战中会遇到不少功能实现上的问题,有些问题并不是很难的问题,或者已经 ...
【编程导航】国外大神总结的实用代码，30 秒学会！
开发时常用的优秀短代码片段,都在这里了. 编程导航致力于推荐优质编程资源
如何在微信公众号推文加入Word文档、Excel表格，超实用30秒学会
大家都知道,当我们订阅了公众号(关注公众号),公众号的运营者就能给我们推送最新发布的公众号文章,我们也能在订阅号栏收到最新的文章.有一些微信公众号推文中会有附件,如word文档.excel表格,比如政 ...

30秒学会 —— 《获取验证码基本操作》

前台效果：

用例：

结语：

30秒学会 —— 《获取验证码基本操作》相关推荐

最新文章

热门文章