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()"
                }
            }
        }
    ]
}

和'valid'的值（正确或错误）始终是准确的。我只是没有看到我的错误类被触发。

Answer 1

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

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

这是完整的外观（减去boots-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

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

1 个答案: