如何通过自定义钩子验证正确显示错误消息？

Question

我有一个多步骤表格。当前，父组件正在通过传递到表单组件的道具获取状态数据。提交按钮位于父组件中。这行得通，步骤也行。但是，单击输入字段时，如果失去焦点，则会触发多步表单中每个字段的错误消息，而不是触发错误的字段是唯一出现错误的字段。我正在使用error的{​​{1}}道具来触发用户的错误视觉效果。这些字段也在<TextField/>中进行了验证，并且值在validateAuth.js中进行了处理。我也想通过父组件中的一个提交按钮从父组件状态提交用户注册表单数据。

我已经尝试设置errors = {errors}并在useEffect挂钩中使用if语句，例如

useFormValidation.js

但是，这导致我的整个页面加载，并且在没有任何用户输入的情况下显示错误。

这是一个与我的确切开发设置相似的代码沙箱。

代码是相同的，只是简化了基本要点。

https://codesandbox.io/s/hooks-custom-authentication-final-8ldcw

预期结果：加载多步表单，每次用户尝试通过单击下一步转到下一步时验证字段，如果有错误，则仅以红色显示导致错误的字段，并通过显示错误文本material-ui helpertext。当在该步骤中的输入字段上发生错误时，用户将无法继续进行下一步。当一个字段显示错误时，其余没有错误的字段将保持其正常的非错误状态。在最后一步，“验证”按钮提交用户数据以进行注册。

实际：单击任何输入字段后，表单将错误所有字段，然后用户单击其他任何地方，从而导致该字段失去焦点。用户可以在注册过程中自由点击，而不会遇到任何错误。

Answer 1

如果您检查validateAuth.js，此代码将检查所有输入。第一次调用此函数时，所有输入值均为空，这就是为什么您在所有输入中均出现错误的原因。我认为如果您在同一页面上输入所有内容并在按下“提交”按钮时进行验证，则这种代码是合适的。 但是，在这种情况下，您应该更改验证以检查单个输入值，例如

export default function validateAuth(input) {
 let errors = {};
 switch (input.key) {
 case "email": {
  if (!input.value) {
    errors.email = "Required Email";
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(input.value)
  ) {
    errors.email = "Invalid email address";
  }
  return errors;
 }
 case "password": {
  if (!input.value) {
    errors.password = "Required Password";
  } else if (input.value.length < 6) {
    errors.password = "Password must be at least 6 characters";
  }
  return errors;
 }
 case "username": {
  if (!input.value) {
    errors.username = "Required Username";
  } else if (input.value.length < 6) {
    errors.username = "Username must be 6-12 characters";
  }
  return errors;
 }
 case "verify": {
  if (!input.value) {
    errors.verify = "Required Verification";
  } else if (input.value.length < 1) {
    errors.verify = "Please input the 4 digit code.";
  }
  return errors;
 }
 default:
   return errors;
 }
}

然后，您还应该更改handleBlur函数，使其仅发送单个输入值

function handleBlur(e) {
 const { name, value } = e.target;
 const input = {
  key: name,
  value
 };
 const validationErrors = validate(input);
 setErrors({
  ...errors,
  ...validationErrors
 });
}

然后，您应该添加一个错误对象检查以启用/禁用下一个按钮