如何在 vee validate 4 中对无效或有效数据应用红色背景或绿色背景

Question

我有一个问题。我有这个表单，当未触摸表单字段时，我不希望显示任何错误或颜色，但是当我触摸其中一个字段或更改字段时，我想要根据有效性或无效性显示绿色或红色。

第一次尝试： 搜索时我发现你可以在CSS中写这个：

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

但问题是我没有任何控制权。当我不碰任何东西时，就会出现红色字段。 所以我的其他尝试之一是使用动态类绑定并在有错误或没有错误时更改颜色：

<Form
      class="card col-12 col-md-6 col-xl-4 p-5 mx-auto"
      @submit="submit"
      :validation-schema="schema"
    >
      <h1 class="text-center">Registrera</h1>
      <label>Username</label>
      <Field
        type="text"
        name="username"
        required
        @blur="checkInput($event, 'errorInput1')"
        class="TextInput"
        :class="{
          'error-class': errorFlags.errorInput1 === 'false',
          'success-class': errorFlags.errorInput1 === 'true',
        }"
      />

      <ErrorMessage name="username" />

      <label>Email</label>
      <Field
        input
        type="email"
        name="email"
        required
        @blur="checkInput($event, 'errorInput2')"
        class="TextInput"
        :class="{
          'error-class': errorFlags.errorInput2 === 'false',
          'success-class': errorFlags.errorInput2 === 'true',
        }"
      />
      <ErrorMessage name="email" />

      <label>Password</label>
      <Field type="password" name="password" class="" required />
      <ErrorMessage name="password" />

      <Field
        id="passwordConfirmation"
        name="passwordConfirmation"
        type="password"
        required
        @blur="checkInput($event, 'errorInput3')"
        class="TextInput mt-4"
        :class="{
          'error-class': errorFlags.errorInput3 === 'false',
          'success-class': errorFlags.errorInput3 === 'true',
        }"
      />
      <ErrorMessage name="passwordConfirmation" class="" />

      <button class="btn btn-primary mt-4">Submit</button>
      <router-link class="btn btn-primary mt-3" :to="{ name: 'LoginComponent' }"
        >Login</router-link
      >
    </Form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { Form, Field, ErrorMessage } from "vee-validate";
import * as yup from "yup";
export default {
  name: "RegisterComponent",
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
    const schema = yup.object({
      email: yup
        .string()
        .required("email is required")
        .email("must be a valid email"),
      username: yup
        .string()
        .required("username is required")
        .min(4)
        .matches(
          /^(?=.*[a-zA-Z]{1,})(?=.*[\d]{0,})[a-zA-Z0-9]{1,15}$/gm,
          "must contain letters and numbers"
        ),

      password: yup
        .string()
        .required("password is required")
        .min(8)
        .matches(
          /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\w\d\s:])([^\s]){8,16}$/gm,
          "must contain 8 characters, one uppercase, one lowercase, one number and one special case character"
        ),
      passwordConfirmation: yup
        .string()
        .required("password confirmation is required")
        .oneOf([yup.ref("password")], "passwords do not match"),

      // passwordConfirmation: yup
      //   .string()
      //   .oneOf([yup.ref("password"), null], "Passwords must match"),
    });
    return {
      schema,
        errorInput1: null, //Changes applied
      errorInput2: null, //Changes applied
      errorInput3: null, //Changes applied
    };
  },
  methods: {
    // v-model bindings
    submit(values) {
      delete values.passwordConfirmation;
      this.register(values).then(() => {
        this.$router.push("/Login");
      });
};

但是这次尝试给我带来了一个空白页面和这个错误： Vue warn]：调度程序执行期间未处理的错误 未捕获（承诺中）类型错误：无法读取未定义的属性（读取“errorInput1”）

Answer 1

作为 ErrorMessage 的解决方法，我通过选择 role="alert" 使用了 css，我在 vee-validate v4 文档中看不到任何有关它的文字。

[role="alert"] {
    color: red;
}