小编给大家分享一下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<=0){
this.sendAuthCode = true;
clearInterval(auth_timetimer);
}
}, 1000);
},
// 封装注册发送请求方法
thisAjax(){
const passwordData=this.ReginForm.password;
const phoneData =this.ReginForm.tel;
const mCodeData=this.verification;
// 手机注册
//emulateJSON:true设置后post可跨域
const url = " 填接口"
this.$http.post(url,{填传入的参数},{emulateJSON:true}).then(function (response)
{
//登录后跳转的页面
this.$router.push('/');
}, function (error) {
alert("请求失败",error);
})
},
// ...
submit () {
this.$refs.ReginForm.validate(valid => {
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是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
看完了这篇文章，相信你对“vue如何实现通过手机发送短信验证码注册功能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
网站标题：vue如何实现通过手机发送短信验证码注册功能
标题来源：
http://bjjierui.cn/article/igdihg.html
