el-form-item 手动触发表单验证

使用: formRef.value.validateField('files');

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="附件" prop="files">
      <el-upload
        action="your-upload-endpoint"
        list-type="text"
        :file-list="form.files"
        @change="handleFileChange"
      >
        <el-button type="primary">上传附件</el-button>
      </el-upload>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const formRef = ref(null);
const form = ref({
  files: []
});

const rules = {
  files: [
    { required: true, message: '请上传至少一个附件', trigger: 'change' }
  ]
};

const handleFileChange = (file, fileList) => {
  form.value.files = fileList;
  if (formRef.value) {
    formRef.value.validateField('files');
  }
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单验证成功');
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};
</script>


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容