이 기사에서 이해

n 이상의 정수 만 허용하는 입력 상자를 구현하는 방법을 알 수 있습니다.

m 이하의 정수만을 인정하는 입력 박스의 구현 방법을 알 수있다

원래 밸리데이션이란

기술에 사용한 언어의 문법이나 그 프로그램에 요구되는 사양(서의 기술)에 준하여 올바르게 기술되어 있는지를 검증하는 것을 나타낸다.
IT 용어 사전 e-Words

배경

「그러블 데미지 상한 계산기」라고 하는 것을 제작했습니다만, 그 중에는 텍스트 박스가 포함되어 있습니다.

<input type="txt" size="8" id="other" value="0"/>%

이 텍스트 박스에는 본래, 반각으로 0 이상의 정수를 입력해 주었으면 합니다만,
예를 들어 숫자 이외의 것, "hoge"를 입력하면 의도하지 않은 출력(NaN)이 이루어집니다.



0 이상의 정수 입력만 받아들이는 입력 상자를 만들자! 라는 것이 이번 목적입니다.
게다가 다소 이상한 것 같은 정규 표현은 사용하고 싶지 않다는 조건으로.

(정규 표현은 어렵지 않아, 라는 의견도 있을지도 모릅니다만, 여기에서는 할애시켜 주세요.)

정규식을 사용하지 않고 끝내려면

input 요소의 type 속성을 number로 지정하고,
또한 min 속성을 사용하여 최소값을 0으로 설정합니다.
최소값을 0 이외로 하고 싶은 경우는, 이 수치를 임의로 변경합니다.

보충으로, n 이하의 숫자만을 인정하고 싶다! 그렇다면 min 속성을 max 속성으로 바꾸면 됩니다.

그 외, id나 size등도 적절히, 변경이나 추가・삭제해 주세요.

<input type="number" size="8" id="other" value="0" min="0" />%

결론 (주의)

이번에 취급한 것은 HTML, CSS, JavaScript만으로 구성된 웹 페이지이므로,
이런 밸리데이션으로 충분합니다만(라고 할까 그것밖에 할 수 없을 것 같아),

데이터베이스를 이용한 동적 웹 애플리케이션 등의 경우,
서버측에서도 검증을 구현해야 합니다.

자신이 상정할 수 있는 범위에서도 Google Chrome의 개발자 도구 등을 이용하면 유효성 검사를 해제할 수 있으며,
그 밖에 밸리데이션을 통과하는 수단은 많이 있다고 생각합니다.

위험!

참고

양의 정수 전용 HTML 입력(Type = number)

HTML5 태그 참조