出现错误时如何突出显示 vee-validate 表单向导的输入字段？

问题描述

我正在使用 Vue3 并尝试验证我的输入并在使用 vee-validate 包验证字段期间突出显示输入字段。

<template>
  <div>
    <h1>Multi-step Form Wizard</h1>
    <p>
      This example uses a the composition API to create a multi-step form with
      next/prevIoUs controls and validation before moving to the next step.
      There are infinite ways you Could implement this,this is just one of
      them. You Could throw in a form generator to make this even easier.
    </p>

    <FormWizard :validation-schema="validationSchema" @submit="onSubmit">
      <FormStep>
        <Field name="fullName" type="text" placeholder="Type your Full name" />
        <ErrorMessage name="fullName" />

        <Field name="email" type="email" placeholder="Type your email" />
        <ErrorMessage name="email" />
      </FormStep>

      <FormStep>
        <Field
          name="password"
          type="password"
          placeholder="Type a strong one"
        />
        <ErrorMessage name="password" />

        <Field
          name="confirmPass"
          type="password"
          placeholder="Confirm your password"
        />
        <ErrorMessage name="confirmPass" />
      </FormStep>

      <FormStep>
        <Field name="favoriteDrink" as="select">
          <option>Select a drink</option>
          <option value="coffee">Coffee</option>
          <option value="tea">Tea</option>
          <option value="soda">Soda</option>
        </Field>
        <ErrorMessage name="favoriteDrink" />
      </FormStep>
    </FormWizard>
  </div>
</template>

<script>
import { Field,ErrorMessage } from "vee-validate";
import * as yup from "yup";
import FormWizard from "@/components/FormWizard.vue";
import FormStep from "@/components/FormStep.vue";

export default {
  name: "App",components: {
    FormWizard,FormStep,Field,ErrorMessage,},setup() {
    // break down the validation steps into multiple schemas
    const validationSchema = [
      yup.object({
        fullName: yup.string().required().label("Full Name"),email: yup.string().required().email().label("Email Address"),}),yup.object({
        password: yup.string().min(8).required(),confirmPass: yup
          .string()
          .required()
          .oneOf([yup.ref("password")],"Passwords must match"),yup.object({
        favoriteDrink: yup
          .string()
          .required()
          .oneOf(["coffee","tea","soda"],"Choose a drink"),];

    /**
     * Only Called when the last step is submitted
     */
    function onSubmit(formData) {
      console.log(JSON.stringify(formData,null,2));
    }

    return {
      validationSchema,onSubmit,};
  },};
</script>

<style>
input,select {
  margin: 10px 0;
  display: block;
}
</style>

我一直在这里按照示例进行操作 https://codesandbox.io/s/multi-step-formwizard-with-vee-validate-184bd?from-embed=&file=/src/App.vue:0-2720，我可以显示错误消息，但不会突出显示错误字段。

我可以知道如何实现这一目标吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）