개발자의 길

[html5]입력값 검증하기(validation) - 간단한 예제 본문

7. HTML5

[html5]입력값 검증하기(validation) - 간단한 예제

자르르 2012. 1. 13. 12:03


참고문서 :

http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#dom-cva-validity

http://www.html5.jp/tag/elements/forms-constraints.html

소스 :

<script>

function on_Click_Check()
{
var num=document.getElementById("num_1");
var strError="";
if(num.checkValidity()==true)
{
alert("OK");
}
else
{
if(num.validity.valueMissing )
{
strError="valueMissing, ";
}

if(num.validity.typeMismatch )
{
strError+="typeMismatch, ";
}

if(num.validity.patternMismatch )
{
strError+="patternMismatch, ";
}

if(num.validity.tooLong )
{
strError+="tooLong, ";
}

if(num.validity.rangeUnderflow )
{
strError+="rangeUnderflow, ";
}

if(num.validity.rangeOverflow )
{
strError+="rangeOverflow, ";
}

if(num.validity.rangeOverflow )
{
strError+="rangeOverflow, ";
}
if(num.validity.stepMismatch )
{
strError+="stepMismatch, ";
}
if(num.validity.customError )
{
strError+="customError, ";
}
if(num.validity.valid)
{
strError+="valid";
}

alert(strError);
}
}
</script>
</head>
<body>
<input type="number" min="0" max="100" required="true" id="num_1"/><br/>
<input type="button" onClick="on_Click_Check()" />
</body>

실행화면

min=0, max=100일때 입력값이 30000인 경우

 

숫자를 입력해야 되는데 문자를 입력한 경우

저작자표시

'7. HTML5' 카테고리의 다른 글

[html5]input autocomplete, autofocus, datalist 테스트  (0) 2012.01.13
[html5]입력값 검증하기(validation) - 간단한 예제 2 : setCustomValidity이용  (0) 2012.01.13
[html5]meter 테스트  (0) 2012.01.13
[html5]progress 테스트  (0) 2012.01.13
[html5]file 테스트  (0) 2012.01.13


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'7. HTML5' Related Articles more
Comments