element-ui短信倒计时前进行字段验证

 

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);
    }
});

}