主页 / 问题 / 1545146
Accepted
Dream
Asked:2023-10-11 02:59:24 +0000 UTC2023-10-11 02:59:24 +0000 UTC

如何在 JSX 中验证注册表单？

  • 772

大家好，我正在学习 React 和 JSX，试图验证注册表单的名字和姓氏。如果输入字段仅包含空格或不可见符号（ㅤ），那么当您单击“下一步”按钮时，它们会以红色突出显示。next好吧，相应地，在字段通过验证之前，该按钮不会执行任何操作。

我尝试自己执行此操作，只是为了检查是否有空输入，但它的工作方式尽可能不正确：两个字段为空，仅突出显示姓氏，如果您输入 1 个字符，则突出显示名称。一般来说，保存。先感谢您。

JSX：

  const [name, setName] = useState('');
  const [nameInvalid, setNameInvalid] = useState(false);
  const [surname, setSurname] = useState('');
  const [surnameInvalid, setSurnameInvalid] = useState(false);
  
  function handleSubmit(e) {
    e.preventDefault();
  
    if (!name) {
      setNameInvalid(true);
      return;
    }
  
    if (!surname) {
      setSurnameInvalid(true);
      return;
    }

  }


          <form on onSubmit={handleSubmit}>

            <label htmlFor="username"></label>
              <input
                type="text"
                id="username"
                className={`InputForm ${nameInvalid ? 'invalid' : ''}`}
                placeholder="Name"
                value={name}
                onChange={(e) => {
                  setName(e.target.value);
                  setNameInvalid(name.trim() === '');
                }}
                required
                onInvalid={(e) => {
                  e.preventDefault();
                  setNameInvalid(true);
                }}
              />

              <label htmlFor="usersurname"></label>
              <input
                type="text"
                id="usersurname"
                className={`InputForm ${surnameInvalid ? 'invalid' : ''}`}
                placeholder="Surname"
                value={surname}
                onChange={(e) => {
                  setSurname(e.target.value);

                  setNameInvalid(surname.trim() === '');
                }}
                required
                onInvalid={(e) => {
                  e.preventDefault();
                  setNameInvalid(true);
                }}
              />

            <button
              className='RegisterButton'
              type="button"
              onClick={(e) => {
                if (!surname) {
                  e.preventDefault();
                  setSurnameInvalid(true);
                  return;
                }
                handleStepChange("next");
              }}
            >Далее</button>

          </form>

CSS：

.InputForm.invalid {
  outline: 2px solid #fa05a0;
}
css

1 个回答

  1. Best Answer

    要验证并突出显示无效输入，您可以更改代码，如下所示：

    function checkValues(val) {
  return !!!val.trim();
}

function App() {
  const [name, setName] = useState("");
  const [nameInvalid, setNameInvalid] = useState(false);
  const [surname, setSurname] = useState("");
  const [surnameInvalid, setSurnameInvalid] = useState(false);

  function handleSubmit(e) {
    let flag = true; // флаг возможности отправки
    if (!checkValues(name)) {
      setNameInvalid(false);
      flag = true;
    } else {
      setNameInvalid(true);
    }

    if (!checkValues(surname)) {
      setSurnameInvalid(false);
      flag = true;
    } else {
      setSurnameInvalid(true);
    }

    if (flag) {
      fetch("someUrs", {
        method: "POST",
        body: JSON.stringify({ name, surname })
      });
    }
  }

  return (
    <>
      <label htmlFor="username"></label>
      <input
        type="text"
        id="username"
        className={`InputForm ${nameInvalid ? "invalid" : ""}`}
        placeholder="Name"
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
        required
      />

      <label htmlFor="usersurname"></label>
      <input
        type="text"
        id="usersurname"
        className={`InputForm ${surnameInvalid ? "invalid" : ""}`}
        placeholder="Surname"
        value={surname}
        onChange={(e) => {
          setSurname(e.target.value);
        }}
        required
      />

      <button className="RegisterButton" type="button" onClick={handleSubmit}>
        Далее
      </button>
    </>
  );
}

    该函数checkValues作为示例提供。您可以使用您的来检查输入的值。

    我还建议在 React 项目中放弃表单。例如，要将数据传输到服务器，请使用 fetch()。

    • 1

相关问题