如何在 Element UI 中验证混合输入答案

【问题标题】：How can I validate mixed inputs in Element UI如何在 Element UI 中验证混合输入
【发布时间】：2020-12-04 10:47:43
【问题描述】：

如何验证 input5 并同时选择字段？我在官方文档中没有找到这个

 <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>

我知道如何独立验证这两个字段，但是如何让每个字段的验证取决于另一个字段的值？就像选择是“餐馆”时，输入应该是一个字符串，但是当它是“订单号”时应该是数字吧？

【问题讨论】：

标签： vue.js element-ui

【解决方案1】：

是的，可以编写使用 2 个字段的验证：

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

【讨论】：