목동코딩, html, Input 입력 유효성 체크하는 방법

목동코딩:

프로젝트를 하다보면 꼭 필요한 부분이 입력 유효성 체크이다.

예전에 POS를 개발할 때 절실히 느껴던 부분이다.

개발하는 입장에서는 에러가 안나게 잘 입력해 주지만 ㅎㅎ , 일반 사용자는 그렇지 않기에 다양한 입력 검증 방식이 필요하다.

가령 금액을 입력하는데 문자를 입력하는 경우등이다. 이러한 경우를 예상하지 않으면 그냥 시스템이 죽어 버리곤 했다. 세월이 많이 흐른 지금도 키코드를 이용하여 비교하는 방식은, 예전에 코볼로 개발할 때 랑도 비슷한 느낌이다. 세월이 흘러도 원리는 변하지 않느거 같다. 그래서 학생들도 원리를 궁금해 하면서 공부 해야 한다는 생각이다.

 

$(document).ready(function () {
    // Number only
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^0-9]/g,'');
        }
    });
    //Number & dot
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^0-9\.]/g,'');
        }
    });
    //Amount
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = $.number(this.value,0); //jquery.number.js
        }
    });
    //Number & '-'
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/^[-]|[^0-9-]/gi,'');
        }
    });
    //Alpha & Number & '-'
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^a-zA-Z0-9\\-]+$/i,'');
        }
    });
});