Vue.js VeeValidate自定义验证器编译错误正常但未触发错误类

看起来你已经把自定义验证器的核心逻辑跑通了——错误信息能正常出现在errors对象里，validateAll返回的valid值也完全准确，但就是文本域的错误样式没生效，对吧？这问题其实出在作用域（scope）的匹配上。

问题原因 #

你给表单元素加了data-vv-scope="uploadCert"，但在判断errors.has('certificate_' + index)的时候，没有带上作用域前缀。在VeeValidate（尤其是2.x版本）中，带作用域的字段，其错误标识是[scope].[fieldName]的格式，直接用字段名查找是匹配不到对应的错误的。

修复步骤 #

1. 修改文本域的:class绑定逻辑
   把errors.has('certificate_' + index)改成errors.has('uploadCert.certificate_' + index)，带上作用域前缀：

   <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('uploadCert.certificate_' + index)}]" 
     rows="15"/>
   

2. 同步更新错误提示组件的字段名
   你的fr-validation-error组件如果也是基于errors.has来判断是否显示错误，也要把fieldName改成带作用域的格式：

   <fr-validation-error 
     :validatorErrors="errors" 
     :fieldName="'uploadCert.certificate_' + index">
   </fr-validation-error>
   

验证逻辑 #

你可以在控制台打印errors.items[0]，能看到它的scope是uploadCert，field是certificate_0，所以完整的错误字段标识就是uploadCert.certificate_0——这才是errors.has方法能识别的正确参数。

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