效果如下：
代码如下：
template代码：
rush:js;">
注册
注册
获取验证码
秒之后重新发送验证码
<p>已经有账号，马上去<span class="to" @click="tologin"><a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a></span></p>script 代码如下
{
if (value === '') {
return callback(new Error('密码是必须的'))
} else {
return callback()
}
}
let telCheck = (rule,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,}
}
},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代码如下：
rush:js;">
.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 实现通过手机发送验证码注册功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
