[유효성검사][reportvalidity()] html이 가지고 있는 유효성 검사 규칙으로 간단한 검사할때 사용 할 만한 메소드

◼ reportvalidity() 

JavaScript로 HTML Form 요소를 조작할 때 사용할 수 있는 메서드 중 하나입니다.

이 메서드는 Form 요소의 유효성을 검사하고, 검사 결과에 따라 적절한 동작을 수행할 수 있도록 해줍니다.

사용자가 데이터를 입력하고 제출하기 전에 이 메서드를 사용하여 유효성을 검사하여 오류를 감지하고 처리할 수 있습니다.

 

 

 

 

◼ reportvalidaity() 주로 사용되는 

HTML Form 요소의 내장 유효성 검사를 수행합니다.

HTML5에서 정의된 유효성 검사 규칙을 지원하는 곳에 주로 사용됩니다.

그래서 간단한 validation을 사용할때 유용합니다.

• javascript로 만들어진 유효성 검사는 적용이 안됩니다. (html 요소가 가진 유효성 검사 규칙만 적용)

 

[html 유효성 검사 규칙]

1. required: 필수 입력 필드 여부를 검사합니다.
2. minlength 및 maxlength: 입력 값의 최소 및 최대 길이를 검사합니다.
3. pattern: 정규 표현식을 사용하여 입력 값의 형식을 검사합니다.
4. type: 입력 값의 유형에 따라 기본적인 유효성을 검사합니다(예: 이메일, 숫자, 날짜 등).
5. min 및 max: 입력 값의 최소 및 최대 값 범위를 검사합니다(숫자 또는 날짜 입력 필드에서 사용).

 

 

 

 

◼ 예시 코드 

[reportValidity 사용 X]

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const [isValid, setIsValid] = useState(true);

  const handleChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    setIsValid(
      value.length >= 5 && value.length <= 10 && /^[a-zA-Z0-9]+$/.test(value)
    );
  };

  const handleSubmit = () => {
    if (isValid) {
      console.log('입력이 유효합니다.');
      // 유효한 경우 추가적인 로직을 작성할 수 있습니다.
    } else {
      console.log('입력이 유효하지 않습니다.');
    }
  };

  return (
    <div style={{ width: 500, margin: '100px auto' }}>
      <form>
        <input
          className="input__element"
          type="text"
          value={inputValue}
          onChange={handleChange}
          required
          minLength={5}
          maxLength={10}
          pattern="[a-zA-Z0-9]+"
        />
        <br />
        <br />
        <button
          type="button"
          className="button--fill-primary button__size-56 "
          onClick={handleSubmit}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

export default MyForm;

 

 

 

 

 

 

[reportValidity 사용 O]

function Main() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    // reportValidity() 만 작성하면 해당요소에 있는 validation에 대해
    // 자동으로 앍어들여 validation 검사를 진행하여 에러를 발생시킵니다
    if (inputRef.current.reportValidity()) {
      console.log('입력이 유효합니다.');
      // 유효한 경우 추가적인 로직을 작성할 수 있습니다.
    } else {
      console.log('입력이 유효하지 않습니다.');
    }
  };

  return (
    <div style={{ width: 500, margin: '100px auto' }}>
      <form>
        <input
          className="input__element"
          type="text"
          ref={inputRef}
          required
          minLength={5}
          maxLength={10}
          pattern="[a-zA-Z0-9]+"
        />
        <br />
        <br />
        <button
          type="button"
          className="button--fill-primary button__size-56 "
          onClick={handleSubmit}
        >
          Submit
        </button>
      </form>
    </div>
  );
}

export default Main;

 

 

[reportValidity 사용 예시 이미지]

 

[pattern 에러]

[min length 에러]

[required 에러]

 

 

 

 

 

 

[SAMPLE] reportvalidity 

https://googlechrome.github.io/samples/report-validity/

 

[참고]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity