JavaScript 폼

JavaScript 양식 검증

HTML 양식 검증은 JavaScript로 완료할 수 있습니다.

양식 필드 (fname)가 비어 있으면, 이 함수는 메시지를 표시하고 false를 반환하여 양식이 제출되지 않도록 방지합니다:

JavaScript 예제

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("이름은 필수입니다");
    return false;
  }
}

양식을 제출할 때 이 함수를 호출할 수 있습니다:

HTML 양식 예제

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
이름: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

본인이 직접 시도해 보세요

JavaScript는 숫자 입력을 검증할 수 있습니다

JavaScript는 일반적으로 숫자 입력을 검증하는 데 사용됩니다:

1에서 10 사이의 숫자를 입력하세요:

본인이 직접 시도해 보세요

자동 HTML 양식 검증

HTML 양식 검증은 브라우저가 자동으로 수행할 수 있습니다:

fname 필드가 비어 있으면 required 이 속성은 이 양식을 제출하지 않도록 방지합니다:

HTML 양식 예제

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

본인이 직접 시도해 보세요

힌트:인터넷 익스플로러 9 또는 이전 버전에서 자동 HTML 테스트 검증은 작동하지 않습니다.

데이터 검증

데이터 검증은 사용자 입력이 깨끗하고 올바르며 유용하도록 보장하는 과정입니다.

типичные задачи проверки данных:

  • 사용자가 모든 필수 필드를 입력했는지 확인하세요?
  • 사용자가 유효한 날짜를 입력했는지 확인하세요?
  • 사용자가 숫자 필드에 텍스트를 입력했는지 확인하세요?

대부분의 경우, 데이터 검증의 목적은 사용자 입력이 올바르게 보장되는 것입니다.

검증은 많은 다른 방법으로 정의되고, 많은 다른 방식으로 배포될 수 있습니다.

서버 측 검증은 입력이 서버로 전송된 후 Web 서버가 수행합니다.

客户端은 Web 브라우저가 입력을 Web 서버로 전송하기 전에 입력을 검증합니다.

HTML 제약 검증

HTML5는 새로운 HTML 검증 개념을 도입했습니다. 이는 제약 검증으로 알려져 있습니다.

HTML 제약 검증은 다음을 기반으로 합니다：

  • 제약 검증 HTML input 속성
  • 제약 검증 CSS伪选择자
  • 제약 검증 DOM 속성 및 메서드

제약 검증 HTML input 속성

속성 설명
disabled input 요소를 비활성화합니다。
max input 요소의 최대 값을 정의합니다。
min input 요소의 최소 값을 정의합니다。
pattern input 요소의 값 패턴을 정의합니다。
required input 필드가 필수입니다.
type input 요소의 타입을 정의합니다。

전체 목록을 보려면 방문하십시오 HTML 입력 속성。

제약 검증 CSS伪选择자

선택자 설명
:disabled disabled 속성을 정의한 input 요소를 선택합니다。
:invalid 유효하지 않은 값을 가진 input 요소를 선택합니다。
:optional required 속성을 정의하지 않은 input 요소를 선택합니다。
:required required 속성을 정의한 input 요소를 선택합니다。
:valid 유효한 값을 가진 input 요소를 선택합니다。

전체 목록을 보려면 방문하십시오 CSS伪选择자。