Element表单如何校验文件是否上传 |
您所在的位置：网站首页 › elform封装表单验证 › Element表单如何校验文件是否上传 |
Element表单如何校验文件是否上传
|
使用element校验上传文件的时候会出现文件已经上传成功，但是表单校验依旧未通过，如下，点击立即创建依旧提示请上传。
需要在文件上传成功的钩子函数手动添加文件并手动执行校验 html如下： 点击上传 只能上传jpg/png文件，且不超过500kb 立即创建 重置js代码如下： new Vue({ el: '#page', data: function () { return { ruleForm: { fileList: [] }, rules: { fileList: [{ message: '请上传', trigger: 'change', required: true }], } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, // 上传成功钩子函数 upSuccess(response, file, fileList) { this.ruleForm.fileList.push(file) this.$refs.ruleForm.validateField('fileList') } } })在上传成功的钩子函数需要做两个操作： 1、手动添加上传文件的对象到绑定的数组之中。 2、手动执行表单指定字段的校验
触发对整个表单的验证：this.$refs.ruleForm.validate(); 触发对表单部分字段的验证：this.$refs.ruleForm.validateField("字段名"); |
【本文地址】
今日新闻 |
推荐新闻 |