Как я могу проверить смешанные входные данные в пользовательском интерфейсе элемента

#vue.js #element-ui

#vue.js #element-ui

Вопрос:

Как я могу проверить ввод5 и выбрать поля вместе? Я не нашел этого в официальной документации

  <el-form-item prop="input5">
   <el-input class="inline-input" placeholder="Please input" v-model="form.input5" style="width: 300px;">
     <el-select required v-model="form.select" slot="prepend" placeholder="Select">
       <el-option label="Restaurant" value="1"></el-option>
       <el-option label="Order No." value="2"></el-option>
       <el-option label="Tel" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="search" @click=submitForm('form')></el-button>
  </el-input>
</el-form-item>
 

Я знаю, как я могу проверить эти два поля независимо, но как я могу получить проверку для каждого поля в зависимости от значения другого поля? Например, когда выбирается «ресторан», тогда ввод должен быть строкой, но когда это «Номер заказа». это должно быть число?

Ответ №1:

Да, можно написать проверку, которая использует 2 поля:

 <script>
  data() {
    var customValidate= (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please provide value'));
      } else {
        if (this.form.select === "1" amp;amp; !IsNaN(value)) {
          callback(new Error('Please enter a text not a number'));
        }
        callback();
      }
    };
    return {
      form: {
        select: '',
        input5: ''
      },
      rules: {
         input5: [
            { validator: customValidate, trigger: 'blur' }
         ]
      }
    }
  }
</script>