Day11-React 表单验证篇-不使用 hook 或第三方函式库

React 的表单验证篇总共会三篇，这篇我们会自己手刻一个验证输入值是否合法的表单，而在後面两篇文章，我将会介绍使用 custom hook 及有名的第三方函式库去实作表单验证。

这篇文章不会注重 CSS 的样式，有兴趣的读者在跟着步骤时可以自行加入。

1. 简单做一个表单出来

const SimpleForm = () => {
  return (
    <form>
      <label htmlFor="name">Your Name</label>
      <input type="text" id="name" />
      <label htmlFor="email">Your E-Mail</label>
      <input type="email" id="email" />
      <button>Submit</button>
    </form>
  );
};

2. 将表单栏位会用到的 state、事件处理都加入

const emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;

const SimpleForm = () => {
  const [name, setName] = useState("");
  const [nameTouched, setNameTouched] = useState(false);
  const [email, setEmail] = useState("");
  const [emailTouched, setEmailTouched] = useState(false);

  const nameIsValid = name.trim() !== "";
  const emailIsValid = emailRule.test(email);

  const onChangeName = (e) => setName(e.target.value);
  const onBlurName = () => setNameTouched(true);
  const onChangeEmail = (e) => setEmail(e.target.value);
  const onBlurEmail = () => setEmailTouched(true);

  return (
    <form>
      <label htmlFor="name">Your Name</label>
      <input
        type="text"
        id="name"
        onChange={onChangeName}
        onBlur={onBlurName}
        value={name}
      />
      <label htmlFor="email">Your E-Mail</label>
      <input
        type="email"
        id="email"
        onChange={onChangeEmail}
        onBlur={onBlurEmail}
        value={email}
      />
      <button>Submit</button>
    </form>
  );
};

3. 接着为送出表单的按钮绑定事件

const SimpleForm = () => {
  const [name, setName] = useState("");
  const [nameTouched, setNameTouched] = useState(false);
  const [email, setEmail] = useState("");
  const [emailTouched, setEmailTouched] = useState(false);

  const nameIsValid = name.trim() !== "";
  const emailIsValid = emailRule.test(email);

  const onChangeName = (e) => setName(e.target.value);
  const onBlurName = () => setNameTouched(true);
  const onChangeEmail = (e) => setEmail(e.target.value);
  const onBlurEmail = () => setEmailTouched(true);

  const onFormSubmit = (e) => {
    e.preventDefault();

    if (!nameIsValid) setNameTouched(true);
    if (!emailIsValid) setEmailTouched(true);
    if (!nameIsValid || !emailIsValid) return;

    console.log("submit success!");
    console.log(name, email);

    // reset
    setName("");
    setNameTouched(false);
    setEmail("");
    setEmailTouched(false);
  };

  return (
    <form onSubmit={onFormSubmit}>
      <label htmlFor="name">Your Name</label>
      <input
        type="text"
        id="name"
        onChange={onChangeName}
        onBlur={onBlurName}
        value={name}
      />
      <label htmlFor="email">Your E-Mail</label>
      <input
        type="email"
        id="email"
        onChange={onChangeEmail}
        onBlur={onBlurEmail}
        value={email}
      />
      <button disabled={!nameIsValid || !emailIsValid}>Submit</button>
    </form>
  );
};

4. 最後加上错误的提示讯息

先加上一小段 CSS

.invalid {
  border: 1px solid red;
}

.error-text {
  color: red;
}

主程序的部分

const SimpleForm = () => {
  const [name, setName] = useState("");
  const [nameTouched, setNameTouched] = useState(false);
  const [email, setEmail] = useState("");
  const [emailTouched, setEmailTouched] = useState(false);

  const nameIsValid = name.trim() !== "";
  const emailIsValid = emailRule.test(email);

  const onChangeName = (e) => setName(e.target.value);
  const onBlurName = () => setNameTouched(true);
  const onChangeEmail = (e) => setEmail(e.target.value);
  const onBlurEmail = () => setEmailTouched(true);

  const onFormSubmit = (e) => {
    e.preventDefault();

    if (!nameIsValid) setNameTouched(true);
    if (!emailIsValid) setEmailTouched(true);
    if (!nameIsValid || !emailIsValid) return;

    console.log("submit success!");
    console.log(name, email);

    // reset
    setName("");
    setNameTouched(false);
    setEmail("");
    setEmailTouched(false);
  };

  const nameInputClasses = !nameIsValid && nameTouched ? "invalid" : "";
  const emailInputClasses = !emailIsValid && emailTouched ? "invalid" : "";

  return (
    <form onSubmit={onFormSubmit}>
      <label htmlFor="name">Your Name</label>
      <input
        type="text"
        id="name"
        onChange={onChangeName}
        onBlur={onBlurName}
        value={name}
        className={nameInputClasses}
      />
      {!nameIsValid && nameTouched && (
        <p className="error-text">Name must not be empty.</p>
      )}
      <label htmlFor="email">Your E-Mail</label>
      <input
        type="email"
        id="email"
        onChange={onChangeEmail}
        onBlur={onBlurEmail}
        value={email}
        className={emailInputClasses}
      />
      {!emailIsValid && emailTouched && (
        <p className="error-text">Please enter a valid email.</p>
      )}
      <button disabled={!nameIsValid || !emailIsValid}>Submit</button>
    </form>
  );
};

程序码范例(codesandbox)

透过以上步骤，就可以建立出简单的表单验证，有错误的提示文字外也有输入框边框变红色的警告提示，不过当表格要填入的栏位变多就会变得复杂。

因此下一篇将用 custom hook 去进行表单验证，将一些栏位输入的相关逻辑抽取出来。