利用emement表单验证规则,验证视频不能为空
时间: 2024-01-18 11:02:29 浏览: 117
Javascript的表单与验证-非空验证
好的,利用 `element-ui` 中的表单验证规则,可以通过 `rules` 属性来指定验证规则。
要验证视频是否为空,可以使用 `required` 规则,该规则可以用于验证是否必填。同时,由于视频是一个文件类型的输入框,需要使用 `type` 规则来指定其类型为文件。
以下是一个示例代码:
```vue
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="视频">
<el-upload
class="upload-demo"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传mp4格式的文件</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
video: null
},
rules: {
video: [
{ required: true, message: '请上传视频文件', trigger: 'blur' },
{ type: 'file', message: '请上传视频文件', trigger: 'blur' }
]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 验证通过,执行表单提交操作
} else {
// 验证不通过,提示错误信息
}
})
},
handleSuccess(res, file) {
// 上传成功回调函数
this.form.video = res.url
},
beforeUpload(file) {
// 上传前的处理函数,可以在这里验证文件类型、大小等信息
const isMp4 = file.type === 'video/mp4'
if (!isMp4) {
this.$message.error('只能上传mp4格式的文件')
}
return isMp4
}
}
}
</script>
```
在这个示例中,我们使用了 `el-upload` 组件来实现文件上传,利用 `before-upload` 属性来指定上传前的处理函数,对文件类型进行验证。在 `rules` 属性中,我们使用了 `required` 规则和 `type` 规则来验证视频是否为空和是否为文件类型。最后,在提交表单时,我们使用了 `this.$refs.form.validate` 方法来进行表单验证。
阅读全文