자바스크립트 form 구현하기 . 데이터등

내가 알기로는 리액트와 넥스트에서 좀 더 간편하게 사용이가능한걸로 알고있다.

const Form = () => {
  // 폼 상태를 저장할 객체
  const formState = {};

  // 폼 필드를 등록하는 함수
  function register(name, validator = value => true) {
    // 필드 등록 객체는 이름(name)과 검증 함수(validator)를 가집니다.
    // 값(value)은 빈 문자열로 초기화됩니다.
    formState[name] = {
      value: '',
      validator,
    }
    console.log(formState, "레지스터");
  }

  // 폼의 유효성을 검사하는 함수
  function validate() {
    // 모든 필드를 검사하여 하나라도 실패하면 false를 반환합니다.
    return Object
      .values(formState)
      .reduce(
        (flag, { value, validator }) => validator(value) && flag, true
      )
  }

  // 폼 데이터를 가져오는 함수
  function getFormData() {
    // 폼 상태 객체를 반복하며 각 필드의 값을 가져와서 하나의 객체로 반환합니다.
    // 예: { name: 'Kim', age: 30 }
    return Object
      .entries(formState)
      .reduce(
        (formData, [key, { value }]) => ({ ...formData, [key]: value })
      , {})
  }

  // 필드의 값을 설정하는 함수
  function setValue(name, value) {
    // 해당 필드의 값을 업데이트합니다.
    formState[name] = {
      ...formState[name],
      value,
    };
  }

  // 외부에서 사용할 수 있는 함수를 반환합니다.
  return {
    register,     // 폼 필드 등록 함수
    validate,     // 폼 유효성 검사 함수
    getFormData,  // 폼 데이터 가져오기 함수
    setValue,     // 필드 값 설정 함수
  };
};

export default Form;

 

챗 gpt 용 간편한 코드

const Form = () => {
  const formState = {};

  function register(name) {
    // 필드 등록 함수, 필드 값을 빈 문자열로 초기화합니다.
    formState[name] = '';
  }

  function validate() {
    // 모든 필드의 값을 검사하고 하나라도 빈 값이면 false를 반환합니다.
    return Object.values(formState).every(value => value !== '');
  }

  function getFormData() {
    // 폼 데이터를 가져오는 함수
    return formState;
  }

  function setValue(name, value) {
    // 필드의 값을 설정하는 함수
    formState[name] = value;
  }

  return {
    register,     // 폼 필드 등록 함수
    validate,     // 폼 유효성 검사 함수
    getFormData,  // 폼 데이터 가져오기 함수
    setValue,     // 필드 값 설정 함수
  };
};

export default Form;