gpt4 book ai didi

validation - 如何在 vuelidate 中动态设置验证字段

转载 作者:搜寻专家 更新时间:2023-10-30 22:19:49 25 4
gpt4 key购买 nike

我将 VueJS2 与 vuelidate 一起使用图书馆。我可以根据验证对象验证字段。验证将在计算的时间内执行。但是我的验证对象是固定的,而不是动态的。我有一些字段会根据选择隐藏。

import { validationMixin } from 'vuelidate'
import { required, maxLength, email } from 'vuelidate/lib/validators'

export default {
mixins: [validationMixin],
validations: {
company_name: { required },
company_position_title: { required }
},
methods: {
submit(){
this.$v.touch();
if(this.$v.$invalid == false){
// All validation fields success
}
}
}
}

HTML

<v-select
label="Who are you?"
v-model="select" // can be 'company' or 'others'
:items="items"
:error-messages="selectErrors"
@change="$v.select.$touch();resetInfoFields();"
@blur="$v.select.$touch()"
required
></v-select>

<v-text-field
label="Company Name"
v-model="company_name"
:error-messages="companyNameErrors"
:counter="150"
@input="$v.companyName.$touch()"
@blur="$v.companyName.$touch()"
v-show="select == 'Company'"
></v-text-field>

<v-text-field
label="Company Position Title"
v-model="company_position_title"
:error-messages="companyPositionErrors"
:counter="150"
@input="$v.companyPosition.$touch()"
@blur="$v.companyPosition.$touch()"
v-show="select == 'Company'"
></v-text-field>

<v-btn @click="submit">submit</v-btn>

问题

当我选择“其他”选项并单击提交时,this.$v.$invalid 仍然为真。它应该是假的,因为不需要验证字段。当我选择“公司”时,这两个字段必须是必填字段并经过验证。

最佳答案

你需要一个动态验证模式

validations () {
if (!this.select === 'company') {
return {
company_name: { required },
company_position_title: { required }
}
}
}

更多信息:Dynamic validation schema

关于validation - 如何在 vuelidate 中动态设置验证字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47250791/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com