Не удается проверить el-select elementUI

Я пытаюсь создать пользовательскую проверку с помощью 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

   submit() {
            this.validateDropdown(); 
        }

Но ничего не происходит. Любая идея, пожалуйста?


validation vue.js element-ui
person Sihem Hcine    schedule 21.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я рекомендую вам прочитать документ по пользовательскому интерфейсу элемента о (пользовательской) проверке формы: https://element.eleme.io/#/en-US/component/form#custom-validation-rules

В вашем случае вы должны добавить в свою форму реквизиты 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
    }
  });
}
person BTL    schedule 21.04.2020