[JS] 유효성검사 객체리터럴형식(object literal), 반복문으로 처리하는 방법

☑️밑의 유효성검사 코드를 객체리터럴형식+반복문으로 바꿔서 처리해보자.

function save_btn(obj) {
    var year = document.getElementById('year').value;
    var month = document.getElementById('month').value;
    var light = document.getElementById('light').value;
    var compact = document.getElementById('compact').value;
    var subMidSize = document.getElementById('subMidSize').value;
    var midSize = document.getElementById('midSize').value;
    var semiLarge = document.getElementById('semiLarge').value;
    var large = document.getElementById('large').value;
    var electric = document.getElementById('electric').value;
    
    if(year.trim() == 'none') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(month.trim() == 'none') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(light.trim() == null || light.trim() == '') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(compact.trim() == null || compact.trim() == '') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(subMidSize.trim() == null || subMidSize.trim() == '') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(midSize.trim() == null || midSize.trim() == '') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(semiLarge.trim() == null || semiLarge.trim() == '') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(large.trim() == null || large.trim() == '') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
    if(electric.trim() == null || electric.trim() == '') {
    	alert("빈칸을 채워주세요.");
    	return;
    }
	
	var form = document.getElementById('stdGasPriceVo');
	form.action = '${pageContext.request.contextPath}/stdGasPrice/permit/ins';
	form.method = 'POST';
	form.submit();
}

 

 

 

☑️먼저 fields 객체를 생성하여 각 필드의 ID와 값을 매핑한다. 그런다음 for - in 반복문을 사용하여 객체의 각 키(필드)를 순회하면서 해당 필드의 값이 비어있는지 또는 none인지 검사한다. 어떤 필드라도 이 조건을 만족하면 경고 메시지를 표시하고 함수를 종료한다. 

function save_btn(obj) {
    var fields = {
        'year': document.getElementById('year').value,
        'month': document.getElementById('month').value,
        'light': document.getElementById('light').value,
        'compact': document.getElementById('compact').value,
        'subMidSize': document.getElementById('subMidSize').value,
        'midSize': document.getElementById('midSize').value,
        'semiLarge': document.getElementById('semiLarge').value,
        'large': document.getElementById('large').value,
        'electric': document.getElementById('electric').value
    };
    
    for (var key in fields) {
        if (fields[key].trim() === 'none' || fields[key].trim() === null || fields[key].trim() === '') {
            alert("빈칸을 채워주세요.");
            return;
        }
    }

    var form = document.getElementById('stdGasPriceVo');
    form.action = '${pageContext.request.contextPath}/stdGasPrice/permit/ins';
    form.method = 'POST';
    form.submit();
}

 

 

 

 

.

.

.

 

💡객체 리터럴 형식이란?

`키 : 값` 쌍으로 구성된 구조를 가지며, 이를 통해 데이터를 구조화하는 데 사용된다.

 

//객체 리터럴의 기본구조
var objectName = {
    key1: value1,
    key2: value2,
    key3: value3
    // ...
};

 

 

위의 fields 객체의 구성

var fields = {
    'year': document.getElementById('year').value,
    'month': document.getElementById('month').value,
    // 나머지 필드들...
};

여기서 각 `키`(ex: 'year', 'month', 'light' 등)는 객체 내의 고유한 식별자로 사용되며, 이에 대응하는 `값`은 해당 식별자와 연관된 데이터를 나타낸다. 이 경우에는 html문서 내의 특정 요소들의 현재 값을 낸다.

 

 

 

객체 리터럴과 배열의 차이 >

❗반면에 javascript 배열은 순서가 지정된 값의 리스트로, 일반적으로 동일한 유형의 값들을 저장하는데 사용된다.

//배열의 기본구조
var arrayName = [value1, value2, value3];

 

 

fields는 객체 리터럴이기 때문에 키-값 쌍으로 데이터에 접근하는 방식을 사용하며, 배열과 다르게 인덱스 기반으로 접근하지 않는다.