VeeValidate 4字段验证状态

Question

我正在尝试用Vue和Vee-validate模仿Bootstrap表单验证样式。

为了获得Boostrap验证错误消息，当存在验证错误时，输入本身必须具有is-invalid类呈现。此外，错误消息元素当然必须具有invalid-feedback类。

当有验证错误时，我正在努力将is-invalid类添加到输入。

在Vee-validate 3中，我能够用这个指南控制输入元素的类。但它似乎被弃用了

这是一个你可以玩的代码沙箱。没有什么特别的，只是直接从Veevalidate的例子。

<template>
<div id="app">
<Form @submit="onSubmit">
<Field name="email" type="email" :rules="validateEmail" class="form-control"/>
<ErrorMessage class="invalid-feedback" name="email" />
<button class="btn btn-primary">Sign up</button>
</Form>
</div>
</template>
<script>
import {
Form,
Field,
ErrorMessage
} from "vee-validate";
export default {
components: {
Form,
Field,
ErrorMessage,
},
methods: {
onSubmit(values) {
console.log(values, null, 2);
},
validateEmail(value) {
// if the field is empty
if (!value) {
return "This field is required";
}
// if the field is not a valid email
const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i;
if (!regex.test(value)) {
return "This field must be a valid email";
}
// All is good
return true;
},
},
};
</script>
<style>
span {
display: block;
margin: 10px 0;
}
</style>

1. "vee-validate"^ 4.5.11",
2. "vue"^ 3.2.33",

Answer 1

您可以通过利用<Field />-组件的作用域槽来呈现更复杂的字段。

如果你用下面的代码替换你的field组件，它应该像预期的那样工作:

<Field name="email" :rules="validateEmail" v-slot="{ field, errors }">
<input v-bind="field" type="email" :class="{'is-invalid': !!errors.length }" />
</Field>