vee-validate:是否可以在不更改当前名称的情况下更改fields-bag-name?

时间:2019-03-29 15:49:53

标签: vue.js vee-validate

因此,我想为生日改编自动填充命名。但是,这导致几个问题。现在,我需要确定是否可以强制vee-validate更改字段名称。

要更好地理解它。当前是这样的:

PageDown

选择字段的名称为“ day”。 但是,根据this,应将其命名为:“ bday-day”。

由于我使用的是vee-validate,因此导致字段名称重命名为“ bday-day”。现在OnPageUpOrDownKeyDown将不再起作用。

但是,即使我将其更改为var teststring = ToUpperFirst("touppercase"); private string ToUpperFirst(string text) { return CultureInfo.CurrentCulture.TextInfo.ToTitleCase(text.ToLower()); //alternatively, you could use: //return $"{char.ToUpper(text[0])}{(text.Length > 1 ? text.Substring(1).ToLower() : string.Empty)}"; } ,也无法使用内部观察器来更改值。我收到错误消息:

  

失败的观看路径:“ bday-day”观看者仅接受以点分隔的简单路径。要完全控制,请改用函数。

这是因为我必须强加v模型名称和vee-validate名称的相同名称。 <select v-model="day" id="day" name="day" :class="{'invalid' : errors.has('day')}" v-validate="'required|excluded:0'" > <option :disabled="true" value="0" v-text="trans('food.Day')" /> <option v-for="n in 31" :key="n" :value="n" v-text="n" /> </select> <span class="bar" :class="{'invalid' : errors.has('day')}" /> 无法正常工作。

简而言之。我的最终目标是这样的:

errors.has('day')}

我将使用errors.has('bday-day')进行自动填充,但是我将vee validate的字段名称设置为v-model="bday-day"

3 个答案:

答案 0 :(得分:3)

使用data-vv-name属性

您已经了解了Vee-validate,可以设置属性data-vv-name来实现以下目的:

<select
    v-model="day"
    id="day"
    name="bday-day"
    :class="{'invalid' : errors.has('day')}"
    v-validate="'required|excluded:0'"
    data-vv-name="day"
>

现在,errors提供的fieldsvee-validate成员将具有一个day条目,而不是使用输入名称bday-day。因此,如果您在errors.day上有一个观察者,那么bday-day的观察路径就不会有麻烦的问题。

答案 1 :(得分:1)

使用VeeValidate v3,您可以通过两个相关选项传递给ValidationProvidernamevid

VeeValidate's docs specify that

name指定要在错误消息中使用的字段名称。

vid是用于基于目标/跨领域规则的标识符。

不过,从我的测试来看,vid还用作fieldserrorsValidationObserver的密钥(如果提供的话),如果没有,它会退回到{ {1}}。

因此,如果您在一种形式中有多个相同的字段,并且希望拥有唯一的键名(这样它们就不会发生冲突和断裂),请使用{{1 }}仅用于错误消息中的字段名称,并且name提供name对象在vidValidationObserver对象中使用的唯一ID。例如:

fields

答案 2 :(得分:0)

如果您使用的是 VeeValidate v3 ,则可以为ValidationProvider

设置“名称”属性
<ValidationProvider name="day" rules="required|excluded:0" v-slot="{ errors }">