首先

在某个系统中，我们需要创建预订表单。
前端部分使用React进行开发。

由于这次我研究了一些验证函数并进行了实现，所以我将把它们整理备忘起来。

校验函数是什么？

起初，我們從「什麼是驗證函數？」這個問題開始討論。

当您填写预约表格时，如果有遗漏的填写项，可能会显示“有必填项未填写”的警示信息。
就是那个。

通过实现验证函数，可以实现以下功能。

• データ整合性の統一

必須項目が漏れたままフォーム入力完了を防ぐ

具體的的實施方法

在使用React实现验证函数时，我们主要使用以下两个事件处理程序来实现。在事件处理程序中调用验证函数。

• handleChange

handleBlur

让我们分别具体地看一看。

修改处理

当表单的输入值发生变化时，会调用的事件处理程序。
每当用户输入一个项目时，我们会检查输入字段的验证并进行错误处理。
换句话说，每次键入字符，错误都会显示在屏幕上。

失去焦点

当用户将焦点从输入字段移开时，将调用的事件处理程序。
当用户完成输入并移至下一项时，将输出错误信息。

样本代码

import React, { useState } from 'react';

const nameForm = () => {
  const [name, setName] = useState('');
  const [nameError, setNameError] = useState('');

  const validateName = () => {
    if (name.trim() === '') {
      setNameError('名前を入力してください');
    } else {
      setNameError('');
    }
  };

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleBlur = () => {
    validateName();
  };

  return (
    <div>
      <label htmlFor="name">名前</label>
      <input
        type="text"
        id="name"
        value={name}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {nameError && <p style={{ color: 'red' }}>{nameError}</p>}
    </div>
  );
};

export default nameForm;