如何在反应中添加输入验证？

Question

我有一个包含firstName 和lastName 的简单表单。

    <label htmlFor="firstName">First Name: </label>
    <input
      type="text"
      className="form-control"
      id="firstName"
      name="firstName"
      value={basicDetails.firstName}
      onChange={(event) => handleInputChange(event)}
    />

    <label htmlFor="lastName">Last Name: </label>
    <input
      type="text"
      className="form-control"
      id="lastName"
      name="lastName"
      value={basicDetails.lastName}
      onChange={(event) => handleInputChange(event)}
    />

为此，我正在尝试添加验证。

验证规则是，

• 两个字段都应该只接受文本
• 名字是必填项，至少应包含 4 个字符。
• 如果姓氏字段有值，则至少需要 3 个字符。

我试图实现的目标，

components/utils.js

export function isLettersOnly(string) {
  return /^[a-zA-Z]+$/.test(string);
}

components/basic_details.js

  const handleInputChange = (event) => {
    const { name, value } = event.target;

    if (!isLettersOnly(value)) {
      return;
    }

    setValue((prev) => {
      const basicDetails = { ...prev.basicDetails, [name]: value };
      return { ...prev, basicDetails };
    });
  };

在句柄输入字段上，我正在进行验证以检查输入是否具有值，但我无法理解如何捕捉实际验证错误并显示在相应的输入框下方。

请帮我在各个字段上显示验证消息。

工作示例：

Answer 1

我建议在form_context的表单数据中添加一个errors属性：

const [formValue, setFormValue] = useState({
  basicDetails: {
    firstName: '',
    lastName: '',
    profileSummary: '',
    errors: {},
  },
  ...
});

将验证添加到basic_details 子表单：

const ErrorText = ({ children }) => (
  <div style={{ color: 'red' }}>{children}</div>
);

const BasicDetails = () => {
  const [value, setValue] = React.useContext(FormContext);
  const { basicDetails } = value;

  const handleInputChange = (event) => {
    const { name, value } = event.target;

    if (!isLettersOnly(value)) {
      setValue((value) => ({
        ...value,
        basicDetails: {
          ...value.basicDetails,
          errors: {
            ...value.basicDetails.errors,
            [name]: 'Can have only letters.',
          },
        },
      }));
      return;
    }

    switch (name) {
      case 'firstName': {
        const error = value.length < 4 ? 'Length must be at least 4.' : null;
        setValue((value) => ({
          ...value,
          basicDetails: {
            ...value.basicDetails,
            errors: {
              ...value.basicDetails.errors,
              [name]: error,
            },
          },
        }));
        break;
      }

      case 'lastName': {
        const error = value.length < 3 ? 'Length must be at least 3.' : null;
        setValue((value) => ({
          ...value,
          basicDetails: {
            ...value.basicDetails,
            errors: {
              ...value.basicDetails.errors,
              [name]: error,
            },
          },
        }));
        break;
      }

      default:
      // ignore
    }

    setValue((prev) => {
      const basicDetails = { ...prev.basicDetails, [name]: value };
      return { ...prev, basicDetails };
    });
  };

  return (
    <>
      <br />
      <br />
      <div className="form-group col-sm-6">
        <label htmlFor="firstName">First Name: </label>
        <input
          type="text"
          className="form-control"
          id="firstName"
          name="firstName"
          value={basicDetails.firstName}
          onChange={(event) => handleInputChange(event)}
        />
      </div>
      <br />
      {basicDetails.errors.firstName && (
        <ErrorText>{basicDetails.errors.firstName}</ErrorText>
      )}
      <br />
      <br />
      <div className="form-group col-sm-4">
        <label htmlFor="lastName">Last Name: </label>
        <input
          type="text"
          className="form-control"
          id="lastName"
          name="lastName"
          value={basicDetails.lastName}
          onChange={(event) => handleInputChange(event)}
        />
      </div>
      <br />
      {basicDetails.errors.lastName && (
        <ErrorText>{basicDetails.errors.lastName}</ErrorText>
      )}
      <br />
    </>
  );
};

最后，检查字段值和错误以在index.js 的下一个按钮上设置disabled 属性。第一个!(value.basicDetails.firstName && value.basicDetails.lastName) 条件处理初始/空值状态，而第二个条件处理错误值。

{currentPage === 1 && (
  <>
    <BasicDetails />
    <button
      disabled={
        !(
          value.basicDetails.firstName && value.basicDetails.lastName
        ) ||
        Object.values(value.basicDetails.errors).filter(Boolean).length
      }
      onClick={next}
    >
      Next
    </button>
  </>
)}

此模式可以重复执行以下步骤。

Answer 2

首先，您必须在控制台中遇到将受控组件转换为不受控组件的错误。对于受控组件，始终首选使用状态来设置输入值。并使用 onChange 处理程序设置状态。我将尝试放入单个组件中，以便您了解想法并应用您的案例

import React, {useState}  from 'react';
import {isLettersOnly} from './components/utils'; // not sure where it is in your folder structure

const MyInputComponent = ({value, ...props}) => {
   const [inputValue, setInputValue] = useState(value || ''); // input value should be empty string or undefined. null will not be accepted.
   const [error, setError] = useState(null);


   const handleChange = event => {
      
    const { name, value } = event.target;

     if (!isLettersOnly(value)) {
         setError('Invalid Input');
     }
      setInputValue(value);
     
   }

   return (
    <>
     <input
      value={inputValue}
      onChange={handleChange}
      {...props}
    />
    {error && (
        <span className={"error"}>{error}</span>
    )}
    </>
   )
}

export default MyInputComponent;

这是一个非常基本的组件。只是为了展示这个概念。然后，您可以将此组件作为输入字段导入，并从父级传递必要的道具，例如名称、类名等。

import React from 'react';
import MyInputComponent from 'components/MyInputComponent';

const MyForm = (props) => {
  return props.data && props.data.map(data=> (
    <MyInputComponent
      name="lastName"
      className="form-control"
      value={data.lastName}
  ));
}