자바스크립트 폼 (Forms)

폼 유효성검사

HTML 폼 유효성검사는 자바스크립트로 수행할 수 있습니다.

폼 필드(fname)가 비어있으면, 이 함수는 메시지로 경고하고, false를 반환합니다. 폼을 전송하지 못하게 합니다:

자바스크립트 예제

이 함수는 폼을 전송할 때 호출됩니다:

HTML Form 예제


숫자(Numeric Input) 유효성검사

자바스크립튼 숫자 입력 유효성검사를 할 수 있습니다:

1에서 10 사이의 숫자를 입력하십시오.


자동 HTML 폼 유효성검사

HTML HTML 폼 유효성검사를 브라우저가 자동으로 수행할 수 있습니다:

폼 필드(fname)가 비어 있으면, required 속성이 이 양식을 전송하지 못하게 합니다:

HTML Form 예제


데이터 유효성검사

데이터 유효성검사는 사용자가 깨끗하고 정확하고 유용한 내용을 입력하게 하는 프로세스입니다.

일반적인 유효성검사는 다음과 같습니다:

  • 필수 필드를 채웠는지?
  • 유효한 날짜를 입력했는지?
  • 숫자 필드에 텍스를 입력했는지?

대부분 사용자가 정확하게 입력하게 하는 것이 유효성검사의 목적입니다.

유효성검사는 매우 다양한 방법으로 정의하고, 다양한 방법으로 사용할 수 있습니다.

서버의 유효성검사는 웹 서버에서 수행한 다음, 입력된 내용이 서버에 전송됩니다.

클라이언트의 유효성검사는 웹 브라우저에서 수행한 다음, 입력된 내용이 서버에 전송됩니다.


HTML 제약조건 유효성검사

HTML5에서 제약조건 유효성검사(constraint validation)라는 HTML 유효성검사 개념을 도입했습니다.

HTML 제약조검 유효성검사는 다음을 기반으로 합니다:

  • HTML Input Attributes 제약조검 검증
  • CSS Pseudo Selectors 제약조검 검증
  • DOM Properties and Methods 제약조검 검증

HTML Input Attributes 제약조검 검증

Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element
min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element
required Specifies that the input field requires an element
type  Specifies the type of an input element

HTML
Input Attributes
를 참조하십시오.


CSS Pseudo Selectors 제약조건 유효성검사

Selector Description
:disabled Selects input elements with the "disabled" attribute specified
:invalid Selects input elements with invalid values
:optional Selects input elements with no "required" attribute specified
:required Selects input elements with the "required" attribute specified
:valid Selects input elements with valid values

CSS
Pseudo Classes
를 참조하십시오.

출처: JavaScript Forms

카테고리

댓글 남기기