这次给大家带来怎样操作vue实现通过手机发送短信验证码，操作vue实现通过手机发送短信验证码的注意事项有哪些，下面就是实战案例，一起来看一下。
效果如下：
代码如下：
template代码：
手机注册
获取验证码 {{auth_time}} 秒之后重新发送验证码
注册
已经有账号，马上去登录
登录后复制
script 代码如下
export default { data () { let confirmpasswordCheck = (rule, value, callback) => { if (value === '') { return callback(new Error('密码是必须的')) } else { return callback() } } let telCheck = (rule, value, callback) => { if (value === '') { return callback(new Error('电话号码是必须的')) } else if (!Number.isInteger(value)) { return callback(new Error('电话号码必须是数字')) } else if (value.toString().length !== 11) { return callback(new Error('电话号码必须是11位数字')) } else { callback() } } return { ReginForm: { password: '', tel: '', }, logining: false, sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮'还是‘倒计时' */ auth_time: 0, /*倒计时 计数器*/ verification:"",//绑定输入验证码框框 rule: { password: [ { required: true, message: '密码是必须的！', trigger: 'blur' } ], tel: [ { required: true, validator: telCheck, trigger: 'blur' } ], } } }, methods: { // 验证 getAuthCode:function () { const verification =this.ReginForm.tel; const url = " " console.log("url",url); this.$http.get(url).then(function (response) { console.log("请求成功",response) }, function (error) { console.log("请求失败",error); }) this.sendAuthCode = false; //设置倒计时秒 this.auth_time = 10; var auth_timetimer = setInterval(()=>{ this.auth_time--; if(this.auth_time { if (valid) { this.logining = true this. thisAjax(); console.log('开始写入后台数据！') } else { console.log('submit err') } }) }, reset () { this.$refs.ReginForm.resetFields() }, tologin () {//已经注册过跳转到登入界面 this.$router.push('/phoneLogin') } }}
登录后复制
style代码如下：
.regform { margin: 20px auto; width: 310px; background: #fff; box-shadow: 0 0 10px #B4BCCC; padding: 30px 30px 0 30px; border-radius: 25px; }.submitBtn { width: 65%;}.to { color: #FA5555; cursor: pointer;}.auth_input{ width:140px; height:38px; margin-bottom:20px; border:1px solid #DCDFE6; /* color:red; */ padding-left:10px; border-radius: 8%;}.regform[data-v-92def6b0]{ width:370px; min-height: 440px;}.login-text{ text-align: center; margin-bottom:20px;}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
怎样使用Vue实现倒计时按钮
怎样利用Vue写一个双向数据绑定
怎样使用Vue实现proxy代理
以上就是怎样操作vue实现通过手机发送短信验证码的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2750461.html
