HTML部分：
<el-form-item label="手机号:" prop="phone">
<el-input v-model.number="loginForm.phone" >{{loginForm.phone}}</el-input>
<el-button class="validateCode" @click="sendMsg" type="primary" :disabled="isDisabled">{{buttonName}}</el-button>
</el-form-item>
data()部分：
data() {
// 验证手机号
var CheckTel = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入手机号码'));
} else if (!Number.isInteger(value)) {
callback(new Error('手机号码必须是数字'));
} else if (value.toString().length != 11) {
callback(new Error('手机号码必须是11位'));
} else {
callback();
}
};
return {
disabled: true,
buttonName: "发送短信",
isDisabled: false,
time: 10,
loginForm: {
phone: '',
validateCode: '',
},
rules: {
phone: [{
required: true,
validator: CheckTel,
trigger: 'blur'
}],
validateCode: [{
required: true,
message: '验证码不能为空',
trigger: 'blur'
}],
},
}
},
methods部分：
sendMsg() {
// alert(this.rules.phone);
this.$refs.loginForm.validateField('phone',valid=>{
if (valid!=='') {
this.rules.phone;
}else {
let me = this;
me.isDisabled = true;
let interval = window.setInterval(function () {
me.buttonName = me.time + '后重新发送';
--me.time;
if (me.time < 0) {
me.buttonName = "重新发送";
me.time = 10;
me.isDisabled = false;
window.clearInterval(interval);
}
}, 1000);
}
});
}
