vue 实现通过手机发送短信验证码注册功能

秒之后重新发送验证码

---

已经有账号，马上去

{ 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') } } }