元素-UI el-select 验证

Question

我将 Vue 与 Element-Ui 一起使用，我的 <el-select> 元素上的验证触发器出现问题。本质上这就是 HTML 的样子

<el-form-item label="Partner" prop="partner">    
  <el-select class="dialog-select" v-model="form.partner" placeholder="Partner">
      <el-option label="Zone one" value="shanghai"></el-option>
      <el-option label="Zone two" value="beijing"></el-option>
  </el-select>
</el-form-item>

验证元素的 JS 看起来像这样

partner: [ { validator: validateInput, trigger: 'blur' } ]

但是，我的标准 <el-input> 验证被触发了。我已尝试将触发器更改为 input、blur 以及 focus，但这些事件均未触发。我也找不到关于它们是什么类型的触发器的任何文档。

编辑：我已上传 fiddle 问题。验证器将触发 onSubmit，但是一旦规则应该通过也不会清除。

https://jsfiddle.net/k66a1gst/

Answer 1

我找到了这个元素的正确触发器，它是 change 触发器。 change 触发器对于诸如日期之类的事情也将是必需的。但是，当您跳过它时，它不会向您抛出验证错误。

Answer 2

我运行遇到了同样的问题，还发现它似乎并不真正支持 onBlur() ，所以我用以下方法补充了我的 onChange() 验证规则：

<el-form ref="myForm">
    <el-form-item prop="fieldProp">
        <el-select @blur="validateDropdown"></el-select>
    </el-form-item>
</el-form>

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

希望这不是必需的，但它对我有用。希望对某人有所帮助！

元素-UI el-select 验证

Element-UI el-select validation

javascript

validation

element

vue.js

vuejs2