html5 양식 유효성 검사

Question

검증이 유효하지 않은 경우 필수, 패턴 등 HTML5의 기본 검증 상자를 어떻게 구현하나요? 다른 제약 조건이 충족되지 않아 유효하지 않은데 다른 내용이 포함된 프롬프트 상자가 나타나는 이유는 무엇입니까? 무효 이벤트와 유효성 속성을 결합하여 구현하는 건가요? setCustomValidity() 메서드는 어떻게 작동하나요? 이 내용은 읽을수록 점점 더 혼란스러워지는 것 같아서 전문가의 조언을 구합니다...

Answer 1

MDN에서 양식 확인을 확인해 보세요. 간단한 데모를 따라하시면 ​​천천히 이해하실 수 있을 것입니다.

Answer 2

필수: 공백 확인(예:

) 으아악

input[type=text] 값이 비어 있으면 프롬프트 상자가 나타나고 양식 제출이 금지됩니다.
pattern: 정규식과 일치합니다. 예:

으아악

입력[type=text] 값이 3자리가 아닌 경우 제출 버튼을 클릭하면 프롬프트가 표시됩니다