小编给大家分享一下vue如何实现通过手机发送短信验证码注册功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
效果如下：
代码如下：
template代码：
<el-main>
<el-form
:model="ReginForm"
ref="ReginForm"
:rules="rule"
class="regform"
label-width="0">
<h4 class="login-text">手机注册</h4>
<el-form-item prop="tel">
<el-input
type="text"
v-model.number="ReginForm.tel"
placeholder="手机号码">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="ReginForm.password"
placeholder="密码">
</el-input>
</el-form-item>
<div>
<input class="auth_input" type="text" v-model="verification" placeholder="输入验证码" />
<span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">获取验证码</span>
<span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之后重新发送验证码</span>
</div>
<el-form-item >
<el-button
type="success"
class="submitBtn"
round
@click.native.prevent="submit"
:loading="logining">
注册
</el-button>
<hr>
<p>已经有账号，马上去<span class="to" @click="tologin">登录</span></p>
</el-form-item>
</el-form>
</el-main>
</template>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')
}
}
}
</script>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;
}
</style>vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
看完了这篇文章，相信你对“vue如何实现通过手机发送短信验证码注册功能”有了一定的了解，如果想了解更多相关知识，欢迎关注天达云行业资讯频道，感谢各位的阅读！