Html input pattern, setCustomValidity, reportValidity 👍

input 의 pattern 속성을 통해 값의 valid 여부를 판별할 수 있게 할 수 있습니다.

pattern 속성에는 정규표현식이 들어가게 됩니다.

input 의 validity 메소드를 통해 ValidityState 객체를 load 할 수 있고 여기서 pattern의 통과 여부를 조회할 수 있습니다.

 

<form class="form" id="form">
  <input type="text" class="input" pattern="[0-9]+">
</form>

pattern 속성에는 정규표현식이 들어갑니다. 

정규표현식은 쉽지 않지만....  react에서 비제어 컴포넌트로 이용하고자 할때 html의 api를 이용하면 접근방법에 힌트를 얻을 수 있을것만 같습니다

2022.03.03 - [Frontend/React] - 제어 컴포넌트 vs 비제어 컴포넌트

 

아래는 input에 pattern 속성을 지정한 후에 validity를 통해 ValidityState 객체를 조회한 화면 입니다.

우리가 얻고자 하는 valid 값 외에도 다양한 속성이 있습니다.

이곳의 valid 값을 통해 input에 입력된 값이 적절한 값인지를 알수 있을것 같네요

 

만약 통과 하지 못했다면 setCustomValidity를 통해 사용자에게 표시해줄 경고 문구를 설정할 수 있고 

reportValidity 메소드를 통해 사용자에게 노출시켜 줄 수 있습니다.

const input = document.querySelector('.input')
const test = () => {
  const isValid = input.validity.valid
  if (!isValid) {
    input.setCustomValidity('this is wrong')
    input.reportValidity()
  }
}

input.addEventListener('change', test)

 

reportValidity를 하지 않으면 setCustomValidity에서 설정한 메시지는 사용자에게 보여지지 않습니다!

 



input에 pattern을 지정해 두면 form에서 submit을 하기 전에 input들의 pattern 통과 여부를 검증합니다

submit은 되지 않고 경고 문구를 출력해 줍니다!

 

submit전에 input들의 setCustomValidity를 설정 해두면 submit 버튼을 눌렀을때 customMessage를 띄워주므로 ux에 도움이 될수 있습니다!

 

---

 

input의 값의 변화여부를 탐지 할때 change 이벤트를 이용하면 input에서 focus out 되었을때만 이벤트가 발생합니다.

실시간으로 변화하는 값의 여부를 탐지하고 싶다면 keyup, keydown 과 같은 keypress 이벤트를 이용하여야 합니다.

 

 

 

See the Pen Untitled by 정우병 (@woobottle) on CodePen.