Input Text의 유효성 검사

공통.js에 아래 부분을 넣는다. 

<script>

var essentialCheckArr = [];

//저장 전에 호출

//필수 항목에 값이 다 있을 경우에만 true 반환

function checkEssential(){

for(var i=0;i<essentialCheckArr.length;i++){

var tmpStr = $('#'+ essentialCheckArr[i]).val();

if( tmpStr == '' || tmpStr == null ){

alert("필수 입력사항입니다.");

$('#'+ essentialCheckArr[i]).focus();

return false;

}

}

return true;

}

/* 

* 유효성 검사 기능

* inputObj 검사를 할 대상 Object

* validFuncArray 검사 항목 지정(배열 형태) : ex) ["isNumer","spaceCheck"]

* maxLength 최대 길이 체크 ( 0 일 경우 제외 )

* essential 필수여부 'Y'/'N' 값이 Y인 경우 checkEssential function을 호출할 경우 해당 항목에 값이 있는지 체크하여 결과값을 반환한다.

*/

function textValidation(inputObj, validFuncArray, maxLength, essential){

if( essential == 'Y'){

essentialCheckArr.push( inputObj.attr("id") );

}

inputObj.bind('focusin keyup', function(){ // input태그에 포커스가 들어오거나 키가 눌렸을 때 실행됨

var inputValue = inputObj.val();

if( maxLength > 0 ){

if( inputValue.length > maxLength) {

alert("최대범위를 초과하였습니다.");

inputObj.val( inputValue.substring(0, maxLength ) );

inputObj.focus();

return;

}

}

var funcResult = null; // 함수 실행 결과를 담을 flag

for(i=0; i<validFuncArray.length; i++){ // 검증에 사용할 함수명 배열을 반복문으로 돌린다.

var funcName = validFuncArray[i]; // 배열에서 함수명을 하나씩 뽑아낸다. 

var funcObj = window[funcName]; // 함수명(string)을 객체(object)로 받는다.

funcResult = funcObj(inputValue); //  해당 함수를 실행하여 결과 메시지를 변수에 담는다. 만약 함수 전체를 통과하면 Null을 반환한다.

if(funcResult != null){ // 검증에 통과하지 못한 함수가 있을 경우 반복문 탈출

break;

}

}

if(funcResult != null){ // 검증에 통과하지 못했을 때,

alert(funcResult); 

inputObj.val( inputValue.substring(0, inputValue.length -1 ) );

inputObj.focus();

}else{ // 검증에 통과했을 때,

} 

});

}

/**

* 입력값이 특정 문자만으로 되어있는지 체크하며

* 특정문자만을 허용하려 할때 사용한다.

*/

function containsCharsOnly(input, chars){

for (var i=0; i < input.length; i++){

if (chars.indexOf(input.charAt(i)) == -1){

return false;

}

}

return true;

}

 

// 영문과 숫자만 입력받도록 검증

function isAlphabetNumber(str){

var check = /^[A-Za-z0-9]*$/;

if(check.test(str)){

return "영문과 숫자 입력이 가능합니다.";

}

return null;

}

// 영문만 입력받도록 검증

function isAlphabet(str){

var check = /[^A-Za-z\s]/;

if(check.test(str)){

return "영문만 입력이 가능합니다.";

}

return null;

}

// 공백 허용하지 않도록 검증

function spaceCheck(inputVal){

var invalid = " ";

if(inputVal.indexOf(invalid) > -1){

return "공백이 허용되지 않습니다.";

}else{

return null;

}

}

/**

* 입력값이 알파벳 대문자인지 체크한다

*/

function isUpperCase(input){

var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

if( containsCharsOnly(input, chars) ) return null;

else return  "대문자만 입력가능합니다.";

}

/**

* 입력값이 알파벳 소문자인지 체크한다

*/

function isLowerCase(input){

var chars = "abcdefghijklmnopqrstuvwxyz";

if( containsCharsOnly(input, chars) ) return null;

else return  "소문자만 입력가능합니다.";

}

/**

* 입력값이 숫자만 있는지 체크한다.

*/

function isNumer(input){

var chars = "0123456789.";

if( containsCharsOnly(input, chars) ) return null;

else return  "숫자만 입력가능합니다.";

}

/**

* 입력값이 이메일 형식인지 체크한다

*/

function isValidEmail(input){

       var format = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/;

       if(format.test(input)) return "이메일 형식으로 작성하여야 합니다.";

       else return null ;

}

/**

* 입력값이 전화번호 형식(숫자-숫자-숫자)인지 체크한다

*/

function isValidPhone(input){

       var format = /^(\d+)-(\d+)-(\d+)$/;

       if(format.test(input)) return "전화번호 형식으로 작성하여야 합니다.";

       else return null ;

}

</script>

--------------------------------------------------------------------------------------------------------------

사용법

//input text를 event에 등록
$(document).ready(function() {
    ...
    textValidation( $("#ID"), ["isNumer","spaceCheck"], 10, 'Y' );
}


//저장 전 checkEssential()를 호출하여 필수체크로 정의된 input 중 값이 없는게 있는지 체크한다.

$('#saveBtn').click(function(){

if( checkEssential() ){

Save();                                

}

});