ValidityState
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
ValidityState
인터페이스는 제약 유효성 검사에 대해 요소가 가질 수 있는 유효성 상태를 나타내며, 요소의 값이 유효하지 않은 경우 그 이유에 대한 설명을 도와줍니다.
속성
각각의 Boolean
속성에 대해, true
값은 해당 이유로 인해 값의 유효성 검사를 실패했음을 나타냅니다. valid
속성은 예외로서 true
는 모든 제약조건을 통과했음을 의미합니다.
badInput
(en-US) 읽기 전용-
사용자가 입력한 값을 브라우저가 변환하지 못했음을 나타내는
Boolean
값입니다. customError
읽기 전용-
setCustomValidity()
(en-US) 메서드를 사용해 요소의 사용자 지정 유효성 메시지를 비어있지 않은 문자열로 설정했는지를 나타내는Boolean
값입니다. patternMismatch
(en-US) 읽기 전용-
값이 주어진
pattern
(en-US) 특성을 만족하지 못하는지 나타내는Boolean
값입니다 참일 경우, CSS:invalid
(en-US) 의사 클래스를 만족합니다. rangeOverflow
(en-US) 읽기 전용-
값이 주어진
max
(en-US) 특성보다 큰지 나타내는Boolean
값입니다. 참일 경우, CSS:invalid
(en-US)와:out-of-range
(en-US) 의사 클래스를 만족합니다. rangeUnderflow
(en-US) 읽기 전용-
값이 주어진
min
(en-US) 특성보다 작은지 나타내는Boolean
값입니다. 참일 경우, CSS:invalid
(en-US)와:out-of-range
(en-US) 의사 클래스를 만족합니다. stepMismatch
(en-US) 읽기 전용-
값이 주어진
step
(en-US) 특성의 규칙을 만족하지 않는지 (즉, 값을 스텝 값으로 나눌 수 없는지) 나타내는Boolean
값입니다. 참일 경우, CSS:invalid
(en-US)와:out-of-range
(en-US) 의사 클래스를 만족합니다. tooLong
(en-US) 읽기 전용-
값이
HTMLInputElement
(en-US) 또는HTMLTextAreaElement
(en-US) 객체의maxlength
값보다 긴지 나타내는Boolean
값입니다. 참일 경우, CSS:invalid
(en-US)와:out-of-range
(en-US) 의사 클래스를 만족합니다. tooShort
(en-US) 읽기 전용-
값이
HTMLInputElement
(en-US) 또는HTMLTextAreaElement
(en-US) 객체의minLength
값보다 짧은지 나타내는Boolean
값입니다. 참일 경우, CSS:invalid
(en-US)와:out-of-range
(en-US) 의사 클래스를 만족합니다. typeMismatch
(en-US) 읽기 전용-
값이 입력 유형에서 요구하는 형식(
type
(en-US)이email
이나url
인 경우)에 맞지 않는지 나타내는Boolean
값입니다. 참일 경우, CSS:invalid
(en-US) 의사 클래스를 만족합니다. valid
읽기 전용-
요소가 모든 유효성 제약을 만족하여 유효한 상태인지 나타내는
Boolean
값입니다. 참일 경우 CSS:valid
(en-US) 의사 클래스를, 거짓일 경우:invalid
(en-US) 의사 클래스를 만족합니다. valueMissing
(en-US) 읽기 전용-
요소가
required
(en-US) 특성을 가지고 있지만 값은 없는 경우 참인Boolean
값입니다. 참일 경우, CSS:invalid
(en-US) 의사 클래스를 만족합니다.
명세
Specification |
---|
HTML Standard # the-constraint-validation-api:validitystate-3 |
브라우저 호환성
BCD tables only load in the browser