[Javascript] 입력창에 정수값만 입력받기(유효성 체크)

[Javascript] 입력창에 정수값만 입력받기

---

Form 형태로 서버에 값을 전송하다보면 Validation Check가 제대로 이루어지지 않아 발생하는 문제들이 많다.

-> 꼭 필요한 input값이 비어있는 경우-> 입력되어야하는 자료형과 다른 자료형이 입력된 경우( e.g.) int값 입력 자리에 string값이 들어간 경우)

 

Controller로 값 전송 전, Validation Check를 위한 방법으로는 크게 두가지 방법이 있다.

 

1. Submit 전에  조건을 걸어 확인하는 방법 

 

if ($("#test").val() == '') {

	alert('값을 입력하세요.');
	$("#test").focus();
	return;
    
}

 

2. Input창에 값이 입력될때 올바르지 않은 자료형이 들어왔을때 다른 문자,숫자로 대체하거나

공백으로 되돌리는 방법

 

1) int값으로 제한

-> 사용법: <input type="text" numberOnly />

 

$("input:text[numberOnly]").on("focus", function() {
	    var x = $(this).val();
	    $(this).val(x);
}).on("focusout", function() {
	    var x = $(this).val();
	    if(x && x.length > 0) {
	        if(!$.isNumeric(x)) {
	            x = x.replace(/[^-0-9]/g,"");
	        } 
	        if(x.lastIndexOf("-")>0){ //중간에 -가 있다면 replace
                if(x.indexOf("-")==0){ //음수라면 replace 후 - 붙여준다.
                    x = "-"+x.replace(/[-]/gi,'');
                }else{
                    x = x.replace(/[-]/gi,'');
                }
            }
	        $(this).val(x);
	    }
}).on("keyup", function() {
		var x = $(this).val().replace(/[^-0-9]/g,"");
		if(x && x.length > 0) {
			 if(x.lastIndexOf("-")>0){ //중간에 -가 있다면 replace
	             if(x.indexOf("-")==0){ //음수라면 replace 후 - 붙여준다.
	                 x = "-"+x.replace(/[-]/gi,'');
	             }else{
	                 x = x.replace(/[-]/gi,'');
	             }
	         }
		}		 		
	    $(this).val(x);
});

 

2) Double형 값으로 제한

->사용법: <input type="text" doubleOnly />

 

$("input:text[doubleOnly]").on("focus", function() {
	    var x = $(this).val();
	    $(this).val(x);
	}).on("focusout", function() {
	    var x = $(this).val();
	    if(x && x.length > 0) {
	        if(!$.isNumeric(x)) {
	            x = x.replace(/[^-0-9\.]/g,"");
	        } 
	        if(x.lastIndexOf("-")>0){ //중간에 -가 있다면 replace
                if(x.indexOf("-")==0){ //음수라면 replace 후 - 붙여준다.
                    x = "-"+x.replace(/[-]/gi,'');
                }else{
                    x = x.replace(/[-]/gi,'');
                }
            }
	      //마침표 2개 허용 X
		    if ( (x.match(/\./g) || []).length > 1 ){
	                x =x.replace('.','');
		    }
	        $(this).val(x);
	    }
	}).on("keyup", function() {
		var x = $(this).val().replace(/[^-0-9\.]/g,"");
		if(x && x.length > 0) {
			 if(x.lastIndexOf("-")>0){ //중간에 -가 있다면 replace
	             if(x.indexOf("-")==0){ //음수라면 replace 후 - 붙여준다.
	                 x = "-"+x.replace(/[-]/gi,'');
	             }else{
	                 x = x.replace(/[-]/gi,'');
	             }
	         }
		}		
 		//마침표 2개 허용 X
	     if ( (x.match(/\./g) || []).length > 1 ){
                x =x.replace('.','');
	     }
	    $(this).val(x);
});