최신 웹 개발 튜토리얼
 

JavaScript검증 API


제약 검증 DOM 방법

재산 기술
checkValidity() 입력 요소는 유효한 데이터가있는 경우에 true를 돌려줍니다.
setCustomValidity() 입력 요소의 validationMessage 속성을 설정합니다.

입력 필드가 유효하지 않은 데이터가 포함 된 경우, 메시지를 표시 :

checkValidity () 메서드

<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
}
</script>
»그것을 자신을 시도

제약 검증 DOM 속성

재산 기술
validity 입력 요소의 유효성에 관한 부울 속성이 포함되어 있습니다.
validationMessage 유효성이 거짓 인 경우 브라우저가 표시됩니다 메시지가 들어 있습니다.
willValidate 입력 요소가 검증 될 경우를 나타냅니다.

유효 등록

입력 요소의 유효 속성은 데이터의 유효성과 관련된 속성의 수를 포함합니다 :

재산 기술
customError 사용자 정의 유효성 메시지가 설정되어있는 경우, true로 설정합니다.
patternMismatch 요소의 값이 패턴 속성과 일치하지 않는 경우, true로 설정합니다.
rangeOverflow 요소의 값이 최대 속성보다 큰 경우, true로 설정합니다.
rangeUnderflow 요소의 값이 그 분의 속성보다 작 으면 true로 설정합니다.
stepMismatch 요소의 값이 단계의 특성에 따라 무효 인 경우, true로 설정합니다.
tooLong 요소의 값이 최대 길이 속성을 초과하는 경우, true로 설정합니다.
typeMismatch 요소의 값은 type 속성에 따라 무효 인 경우, true로 설정합니다.
valueMissing (필수 속성) 요소에 값이없는 경우, true로 설정합니다.
valid 요소의 값이 유효한 경우, true로 설정합니다.

입력 필드의 수가 100 (입력의 최대 특성)보다 크면, 메시지를 표시 :

rangeOverflow 부동산

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
       txt = "Value too large";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
»그것을 자신을 시도

입력 필드의 수가 100 (입력의 최소 특성)보다 작 으면, 메시지를 표시 :

rangeUnderflow 부동산

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeUnderflow) {
       txt = "Value too small";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>
»그것을 자신을 시도