javascript - vue.js VeeValidate - 自定义验证器正确编译错误但不切换错误类

Question

我写了一个这样的自定义验证器:

    created () {
        this.$validator.extend('validateCert', {
            getMessage: (field) => {
                return field + ' is not a valid certificate';
            },
            validate: (value) => {
                return value.startsWith('-----BEGIN CERTIFICATE-----') && value.endsWith('-----END CERTIFICATE-----');
            }
        });
    }

我已将它附加到模态内的文本区域:

    <div class="pb-3 mr-4">
        <b-form-textarea 
            type="text"
            v-validate="'required|validateCert'"
            data-vv-validate-on="change"
            v-model.trim="signedCerts[index]"
            data-vv-scope="uploadCert"
            :name="'certificate_' + index"
            :class="[{'is-invalid': errors.has('certificate_' + index)}]"
            rows="15"/>
        <fr-validation-error :validatorErrors="errors" :fieldName="'certificate_' + index"></fr-validation-error>
    </div>

然后 - 单击按钮我执行以下操作:

uploadCerts (event) {
    let idmInstance = this.getRequestService(),
        body = {
            fromCSR: true,
            certs: _.each(this.signedCerts, (cert) => { 
                JSON.stringify(cert); 
            })
    };

this.$validator.validateAll('uploadCert').then((valid) => {
    // Prevent modal from closing
    event.preventDefault();

    if (valid) { // some more logic

如果我检查计算的错误对象，我将看到我失败的验证:

{
    "items": [
        {
            "id": "19",
            "field": "certificate_0",
            "msg": "certificate_0 is not a valid certificate",
            "rule": "validateCert",
            "scope": "uploadCert",
            "regenerate": {
                "_custom": {
                    "type": "function",
                    "display": "<span>ƒ</span> regenerate()"
                }
            }
        }
    ]
}

“有效”的值(真或假)在任何时候都是准确的。我只是没有看到我的错误类被触发。

Answer 1

很难完全回答这个问题，因为它部分取决于 fr-validation-error 中发生的情况，但我认为问题在于您如何使用范围。

当您定义 data-vv-scope="uploadCert" 时，这意味着每个对字段名称的引用都必须在 errors 中以 uploadCert. 开头。因此，当您在 :class 中指定 errors.has('certificates_'+index) 时，您必须将其更改为 errors.has('uploadCert. certificates_'+index).

这是它的完整外观(减去 bootstrap-vue 和多个字段位):

    <textarea
      v-validate="'required|validateCert'"
      data-vv-validate-on="change"
      data-vv-scope="uploadCert"
      v-model.trim="signedCert"
      name="certificate"
      class="form-control"
      :class="{ 'is-invalid': errors.has('uploadCert.certificate') }"
      rows="10"
    >
    </textarea>

一个证书上传字段的完整工作示例:https://codesandbox.io/s/z2owy0r2z3