Vue使用vee-validate编程式校验文件类型时validate方法恒返回true如何解决

你遇到的this.$refs.csr.validate()始终返回true的问题，主要来自两个常见的配置/调用错误：

1. 仅导入了ext规则但未完成注册，规则未生效导致所有校验直接通过
2. 校验逻辑和文件选择逻辑拆分到了@change和@blur两个事件中，触发blur事件时vee-validate未同步到最新选择的文件值，校验的是旧值所以结果异常

步骤1：完成规则注册 #

导入规则后必须调用extend方法完成注册，规则才会生效：

import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required, ext } from 'vee-validate/dist/rules'
import FormErrorSpan from '@/components/Base/templates/forms/FormErrorSpan'

// 注册用到的所有规则，缺少这步规则不会生效
extend('required', required)
extend('ext', ext)

步骤2：合并事件逻辑 #

不要将校验和业务逻辑拆分到两个事件触发，统一在文件选择的@change事件中按「先校验、校验通过再执行业务逻辑」的顺序执行：
修改模板中的文件输入框绑定：

<input
  id="csr"
  required
  type="file"
  @change="handleCsrChange($event)"
>

新增事件处理方法：

methods: {
  async handleCsrChange(event) {
    // 先执行校验，拿到最新的校验结果
    const isValid = await this.$refs.csr.validate()
    // 校验不通过直接终止后续逻辑
    if (!isValid) return
    // 校验通过后再执行获取CSR信息的业务逻辑
    await this.getCsrInfo(event, 'csr')
  },
  async getCsrInfo(event, certyficateItem) {
    SSLCertificatesAPI
      .getCsrInfo(event.target.files[0])
      .then(data => {
        this.previewFn(data.data.info)
        this.getFileContent(event, certyficateItem)
      })
  }
}

备选方案：自定义校验规则（更稳定） #

如果内置的ext规则对文件类型输入适配不好，可以自定义专用的CSR扩展名校验规则，可控性更高：

extend('csrExt', {
  validate(file) {
    if (!file || !file.name) return false
    // 直接读取文件对象的名称判断扩展名，不会出现取值异常
    return file.name.toLowerCase().endsWith('.csr')
  },
  message: '请上传.csr格式的文件'
})

然后修改ValidationProvider的规则配置即可：

<ValidationProvider
  v-slot="{ errors, validate }"
  rules="required|csrExt"
  ref="csr"
  :name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
>

内容的提问来源于stack exchange，提问作者Eva