无法验证el select elementUI

Question

我正试图用el select这样的方式创建自定义验证：

在我的模板中：

<el-form ref="form" >
<el-form-item   prop="fieldProp" >
<el-select class="dialog-select" v-model="informationForm.age"  @change="validateDropdown" 
placeholder="age" style="width: 100%"  >
<el-option label="11" value="1"></el-option>
<el-option label="22" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>

在数据中：

data() {
let  checkCurrency = (rule, value, callback) => {
if (!value) {
return callback(new Error('Please input the age'));
}
};
return {
fieldProp: [
{ validator: checkCurrency, trigger: 'change' }
]
}
} 

在我的方法中：

validateDropdown() {
this.$refs.form.validateField('fieldProp')
}

并调用验证方法：在提交中

submit() {
this.validateDropdown(); 
}

但什么也没发生。你知道吗？

Answer 1

我鼓励您阅读关于(自定义(表单验证的元素ui文档：https://element.eleme.io/#/en-US/组件/表单#自定义验证规则

在您的情况下，您应该将model和rules道具添加到表单中，然后使用正确的validate方法。

示例代码：

<el-form ref="form" :model="informationForm" :rules="rules">
<el-form-item prop="age" >
<el-select class="dialog-select" v-model="informationForm.age" placeholder="age" style="width: 100%">
<el-option label="11" value="1"></el-option>
<el-option label="22" value="2"></el-option>
</el-select>
</el-form-item>
</el-form>

data() {
let  checkCurrency = (rule, value, callback) => {
if (!value) {
return callback(new Error('Please input the age'));
}
};
return {
rules: {
fieldProp: [
{ required: true, validator: checkCurrency, trigger: 'change' }
]
}
}
}

不需要validateDropdown，因为您的字段已经在每个change上进行了验证，这要归功于：trigger: 'change'。

submit() {
this.$refs.form.validate((valid) => {
if (valid) {
// todo
} else {
// todo
}
});
}