제약 검증 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>
»그것을 자신을 시도