HTML - HTML Form Validation

Form Validation이란?

 

직역하면 폼 검증. 유명한 웹 사이트 등록 Form을 보면, 사이트에서 원하는 포맷으로 데이터를 입력하지 않은 경우 경고 피드백을 주는 것을 볼 수 있다.

 

 

간략 예시. 이메일 포맷 경고를 볼 수 있다.

 

 

 

위와 같은 방식으로 사용자에게 피드백을 주며 서버쪽에 올바른 포맷의 데이터가 전달되는 것을 보장하는 일을 Form Validation 이라고 한다. 그러면 Form Validation은 어떤 방식으로 할까?

 

 

 

내장 Form Validation

 

HTML5 form controls의 특별한 기능 중 하나는 JavaScript에 의지하지 않고 사용자 데이터를 검증하는 기능이다.

이 기능은 form의 validation 속성으로 사용 가능하다.

 

• required  : 제출 전, 해당 영역이 채워 저야 함을 나타냄
• minlength : 문자열 데이터의 최소 길이
• maxlength : 문자열 데이터의 최대 길이
• min : 정수형 데이터의 최소값
• max : 정수형 데이터의 최댓값
• type : 데이터의 종류
• pattern : 입력되는 데이터가 따라야 하는 regular expression

 

예시 - required

 <form>
    <input required />
    <button type="submit">Submit</button>
  </form>

 

 

 

input의 속성으로 required를 추가하고 아무것도 입력하지 않고 submit 버튼을 클릭하면?

 

 

 

 

 

경고문을 날린다.

 

 

---

출처

 

- https://jeonghwan-kim.github.io/dev/2020/06/08/html5-form-validation.html

HTML5 폼 검증에 대해 정리해 보자

- https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

Client-side form validation - Learn web development | MDN