发送验证码倒计时
html
<el-form class="form" :model="form" labeal-position="left">
<el-form-item label="姓名">
<el-input v-model="form.Name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.Phone" placeholder="请输入电话">
</el-input>
</el-form-item>
<el-form-item label="验证码">
<el-input v-model="form.Code" placeholder="请输入验证码" @blur="blurcheck">
<el-button slot="suffix" size="mini" style="border: none;" @click="sendcode"
:disabled="!show">
获取验证码
<span v-show="!show" class="count">({{count}}s)</span>
</el-button>
</el-input>
</el-form-item>
</el-form>
js
export default{
const TIME_COUNT = 30; //倒计时时间
data(){
return{
timer:null,//计时器
code:"",//验证码
count:"",//倒计时
show:true,//控制按钮
form:{
Name:"",
Phone:"",
Code:""
}
},
methods:{
//获得六位数验证码
generatedCode() {
const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
let code = ''
for (let i = 0; i < 6; i++) {
let index = Math.floor(Math.random() * 10)
code += random[index]
}
console.log(code)
this.code = code
return code
},
//发送验证码
sendcode() {
if (!this.timer) {
this.count = TIME_COUNT
this.show = false
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--
} else {
this.show = true
clearInterval(this.timer) // 清除定时器
this.timer = null
}
}, 1000)
}
//这里写请求
axios.post(url参数之类的).then(res=>{
})
},
//在输入完成后可以判断一下
blurcheck() {
if (this.form.Code.length < 6 ) {
return false
} else {
if (this.code != this.form.Code && this.form.Code!= '') {
this.$message.error("验证码错误")
return false
}
}
},
}
}
效果