[javascript] 43. 서식 검사(Forms validation) - 자바스크립트 강좌 JS / CSE

JavaScript Forms

1. JavaScript Form Validation

 HTML 서식 검사(form validation)은 자바스크립트에 의해 진행할 수 있습니다.

 서식 필드가 비어있을 경우, 아래 함수는 메시지를 알림창으로 띄우고 false를 반환하여 서식이 제출되는 것을 방지합니다.

 

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

 위 함수는 아래 서식이 제출되었을 때, 호출 됩니다.

 

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

2. HTML Form Validation

 HTML 서식 검사는 브라우저에 의해 자동적으로 수행되어 집니다.

 서식 필드가 비어 있는 경우, required 속성으로 서식이 제출되어 지는 것을 방지할 수 있습니다.

 

<form action="demo_form.asp" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

3. Data Validation

 데이터 검사(data validation)은 컴퓨터 입력이 깨끗하고, 올바르고, 유용한지에 대한 확증의 과정(process of ensuring)입니다.

 일반적인 검사 작업:

  - 모든 필요로 하는 필드를 채웠는지?

  - 올바른 날짜를 입력 했는지?

  - 숫자 필드에 텍스트를 입력 했는지?

 데이터 검사의 목적은 컴퓨터 어플리케이션에 올바른 입력을 했는지에 대한 확신을 주기 위해서 입니다.

 서버 측 검사(Server-side validation)은 입력 값이 서버에 보내지면 웹 서버에서 수행됩니다.

 클라이언트 측 검사(Client-side validation)은 서버에 보내지기 전에 웹 브라우저에서 수행됩니다.

 

4. HTML Constraint Validation

 HTML5는 제약 검사(Constraint validation)이라는 새로운 HTML 검사 개념을 소개됩니다.

 HTML 제약 검사는 아래를 기반으로 합니다:

  - HTML Input Attributes

  - CSS Pseudo Selectors

  - DOM Properties and Methods

4-1. Constraint Validation 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 a element
type	Defines the minimum value of an input element

 [ 출처: W3Schools ]

4-2. Constraint Validation 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

 [ 출처: W3Schools ]