Vee 验证返回 true，但应该返回 false

Posted 2023-03-06

【中文标题】Vee 验证返回 true，但应该返回 false

【英文标题】：Vee validate return true, but should return false

【发布时间】：2020-02-12 22:51:30

【问题描述】：

我正在使用 Vuetify，并且有一个表单，我使用 VeeValidate 进行表单验证... 当我使用这个时：

this.$validator.validateAll().then((result) => 
            console.log("result form", result);
            //result ? this.onSubmit() : scrollTo(0, 250);
        );

它总是返回 true，即使我的输入字段上的验证无效... 输入看起来像：

<v-textarea
    filled
    name="string"
    :label="placeholderText"
    auto-grow
    single-line
    :placeholder="placeholderText"
    v-model="answer"
    :required="isRequired"
    v-validate:computedProp="checkRequired"
    :error-messages="errors.collect('string')"
    data-vv-name="string"
    :hint="hintText"
    @blur="updateAnswer"
></v-textarea>

输入组件的代码：

export default 
$_veeValidate: 
    validator: 'new'
,
name: 'String',
props: 
    placeholderText: 
        default: 'Add a value'
    ,
    hintText: 
        default: 'Add a value'
    ,
    isRequired: 
        default: true
    
,
data: () => (
    answer: ''
),
computed: 
    checkRequired() 
        return this.isRequired ? 'required' : ''
    
,
methods: 
    updateAnswer() 
        this.$validator.validateAll();
        this.$emit('updateAnswer', this.answer);
    

我在另一个组件中调用 this.$validator.validateAll()...输入组件是一个独立组件...我将它全部包装在一个表单标签中，并在提交时运行验证功能

【问题讨论】：

checkRequired 不总是正确的吗？ 'required' 和空字符串一样是真的吗？为什么不return this.isRequird ? true : false？

【参考方案1】：

你有两个选择：

将来自$attrs的v-validate传递给组件

将 $validator 注入组件

家长

export default 
  name: "App",
  components: 
    YourComponent
  ,
  provide() 
    return 
      $validator: this.$validator
    ;
  ,

孩子

 $_veeValidate: 
    validator: "new"
  ,
  inject: ["$validator"],
  name: "String",

你也可以简化你的html代码，见VeeValidate Syntax

HTML

v-validate=" required: this.isRequired "

你可以安全地删除

:required="isRequired"

【讨论】：

不太管用...它在模糊时验证正确，但当我提交时仍然没有...可能是因为它不是直接孩子，而是一个盛大的盛大盛大孩子...向下 3-4 级...

向子组件提供/注入$validator。