Element UI 表单验证：trigger 参数详解

在 Element UI 表单验证中，trigger 参数用于指定验证规则触发的时机。它可以取以下几种值：

'blur'：失去焦点时触发验证
'change'：值改变时触发验证
'input'：输入时触发验证
'submit'：表单提交时触发验证

例如，以下代码示例演示了如何使用 trigger 参数来指定验证规则的触发时机：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="图片" prop="imgpath" :rules="[{ required: true, message: '图片不能为空', trigger: 'blur' }]">
      <el-upload
        action="//jsonplaceholder.typicode.com/posts/"  
        :on-preview="handlePreview"  
        :on-remove="handleRemove"  
        :before-upload="beforeUpload">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="default" class="el-upload-default">
          <i class="el-icon-upload"></i>
          <div class="el-upload-text">点击上传</div>
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        imgpath: ''
      },
      rules: {
        imgpath: [
          { required: true, message: '图片不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

根据需要选择合适的 trigger 值来触发验证。

注意：

您可以根据实际情况选择合适的 trigger 值。
如果您需要在多个时机触发验证，可以将多个 trigger 值以数组的形式传入 rules 对象。
例如：[{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }]

希望本文能帮助您更好地理解 Element UI 表单验证中的 trigger 参数。