-
[javascript] 44. 서식 API(Forms API) - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:29JavaScript Validation API
1. Constraint Validation DOM Methods
Property Description checkValidity() Returns true if an input element contains valid data. setCustomValidity() Sets the validationMessage property of an input element. [ 출처 : W3Schools ]
입력 필드가 올바르지 않은 데이터를 가지고 있다면, 아래와 같이 처리할 수 있습니다:
123456789101112131415161718192021222324252627<!DOCTYPE html><html><body><p>Enter a number and click OK:</p><input id="id1" type="number" min="100" max="300"><button onclick="myFunction()">OK</button><p>If the number is less than 100 or greater than 300, an error message will be displayed.</p><p id="demo"></p><script>function myFunction() {var inpObj = document.getElementById("id1");if (inpObj.checkValidity() == false) {document.getElementById("demo").innerHTML = inpObj.validationMessage;} else {document.getElementById("demo").innerHTML = "Input OK";}}</script></body></html>cs 2. Constraint Validation DOM Properties
Property Description validity Contains boolean properties related to the validity of an input element. validationMessage Contains the message a browser will display when the validity is false. willValidate Indicates if an input element will be validated. [ 출처 : W3Schools ]
3. Validity Properties
입력 요소의 유효성 속성(Validity Property)는 데이터의 유효성과 관련이 있는 여러 속성을 포함합니다.
Property Description customError Set to true, if a custom validity message is set. patternMismatch Set to true, if an element's value does not match its pattern attribute. rangeOverflow Set to true, if an element's value is greater than its max attribute. rangeUnderflow Set to true, if an element's value is greater than its min attribute. stepMismatch Set to true, if an element's value is invalid per its step attribute. tooLong Set to true, if an element's value exceeds its maxLength attribute. typeMismatch Set to true, if an element's value is invalid per its type attribute. valueMissing Set to true, if an element (with a required attribute) has no value. valid Set to true, if an element's value is valid. [ 출처 : W3Schools ]
4. Examples
숫자가 100 보다 큰 수를 입력하면 메시지를 출력하게 되는 예제입니다:
123456789101112131415161718192021222324252627282930<!DOCTYPE html><html><body><p>Enter a number and click OK:</p><input id="id1" type="number" max="100"><button onclick="myFunction()">OK</button><p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p><p id="demo"></p><script>function myFunction() {var txt = "";if (document.getElementById("id1").validity.rangeOverflow) {txt = "Value too large";} else {txt = "Input OK";}document.getElementById("demo").innerHTML = txt;}</script></body></html>cs 숫자가 100 이하의 수를 입력 한다면, 메시지를 출력하는 예제입니다:
12345678910<script>function myFunction() {var txt = "";if (document.getElementById("id1").validity.rangeUnderflow) {txt = "Value too small";}document.getElementById("demo").innerHTML = txt;}</script>cs 'Web > JavaScript' 카테고리의 다른 글
[javascript] 47. 객체 메소드(Object methods) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 46. 객체 속성(Object properties) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 45. 객체 선언(Object defination) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 43. 서식 검사(Forms validation) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 42. JSON - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 41. 예약어(Reserved Keywords) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
