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

Posted 2023-02-24

【中文标题】是的，密码确认验证不起作用

【英文标题】：Yup password confirmation validation doesn't work

【发布时间】：2021-11-21 16:26:21

【问题描述】：

我想用 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>

这是demo code on codesandbox

上面的代码运行没有报错但是密码确认不起作用。

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

【参考方案1】：

显然，它的唯一工作方式是在useForm 中使用validationSchema

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

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,
    ;
,

【讨论】：

非常感谢，成功了！