【React hook】手把手學會 Form 表單驗證與 UX 優化全教學

1. 為什麼表單驗證很重要？
2. 表單驗證的三階段？
3. 如何優化表單設計？

為什麼表單驗證很重要？

1. 資料型態可能不符合
2. 需要在使用者輸入錯誤時，提示錯誤並協助更新狀態
3. 使用者上傳錯誤資訊，導致 Server 收到錯誤資料

前端在表單驗證的角色

表單驗證的三階段

1. 當使用者輸入時
2. 當表格 lost focus 時
3. 當表格被 Submit 時

1. Input：當使用者在輸入時，需要至少讓使用者有輸入正確的時間點。並要在確認輸入資訊無效時，才提供錯誤 feedback。
2. Lost Focus：我們預設使用者會輸入正確資訊，真的錯誤才提醒。對於應用在未被編輯的表單時，非常有效。
3. Submit：資料格式可能錯誤，但我們需要在使用者 Submit 後，才根據他的答案提示錯誤；但帶來的缺點，就是 feedback 太晚。

一、當使用者輸入時

A. 如何獲取使用者的輸入內容？

1. 使用 Event handler 抓取資料
2. 使用 useRef 獲取 DOM 資料

1. 使用 Event Handler：優點是能夠做到更細緻的資料驗證，能夠即時給予使用者輸入回饋。但部分情境不需要追蹤每一個輸入值，會導致無意義的重渲染。
2. 使用 useRef：能夠精簡地獲得資料驗證，但通常僅會使用在上傳（Submit）資料時。因為他需要 Callback，才能觸發當時在 DOM 上的資料狀態；缺點則是無法做到較細緻即時輸入驗證。

1.Event Handler 的寫法

1. 使用 Handler 抓取當前的 event
2. 使用 event.target.value 抓到 input 的值
3. 使用 setEnteredInput 更新輸入值
4. 將 enteredInput 使用於資料驗證

const [enteredInput, setEnteredInput] = useState("");
const submitHandler = (event) => {
  // submit data...
};
const inputChangeHandler = (event) => {
  setEnteredInput(event.target.value);
};
<form onSubmit={submitHandler}>
  <label htmlFor="name">Your Name</label>
  <input type="text" id="name" onChange={inputChangeHandler} />
</form>

2.useRef 的寫法

1. 使用 useRef 設定監聽器
2. 將監聽器傳入 Input 的屬性 ref
3. 在 Submit 時使用監聽到的資料 inputRef
4. 從 inputRef.current.value 獲取 Input 的值

const inputRef = useRef();
const submitHandler = (event) => {
  submitDataHandler(inputRef.current.value);
};
return (
  <form onSubmit={submitHandler}>
    <label htmlFor="name">Your Name</label>
    <input type="text" id="name" ref={inputRef} />
  </form>
);

二、當表格 Lost focus 時

1. 檢驗輸入資料的正確性
2. 檢驗表格是否輸入過
3. 顯示錯誤提示訊息
4. 即時驗證與更新訊息

A. 檢驗輸入資料的正確性

為空值 input 進行驗證

const nameValidation = (name) => {
  const isNameInputValid = name.trim().length !== 0;
  return isNameInputValid;
};

為 Email 進行驗證：

