怎么对表单中的el-upload做el-form 的rules中的require验证,触发时机为blur
时间: 2024-10-13 16:11:30 浏览: 42
在Element UI中,`el-upload` 和 `el-form` 结合使用时,如果你想在用户输入框失去焦点(`blur`)时对上传文件进行有效性验证,你可以这样做:
首先,在你的Vue组件中,你需要创建一个`upload`字段,并在`data`选项中定义,同时给它设置一个默认值如`null`。然后在`el-form`的`rules`对象中添加一条规则,针对`upload`字段,设置`trigger`为`blur`并指定验证条件。
例如:
```javascript
<template>
<el-form ref="form" :model="formData" :rules="fileRules">
<!-- ...表单元素 -->
<el-form-item label="上传文件">
<el-upload
ref="upload"
:action="uploadUrl"
:on-change="handleChange"
:on-error="handleError"
:on-success="handleSuccess"
:before-upload="beforeUpload"
accept="image/*"
@remove="handleRemove"
>
<i v-if="!fileList.length">点击上传</i>
<el-progress :percentage="uploadPercent" v-if="fileList.length"></el-progress>
<el-button size="small" type="primary" disabled="disabled">{{ fileList.length ? '已上传' : '请选择文件' }}</el-button>
</el-upload>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
// ...其他数据,
upload: null,
},
fileRules: {
upload: [{ required: true, message: '请上传文件', trigger: 'blur' }],
},
fileList: [],
uploadUrl: 'your/upload/url',
uploadPercent: 0,
};
},
methods: {
// ...其他处理函数
},
};
</script>
```
在这个例子中,当`upload`字段为空并且失去焦点时,会触发`required`验证,显示相应的错误提示。记得处理好`before-upload`、`success`、`error`等事件,以便控制上传状态和展示进度条。
阅读全文