vue, veeValidator，以编程方式验证字段

Question

我需要以编程方式有效的文件类型，然后做一些事情:

<template>
<ValidationObserver
ref="form"
tag="form"
type="form"
autocomplete="off"
@submit.prevent="submit()"
>
<div class="box-body">
<div class="row">
<div class="col-lg-8 col-md-6 col-xs-12">
<ValidationProvider
v-slot="{ errors, validate }"
rules="ext:csr"
ref="csr"
:name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
>
<div
class="form-group"
:class="{'has-error': errors.length}"
>
<label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
<input
id="csr"
required
type="file"
@change="validate"
@blur="getCsrInfo($event,'csr')"
>
<FormErrorSpan :errors="errors" />
</div>
</ValidationProvider>
.
.
.
<script>
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required, confirmed, integer, ext } from 'vee-validate/dist/rules'
import FormErrorSpan from '@/components/Base/templates/forms/FormErrorSpan'
.
.
.
methods: {
async getCsrInfo(event, certyficateItem) {
//UNFORTUNATELLY THIS ALWAYS RETURN TRUE
console.log(await this.$refs.csr.validate())
SSLCertificatesAPI
.getCsrInfo(event.target.files[0])
.then(data => {
this.previewFn(data.data.info)
this.getFileContent(event, certyficateItem)
})
},
.
.
.

$refs.csr.validate()应该返回false，那么文件有错误的扩展名。但不幸的是，这总是对的。我试图在一个@change中调用validate和getCsrInfo($event，'csr')，但验证也不起作用。

Answer 1

我明白了!我发现@input中的validate方法在这里工作得很好。

<ValidationProvider
v-slot="{ errors, validate }"
rules="ext:csr"
ref="csr"
:name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
>
<div
class="form-group"
:class="{'has-error': errors.length}"
>
<label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
<input
id="csr"
required
type="file"
//THATS WORK
@input="validate"
@change="getCsrInfo($event,'csr')"
>
<FormErrorSpan :errors="errors" />
</div>
</ValidationProvider>