Vue3、VeeValidate 和 Yup，如何验证字段

Question

我在验证表单中的字段时遇到了一些问题。我在 Nuxt3 项目中......

我尝试按照 VeeValidate 文档进行操作，但无法使其正常工作。他们所有的例子都使用他们自己的“Field”组件，但是，我使用的是 Vue Prime 和他们的表单组件，所以我不能使用 VeeValidate 的 Field 组件 - 如何让表单进行验证？它应该在提交时也有“实时验证”，这意味着如果你在填充和“模糊”，它也应该显示一条错误消息：

我的代码是：

<template>
  <VForm @submit="handleAddUser" v-slot="{ values }">
    <FormItem :show-separator="false">
      <NuntioColorPicker @active-color="setUserColor" />
    </FormItem>
    <FormItem :show-separator="false" label="Display name">
      <InputText name="displayName" v-model="user.displayName" type="text" placeholder="Display name" />
      {{ errors.displayName }}
    </FormItem>
    <FormItem :show-separator="false" label="First name">
      <InputText v-model="user.firstName" type="text" placeholder="First name" />
    </FormItem>
    <FormItem :show-separator="false" label="Last name">
      <InputText v-model="user.lastName" type="text" placeholder="Last name" />
    </FormItem>
    <FormItem :show-separator="false" label="Email">
      <InputText v-model="user.email" type="text" placeholder="Email" />
    </FormItem>
    <FormItem :show-separator="false" label="Phone">
      <InputText v-model="user.phone" type="text" placeholder="Phone" />
    </FormItem>
    <FormItem :show-separator="false" label="Password">
      <InputText v-model="user.password" type="text" placeholder="Password" />
    </FormItem>
    <pre>{{ values }}</pre>
    <ModalActions>
      <NuntioButton ghost>Cancel</NuntioButton>
      <NuntioButton type="primary" @click="handleAddUser">Add user</NuntioButton>
      <button type="submit" @click="handleAddUser">SUbmit</button>
    </ModalActions>
  </VForm>
</template>

<script setup lang="ts">
import FormItem from '~/components/atoms/FormItem/FormItem.vue';
import NuntioColorPicker from '~/components/molecules/NuntioColorPicker.vue';
import InputText from 'primevue/inputtext';
import ModalActions from '~/components/organisms/Modal/ModalActions.vue';
import NuntioButton from '~/components/atoms/Button/NuntioButton.vue';
import { useForm, Form as VForm } from 'vee-validate';
import * as yup from 'yup';

//TODO: Typings
const user = reactive({
  color: undefined,
  displayName: undefined,
  firstName: undefined,
  lastName: undefined,
  email: undefined,
  password: undefined,
  phone: undefined
});

const userSchema = yup
  .object({
    displayName: yup.string().required(),
    firstName: yup.string().required(),
    lastName: yup.string().required(),
    email: yup.string().email().required(),
    password: yup.string().required().min(6),
    phone: yup.string().required()
  })
  .required();

const { validate, errors } = useForm({
  validationSchema: userSchema,
  initialValues: user
});

const setUserColor = (color: string) => {
  user.color = color;
};

const handleAddUser = (values) => {
  console.log('values', values);
  console.log('errors', errors.value);
};
</script>

<style scoped lang="scss"></style>

Answer 1

我不确定为什么您的页面没有包含您的方法和数据的导出默认值？

无论如何。 我在 vue 验证方面遇到了类似的问题，但我没有使用 veelidate。也许我的解决方案对你有用。

将您的 v-form 标签更改为

  <v-form @submit.prevent="handleAddUser" v-model='isValid' v-slot="{ values }">

数据来保存处理添加用户的模型和方法

export default {
  name: "App",
  data: () => ({
        isValid: false,
  }),
  methods: {
    handleAddUser = (values) => {
      if (isValid) {
         console.log('values', values);
         console.log('errors', errors.value);
      }
    };
  },
};

然后你的按钮不需要@click事件，如果它们是提交类型。

<NuntioButton type="submit">Add user</NuntioButton>
<button type="submit">Submit</button>