JavaScript Validation API

DOM의 제약 검증 메서드와 속성

메서드

메서드 설명
checkValidity() input 요소가 유효한 데이터를 포함하고 있으면 true를 반환합니다。
setCustomValidity() input 요소의 validationMessage 속성을 설정합니다。

속성

속성 설명
validity input 요소의 유효성과 관련된 부울 속성을 포함합니다。
validationMessage 유효성이 거짓일 때 브라우저가 표시할 메시지를 포함합니다。
willValidate input 요소가 검증되는지 지시합니다。

예제 - checkValidity() 메서드

데이터가 유효하지 않은 입력 필드가 포함되어 있으면 메시지를 표시합니다：

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

직접 시도해보세요

유효성 속성

input 요소의유효성 속성데이터 유효성과 관련된 많은 속성을 포함하고 있습니다：

속성 설명
customError 사용자 정의 유효성 메시지가 설정되면 true로 설정됩니다。
patternMismatch 요소의 값이 pattern 속성과 일치하지 않으면 true로 설정됩니다。
rangeOverflow 요소의 값이 max 속성보다 크면 true로 설정됩니다。
rangeUnderflow 요소의 값이 min 속성보다 작으면 true로 설정됩니다。
stepMismatch 요소의 값이 step 속성에 따라 유효하지 않으면 true로 설정됩니다。
tooLong 요소의 값이 maxLength 속성을 초과하면 true로 설정됩니다。
typeMismatch 요소의 값이 type 속성에 따라 유효하지 않으면 true로 설정됩니다。
valueMissing 요소(필수 속성을 가진 요소)에 값이 없으면 true로 설정됩니다。
valid 요소의 값이 유효하면 true로 설정됩니다。

예제

rangeOverflow 속성

input 필드의 숫자가 100보다 크면(input의 max 属性），이면 메시지를 표시합니다：

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  }
}
</script>

직접 시도해보세요

rangeUnderflow 속성

input 필드의 숫자가 100보다 크면(input의 max 属性），이면 메시지를 표시합니다：

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "Value OK";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  }
}
</script>

직접 시도해보세요