React에서 폼(Form)화면 작성시 로그인 화면에서 아이디 또는 비밀번호는 필수로 입력하게하거나, 회원가입 화면에서 비밀번호 입력시 특수문자나 소문자, 대문자 또는 숫자 등을 섞어서 입력하도록 유효성 검사를 진행할때가 있습니다. React를 사용한다면 상태(state)를 통해서도 충분히 입력값의 유효성검사를 진행할 수 있지만, HTML의 에서도 유효성 검사와 관련하여 다양한 기능을 제공하고 있으니 한번 살펴보도록 하겠습니다. 현재 유효성 검사 상태를 나타내는 ValidityState 요소는 현재 유효성 상태를 나타내는 validity(ValidityState)값을 가지고 있으며, 요소의 여러가지 attribute 설정과 입력값에 의해 validity의 상태가 결정됩니다. // App.tsx impor..

HTML에서 요소는 required나 pattern, minLength, maxLength와 같은 속성들을 통하여 현재 입력된 값에대한 유효성 검사를 할수 있습니다. 일반적으로는 해당 요소가 포함된 form에서 submit요청이 발생하면 먼저 포함된 입력 요소들의 유효성 검사를 진행하고, 유효성 검사를 통과하지 못하면 submit을 더이상 진행하지 않고 onInvalid를 호출하게됩니다. 또한 checkValidity나 reportValidity 함수를 호출하여 즉시 유효성 검사를 진행할수도 있습니다. export default function App() { const [_invalid, _setInvalid] = useState(false); function _onBlur(event: FocusEven..