今天在做验证码功能需求的时候接触到了Vue中的 watch监听方法,它可以用来监听vue实例上的数据变动。
需求场景:
1.一开始‘’获取验证码‘’按钮默认为禁用状态,当用户输入了正确的手机号码格式后,按钮恢复可用状态。
2.点击获取验证码按钮之后,按钮中文本变为60s的倒计时,同时手机号码输入框与按钮为禁用状态,当倒计时结束后恢复可用状态。
需求1思路:
1.首先先给手机号码输入框telphone设定校验规则
2.绑定按钮的disabled
3.设定watch监听,deep:true 设置深度监听 当telphone值发生变化时触发handler方法
注意:这里的function不能写成箭头函数,不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch
handler函数中的意思就是每次telphone中数值发生变化时,都对其进行格式校验一次,当格式正确是,按钮恢复使用,非常好理解。
需求2思路:
当用户点击发送验证码按钮时,变更按钮中的文本并同时执行一个倒计时方法。
目的是为了防止用户请求次数过多,设定一分钟只能请求一次验证码。
当倒计时结束,按钮文本被换回‘获取验证码’ 并且手机号码输入框与获取验证码按钮恢复使用。
源码:
<template>
<div>
<el-form :model="user" :rules="rules" ref="user">
<el-form-item prop="telphone">
<el-input placeholder="请输入手机号码" v-model="user.telphone" :disabled="teldisabled">
</el-input>
</el-form-item>
<el-form-item prop="yzm">
<el-row :gutter="5">
<el-col :span="16">
<el-input placeholder="验证码" v-model="user.yzm">
</el-input>
</el-col>
<el-col :span="7">
<el-button @click="code()" :disabled="disabled">{{btnMessage}}</el-button>
</el-col>
<el-col :span="1"></el-col>
</el-row>
</el-form-item>
<el-form-item prop="password">
<el-input placeholder="请输入登录密码(最少六位,字母、数字)" show-password>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%">同意条款并注册</el-button>
</el-form-item>
<el-row style="font-size:12px;text-align:center">
阅读<a href="#">《注册协议》</a>和<a href="#">《隐私条款》</a>
</el-row>
</el-form>
</div>
</template>
<script>
//深度监听 输入完手机号码 校验正确 获取验证码按钮恢复正常
export default {
data(){
//自定义校验规则 正则表达式校验
//手机格式
let validateTelphone = /^1[34578]\d{9}$/;
let isTelphone = (rule,value,callback) =>{
if(!validateTelphone.test(value)){
return callback(new Error('手机格式不正确!'))
}else{
callback()
}
}
return{
user:{
telphone:'',
password:'',
yzm:''
},
//按钮文本
btnMessage:'获取验证码',
//获取验证码按钮默认禁用
disabled:true,
teldisabled:false,
rules:{
telphone:[
{required:true,message:'请输入手机号码',trigger:'blur'},
{validator:isTelphone}
],
yzm:[
{required:true,message:'请输入验证码',trigger:'blur'},
{min:6,max:6,message:'验证码为六位数字',trigger:'blur'}
]
}
}
},
watch:{
'user.telphone':{
//deep:true 设置深度监听 当telphone值发生变化时触发handler方法
deep:true,
//这里的function不能写成箭头函数,不然this将不在此组件内 https://cn.vuejs.org/v2/api/#watch
handler:function(newVal,oldVal){
console.log(newVal);
//取newVal实时校验
this.$refs['user'].validateField('telphone',(error)=>{
if(!error){
this.disabled = false;
}else{
this.disabled = true;
}
})
}
}
},
methods:{
// 模拟发送验证码接受验证码
code(){
this.$axios.post('/api/user/code',this.user).then(res=>{
console.log(res.data);
//开始倒计时60s
this.btnMessage = 60;
this.disabled = true;
this.teldisabled = true;
this.time();
})
},
time(){
if(this.btnMessage == 0){
this.disabled = false;
this.teldisabled = false;
this.btnMessage = '获取验证码'
}else{
this.btnMessage--;
setTimeout(() => {
this.time()
}, 1000);
}
}
}
}
</script>
感觉自己写的代码存在一定耦合,若前辈们有更优雅的方法欢迎分享~~!