Frontend Academy · 강의

양식 검증 속성

required, minlength, maxlength, pattern, min, max, step 속성을 적용하고 :valid 및 :invalid 의사 클래스로 검증 상태의 스타일을 지정합니다.

양식 검증 속성은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

브라우저 기본 제공 검증

HTML5는 속성을 통해 기본 제공 양식 검증을 제공합니다. 양식을 제출하면 브라우저가 각 필드를 검증합니다. 검증에 실패하면 기본 제공 오류 도움말을 표시하고 제출을 막으므로, 기본적인 경우에는 JavaScript가 필요하지 않습니다.

required

입력란, 선택 목록 또는 여러 줄 입력란에 required를 추가하면 필수 항목이 됩니다. 양식을 제출할 때 필드가 비어 있으면 브라우저가 오류를 표시합니다.

<input type="text" name="name" required>
<select name="plan" required>
  <option value="">Choose plan...</option>
  <option value="free">Free</option>
</select>

minlength와 maxlength

minlength는 최소 문자 수를 적용합니다. maxlength는 최대 문자 수를 초과하는 입력을 막습니다. 두 속성을 함께 사용해 비밀번호 복잡도를 적용하거나 댓글 길이를 제한할 수 있습니다.

<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>

숫자 입력의 min, max, step

min과 max는 숫자 및 날짜 입력의 유효 범위를 설정합니다. step은 증가 단위를 설정하며, 범위(5%), 소수 정밀도, 날짜만 입력하는 경우에 유용합니다.

<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">

pattern — 정규 표현식 검증

pattern은 JavaScript 정규 표현식을 받습니다. 양식을 제출하려면 입력값이 패턴과 일치해야 합니다. 브라우저의 오류 도움말에 예상 형식을 설명하도록 title을 포함하십시오.

<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
  title="Enter a valid UK postcode (e.g. SW1A 1AA)">

<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">

novalidate — 기본 제공 검증 비활성화

novalidate를 <form> 요소에 추가하면 브라우저의 모든 기본 제공 검증을 비활성화합니다. 사용자 지정 JavaScript 검증을 구현할 때 사용하면 사용자가 일관된 한 가지 경험을 할 수 있습니다.

<form novalidate id="signup">
  <!-- custom validation in JS -->
</form>

JavaScript에서 유효성 검사하기

제약 조건 유효성 검사 API를 사용하면 프로그래밍 방식으로 유효성을 확인할 수 있습니다. input.validity(ValidityState 객체), input.checkValidity()(불리언 값 반환), input.setCustomValidity(message)(사용자 지정 오류 설정)를 사용합니다.

const email = document.querySelector('#email');
if (!email.checkValidity()) {
  console.log(email.validationMessage); // browser's error text
  console.log(email.validity.valueMissing); // true if empty
  console.log(email.validity.typeMismatch); // true if not email format
}

setCustomValidity

setCustomValidity(message)에 비어 있지 않은 문자열을 전달하면 사용자 지정 메시지와 함께 입력 필드를 유효하지 않은 상태로 표시합니다. 빈 문자열을 전달하면 오류를 지웁니다. 사용자 이름의 중복 여부처럼 서버에서 유효성을 검사하는 필드에 유용합니다.

const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
  username.setCustomValidity('This username is already taken.');
} else {
  username.setCustomValidity(''); // valid
}

:valid 및 :invalid 의사 클래스

CSS 의사 클래스를 사용하여 유효한 입력 필드와 유효하지 않은 입력 필드의 스타일을 지정합니다. 주의할 점은 사용자가 상호작용하기 전에도 입력 필드가 :invalid 상태라는 것입니다. 먼저 ‘상호작용됨’ 클래스를 추가하려면 :user-invalid(최신 브라우저) 또는 JavaScript를 사용합니다.

/* Modern approach */
input:user-invalid {
  border-color: #e53e3e;
}
input:user-valid {
  border-color: #38a169;
}

/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }

reportValidity로 사용자 지정 오류 메시지 표시하기

form.reportValidity()는 모든 필드에 브라우저의 기본 유효성 검사 UI를 표시합니다. 사용자 지정 유효성 메시지를 설정한 후 사용하면 제출 이벤트를 기다리지 않고 사용자에게 메시지를 보여 줄 수 있습니다.

접근성을 고려한 오류 표시 패턴

다음 방법으로 인라인 오류를 표시합니다. 1) 입력 필드에 aria-invalid="true"를 설정합니다. 2) aria-describedby로 연결된 표시 가능한 오류 단락을 추가합니다. 3) 첫 번째 유효하지 않은 필드로 포커스를 이동합니다. 이 방법은 화면 읽기 프로그램 사용자를 포함한 모든 사용자에게 도움이 됩니다.

빠른 확인

텍스트 입력 필드를 최대 280자로 제한하는 속성은 무엇입니까?

복습: 폼 유효성 검사 속성

required, minlength/maxlength, min/max/step, pattern은 모두 브라우저 기본 유효성 검사를 무료로 제공합니다. 사용자 지정 JS 유효성 검사를 구현할 때는 novalidate를 사용합니다. 제약 조건 유효성 검사 API를 사용하면 JavaScript에서 유효성 상태에 접근할 수 있습니다. 사용자가 상호작용한 후에는 :user-invalid를 사용하여 오류 스타일을 지정합니다.

자주 묻는 질문

“양식 검증 속성” 강의는 무료인가요?

네 — “양식 검증 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“양식 검증 속성”에서 뭘 배우나요?

required, minlength, maxlength, pattern, min, max, step 속성을 적용하고 :valid 및 :invalid 의사 클래스로 검증 상태의 스타일을 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“양식 검증 속성” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기