JavaScript 검증 API

약束 검증 DOM 메서드

속성 설명
checkValidity() 입력 요소가 유효 데이터를 포함하면 true를 반환합니다.
setCustomValidity() input 요소의 validationMessage 속성을 설정합니다.

입력 필드가 무효 데이터를 포함하면 메시지를 표시합니다：

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>

직접 시도해 보세요

구속 검증 DOM 속성

속성 설명
validity 입력 요소의 유효성과 관련된 보리언 속성을 포함합니다.
validationMessage 유효성이 false일 때 브라우저가 표시할 메시지를 포함합니다.
willValidate 입력 요소가 검증되지 않을지 여부를 나타냅니다.

유효성 속성

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로 설정됩니다.

예제

입력 필드의 숫자가 100보다 크다면(input 요소의 max 속성），이 경우 메시지를 표시합니다：

rangeOverflow 속성

<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>

직접 시도해 보세요

입력 필드의 숫자가 100보다 작으면（input 요소의 min 속성），이 경우 메시지를 표시합니다：

rangeUnderflow 속성

<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>

직접 시도해 보세요