javascript - 是的，密码确认验证不起作用

Question

我想用 Yup 验证密码确认，但它不起作用。

这是我的代码：

<template>
  <form @submit="onSubmit">
    <div>
      <label for="password">Password</label>
      <div>
        <input
          id="password"
          v-model.trim="password"
          name="password"
        />
      </div>
    </div>
    <div>{{ passwordErrorMessage }}</div>
    <br>
    <div>
      <label for="confirmPassword">Confirm Password</label>
      <div>
        <input
          id="confirmPassword"
          v-model.trim="confirmPassword"
          name="confirmPassword"
        />
      </div>
    </div>
    <div>{{ confirmPasswordErrorMessage }}</div>    
    <br>
    <button>Submit</button>
  </form>

</template>

<script>
import { useField, useForm } from "vee-validate";
import * as yup from "yup";

export default {
  setup() {
    const { handleSubmit } = useForm();
    const onSubmit = handleSubmit((values) => {
      alert(JSON.stringify(values, null, 2));
    });
    
    const { value: password, errorMessage: passwordErrorMessage } = useField(
      "password",
      yup
        .string()
        .required()
        .min(5)
    );

    const { value: confirmPassword, errorMessage: confirmPasswordErrorMessage } = useField(
      "confirmPassword",
      yup
        .string()
        .required()
        .oneOf([yup.ref("password")], "Passwords do not match"),
    );

    return {
      password,
      passwordErrorMessage,
      confirmPassword,
      confirmPasswordErrorMessage,
      onSubmit
    }
  }
};
</script>

这是codesandbox上的演示代码

运行上面的代码时没有出现错误，但密码确认不起作用。

任何人都可以帮助让密码确认工作吗？

Answer 1

显然，它工作的唯一方法是在useForm

最终的设置函数将如下所示：

setup() {
    const {
        handleSubmit
    } = useForm({
        validationSchema: yup.object({
            password: yup.string().required().min(5),
            confirmPassword: yup
                .string()
                .required()
                .oneOf([yup.ref("password")], "Passwords do not match"),
        }),
    });
    const onSubmit = handleSubmit((values) => {
        alert(JSON.stringify(values, null, 2));
    });

    const {
        value: password,
        errorMessage: passwordErrorMessage
    } = useField(
        "password"
    );

    const {
        value: confirmPassword,
        errorMessage: confirmPasswordErrorMessage,
    } = useField("confirmPassword");

    return {
        password,
        passwordErrorMessage,
        confirmPassword,
        confirmPasswordErrorMessage,
        onSubmit,
    };
},