const emailValidation = (email) => {
  const re = /^(([^<>()\\[\\]\\\\.,;:\\s@"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@"]+)*)|(".+"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

B. 檢驗表格是否曾輸入過

const [enteredNameInput, setEnteredNameInput] = useState("");
const [isNameInputTouched, setIsNameInputTouched] = useState(false);
// DEFINE Callback function
const inputNameBlurHandler = (event) => {
    setIsNameInputTouched(true);
  };
// CALLBACK WHEN INPUT LOST FOCUS
<input onBlur={inputBlurHandler} />

C. 顯示錯誤提示訊息

使用 CSS Class，控制錯誤訊息顯示

// VALIDATE nameInput is INVALID
const nameInputIsInvalid = isNameInputTouched && !isNameInputValid;
// SET INPUT CLASS WITH ERROR STATE
const nameInputClass = nameInputIsInvalid
    ? "form-control invalid"
    : "form-control";
// DISPLAY error message WHEN INPUT IS INVALID
<div className={nameInputClass}>
  <label htmlFor="name">Your Name</label>
  <input
    value={enteredNameInput}
    type="text"
    id="name"
    onBlur={inputNameBlurHandler}
    onChange={inputNameChangeHandler}
  />
  {nameInputIsInvalid && <p className="error-text">Name must not be empty.</p>}
</div>;

D. 即時驗證與更新訊息

利用驗證，暫時關閉提交（Submit）按鈕

const [enteredEmailInput, setEnteredEmailInput] = useState("");
const [isEmailInputTouched, setIsEmailInputTouched] = useState(false);
const [enteredNameInput, setEnteredNameInput] = useState("");
const [isNameInputTouched, setIsNameInputTouched] = useState(false);
const checkEmail = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
const isEmailInputValid = checkEmail.test(enteredEmailInput);
const isNameInputValid = enteredNameInput.trim().length !== 0;
const nameInputIsInvalid = isNameInputTouched && !isNameInputValid;
const emailInputIsInvalid = isEmailInputTouched && !isEmailInputValid;
// APPLY FOR MANAGING BUTTON STATUS
const isFormValid = isNameInputValid && isEmailInputValid;
// JSX SUBMIT BUTTON
<div className="form-actions">
  <button disabled={!isFormValid}>Submit</button>
</div>;

三、當表格被 Submit 時

1. 多表格驗證
2. 重置表格

A. 多表格驗證

const submitHandler = (event) => {
  event.preventDefault();
  // DEFAULT USER HAS TOUCHED INPUT DUE TO CONFIRMATION
  setIsFormTouched(true);
  // COULD NOT SUBMIT IF FORM IS NOT VALID
  if (!isFormValid) {
    // DROP OUT DUE TO return
    return;
  }
  fetch(url, { method: "POST", body: ...})
};

B. 重置表格

1. 重置 State
2. 操控 useRef

// STATE UPDATE
const [enteredInput, setEnteredInput] = useState("");
const [isFormTouched, setIsFormTouched] = useState("");
const submitHandler = (event) => {
  event.preventDefault();
  ...
  setEnteredInput("");
  setIsFormTouched(false);
};
<input value={enteredInput} />

// useRef UPDATE | NOT RECOMMAND!
const [isFormTouched, setIsFormTouched] = useState("");
const inputRef = useRef();
const submitHandler = (event) => {
  event.preventDefault();
  inputRef.current.value = "";
  setIsFormTouched(false);
};
<input ref={inputRef} />

優化表單設計

1. 拆分個別元件
2. 使用 Custom hook
3. 使用第三方套件

A. 拆分個別元件

B. 使用 Custom hook

// in src/hooks/use-input.js
import { useState } from "react";
// MUST start with "use"
const useInput = (validationFunc) => {
  const [enteredValue, setEnteredValue] = useState("");
  const [isTouched, setIsTouched] = useState(false);
  const isValueValid = validationFunc(enteredValue);
  const hasError = isTouched && !isValueValid; // false and true
  const valueChangeHandler = (event) => {
    setEnteredValue(event.target.value);
  };
  const valueBlurHandler = (event) => {
    setIsTouched(true);
  };
  const resetValueHandler = () => {
    setEnteredValue("");
    setIsTouched(false);
  };
  const inputClassHandler = () => {
    const className = hasError ? "form-control invalid" : "form-control";
    return className;
  };
  return {
    value: enteredValue,
    hasError: hasError,
    isValueValid: isValueValid,
    inputClass: inputClassHandler(),
    reset: resetValueHandler,
    valueChangeHandler,
    valueBlurHandler,
  };
};
export default useInput;

Custom hook 實際案例應用：

import useInput from "../hooks/use-input";
const SimpleForm = (props) => {
  const emailValidation = (email) => {
    const checkEmailRegExp = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
    const isEmailInputValid = checkEmailRegExp.test(email);
    return isEmailInputValid;
  };
  const nameValidation = (name) => {
    const isNameInputValid = name.trim().length !== 0;
    return isNameInputValid;
  };
  const {
    value: emailInput,
    hasError: emailInputHasError,
    isValueValid: isEmailInputValid,
    inputClass: emailInputClass,
    reset: resetEmailInput,
    valueChangeHandler: emailInputChangeHandler,
    valueBlurHandler: emailInputBlurHandler,
  } = useInput(emailValidation);
  const {
    value: nameInput,
    hasError: nameInputHasError,
    isValueValid: isNameInputValid,
    inputClass: nameInputClass,
    reset: resetNameInput,
    valueChangeHandler: nameInputChangeHandler,
    valueBlurHandler: nameInputBlurHandler,
  } = useInput(nameValidation);
  // IF INPUT HAS ERROR, THEN SET BUTTON DISABLE
  const isFormValid = !nameInputHasError && !emailInputHasError;
  const submitHandler = (event) => {
    event.preventDefault();
    // CHECK WHETHER EITHER INPUT IS INVALID, THEN DROPOUT
    if (!isNameInputValid || !isEmailInputValid) {
      return;
    }
    resetEmailInput();
    resetNameInput();
    console.log(emailInput);
    console.log(nameInput);
  };
  return (
    <form onSubmit={submitHandler}>
      <div className={emailInputClass}>
        <label htmlFor="email">Your Email</label>
        <input
          value={emailInput}
          type="email"
          id="email"
          onBlur={emailInputBlurHandler}
          onChange={emailInputChangeHandler}
        />
        {emailInputHasError && (
          <p className="error-text">Email format is not allowed.</p>
        )}
      </div>
      <div className={nameInputClass}>
        <label htmlFor="name">Your Name</label>
        <input
          value={nameInput}
          type="text"
          id="name"
          onBlur={nameInputBlurHandler}
          onChange={nameInputChangeHandler}
        />
        {nameInputHasError && (
          <p className="error-text">Name must not be empty.</p>
        )}
      </div>
      <div className="form-actions">
        <button disabled={!isFormValid}>Submit</button>
      </div>
    </form>
  );
};

C.使用第三方套件

結論

參考資料

• React - The Complete Guide 2023 (incl. React Router & Redux)
• Day11-React 表單驗證篇-不使用 hook 或第三方函式庫
• 學習如何使用React.js組件表單驗證