我正在将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 …我正在使用vuelidate验证我的表单输入并使用vuetifyjs显示错误消息。我设法进行了基本的对象验证，并能够显示错误消息。
但是，当我验证集合时，在显示错误消息时遇到了问题。
问题
数据结构示例：
contact: {
websites: [
{
url: 'http://www.something.com',
label: 'Website',
}
]
}
验证示例：
validations: {
websites: {
$each: {
url: {
url,
}
}
},
}
示例模板：
<template v-for="(website, index) in websites">
<v-layout row :key="`website${index}`">
<v-flex xs12 sm9 class="pr-3">
<v-text-field
label="Website"
:value="website.url"
@input="$v.websites.$touch()"
@blur="$v.websites.$touch()"
:error-messages="websiteErrors"
></v-text-field>
</v-flex>
</v-layout>
</template>
计算错误消息示例：
websiteErrors() {
console.log('websites',this.$v.websites) // contains $each
const errors = []
if (!this.$v.websites.$dirty) {
return errors
}
// Issue is that all of …我正在使用 Vue.js，而且我是新手。我目前正在验证。我曾使用 vuelidate 作为我的验证库。我已经成功地完成了表单验证，但是当我必须检查复选框的验证时出现了问题。
如何检查复选框的验证？另外，我使用 bootstrapvue 来显示复选框。
<b-col lg="6" md="6" sm="6">
<label>Bus Route</label>
<b-form-group>
<b-form-checkbox v-for="route in busRouteList"
v-model.trim="selectedRoute"
v-bind:value="route.value"
v-bind:unchecked-value="$v.selectedRoute.$touch()">
{{route.text}}</b-form-checkbox>
</b-form-group>
<div class="form-group__message" v-if="$v.selectedRoute.error && !$v.selectedRoute.required">
Field is required
</div>
</b-col>
validations: {
selectedRoute: {
required
},
}
好的 - 搜索了很长一段时间，但找不到示例或使用 Vuelidate 的 OR 验证器。这个 github 问题中提到的那个是无效的，该问题在没有提供有效 OR 示例的情况下解决。该文档提到它的存在，但没有任何的例子，我们可以找到。任何人都有或知道一个有效的例子？
假设我有一个带有如下数据的 vue 组件：
data: () => ({
form: {
old_password: {
data: '',
type: 'password',
label: 'Old Password',
},
new_password: {
data: '',
type: 'password',
label: 'New Password',
},
repeat_password: {
data: '',
type: 'password',
label: 'New Password Confirmation',
},
},
}),
数据以这种方式格式化，因为我使用另一个插件 ant-design 来构建表单，因此以另一种方式格式化数据不是一种选择。该data字段将存储实际数据。
然后，我为 vuelidate 设置了以下验证规则。
validations: {
form: {
old_password: {
data: { required },
},
new_password: {
data: { required },
},
repeat_password: {
data: { sameAsPassword: sameAs('new_password') },
},
},
},
该required …
我有三个输入jobApplyEmail, jobApplyPhone，jobApplyOther我正在使用 Vuelidate 对其进行验证。在这三种输入中，用户需要输入至少一种输入。为了实现这一目标，我正在使用它requiredUnless，但由于某种原因它不起作用。
模板重复
// Using bootstrap-vue
<b-form-input
id="jobApplyEmail"
v-model="form.jobApplyEmail"
type="email"
:class="{ 'is-invalid': $v.form.jobApplyEmail.$error }"
@blur="$v.form.jobApplyEmail.$touch()">
</b-form-input>
脚本
import {
required,
email,
requiredUnless
} from 'vuelidate/lib/validators'
data() {
return {
form: {
jobApplyEmail: '',
jobApplyPhone: '',
jobApplyOther: ''
},
}
},
computed: {
isOptional: () => {
return (
this.jobApplyEmail !== '' ||
this.jobApplyOther !== '' ||
this.jobApplyPhone !== ''
)
}
},
validations: {
form: {
jobApplyEmail: { required: requiredUnless('isOptional'), email …export default {
name: "HelloWworld",
data: function () {
return {
isHidden: false,
isWelcome: false,
isFadeout: false,
}
}
<div v-if="!isHidden">
//some code for screen1
<button v-on:click="isHidden = true"> HELLO</button>
</div>
<div v-else-if="isHidden && !isFadeout">
//some code for screen 2
<button v-on:click="isFadeout = true"> Hi</button>
</div>
<div v-else-if="isFadeout && isHidden && !isWelcome">
<input
:type="passwordFieldType"
v-model="user.password"
id="password"
name="password"
class="input-section-three"
:class="{ 'is-invalid': submitted && $v.user.password.$error }"
placeholder="Enter new password"
:maxlength="maxpassword"
v-on:keypress="isPassword($event)"
/>
<div
v-if="submitted && $v.user.password.$error"
class="invalid-feedback-two"
>
<span v-if="!$v.user.password.required">Password is required</span> …我有两个输入，用户可以选择两个日期，这两个日期允许用户选择产品在这两个日期期间是否是新的。我想使用 Vuelidate 验证这两个字段，并希望比较这两个日期以及更多这样做。但我似乎无法让它发挥作用。
我试图实现的验证：
New_from 字段
新的
我尝试过的：
validations: {
fields: {
newFrom: {
required: requiredIf(function() {
return this.fields.newTo
}),
minValue: minValue(new Date()), // Make the minimal value today
maxValue: this.newTo ? this.newTo : null
},
newTo: {
required: requiredIf(function() {
return this.fields.newFrom
}),
minValue: this.fields.newFrom, // But this does not work
},
},
}
超文本标记语言
<div class="w-full flex-column">
<input v-model.trim="$v.fields.newFrom.$model" type="date" name="new_from" id="new_from" v-on:change="alert('test')" :class="{'border-red-600': submitted && !$v.fields.newFrom.required}" class="appearance-none block border border-gray-200 p-2 …我正在使用 vuelidate 库来验证我的表单。我必须将内置验证器与自定义消息一起使用。我在下面尝试过。但不工作。参考：Vuelidate 表单验证库
validations() {
return {
email: {
requiredIf: requiredIf(() => {
return this.data.enablevalidation;
}),
email: helpers.withMessage(this.data.validation_err_message, email),
},
};
},
我的问题是，如果验证错误，它仍然会验证电子邮件。根据这两个条件，验证应该通过。如果验证错误，电子邮件验证也应该不起作用。如何实现这个场景
我正在尝试将 vuelidate 与 Vuetify 2 一起使用，但在尝试验证嵌套对象值时遇到了麻烦。
这段代码工作正常：
<template>
<v-text-field
v-model="no_nome"
:error-messages="nameErrors"
label="Nome"
@input="$v.no_nome.$touch()"
@blur="$v.no_nome.$touch()"
>
</v-text-field>
</template>
<script>
import { required } from 'vuelidate/lib/validators'
export default {
data() {
return {
no_nome:'',
}
},
validations: {
no_nome: {
required
},
},
computed: {
nameErrors () {
const errors = []
if (!this.$v.no_nome.$dirty)
return errors
!this.$v.no_nome.required && errors.push('Name is required.')
return errors
},
}
}
</scrip>
但如果我将no_nome数据更改为：
data() {
return {
user : {
no_nome:'',
}
}
},
和 …
vuelidate ×10
vue.js ×8
javascript ×3
vuetify.js ×3
validation ×2
vuejs2 ×2
antd ×1
date ×1
forms ×1
nuxt.js ×1