본문 바로가기

JAVA HTML JAVASCRIPT/소오스

Validation Check

728x90
반응형

<form name="frmTest">
    <!-- 이름은 한글이 포함된 문자열이 반드시 필요하다-->
    <input name='name' id='name:m:h' type='text' alt="이름">

    <!-- 나이는 반드시 필요하지는 않지만 입력되었다면 0 ~ 999 범위내어서 입력가능하다.(정규식사용) -->
    <input name='age' id='age:/^\d{1,3}$/i' type='text' alt="나이">

    <!-- 이메일은 반드시 필요하지는 않지만 입력되었다면 올바른 이메일 형식으로 입력해야한다. -->
    <input name='email' id='email:e' type='text' alt="이메일">
</form>



[체크방법]
<script language="javascript">
   
    // Validation 체크 -- 한줄로 끝....^^
    if (!new Validation(document.frmTest).checkAll()) return;

    ...
    ...
    ...

</script>




======================================================================================

//***********************************************************
//** Form의 Validation을 체크한다.
//**
//** - pyukcho (pyukcho@gmail.com)
//** --------------------------------------------------------
// ** - 2006/07/14 - name 대신 id를 사용하게 변경
// ** - 2006/08/16 - ajax post를 위한 checkbox 값 처리 변경
//************************************************************
function Validation(formObj) {
    this.form = formObj;            // 대상폼 폼
    this.postStr = "";

    // 내부 메세지 설정
    this.message = new Dictionary();
    this.message.put(   "m"       , "반드시 입력해야 하는 값입니다.");
    this.message.put(   "/"       , "입력값이 지정된 형식과 일치 하지 않습니다.");
    this.message.put(   "f"       , "입력값이 실수형이 아닙니다.");
    this.message.put(   "i"       , "입력값이 정수형이 아닙니다.");
    this.message.put(   "l"       , "입력값이 Long형이 아닙니다.");
    this.message.put(   "H"       , "입력값은 한글을 포함할 수 없습니다.");
    this.message.put(   "h"       , "입력값은 한글이 포함되어 있지 않습니다.");
    this.message.put(   "e"       , "Email 형식이 올바르지 않습니다.");
    this.message.put(   "y"       , "년도 형식이 올바르지 않습니다.");
    this.message.put(   "d"       , "날짜형식이 올바르지 않습니다.");

    // form Object를 Ajax로 전달하기 위해서 폼객체를 UTF8로 인코딩된 str 형태로 반경한다.
    this.getFormToPost = function() {
        return this.postStr;
    }
   
    // 전체 폼 체크
    this.checkAll = function () {

        return this.checkAllInput() && this.checkAllSelect() && this.checkAllTextarea();
    }

    // <input type="text"> 체크
    this.checkAllInput = function () {
        for (var i=0; i< this.form.elements.length; i++) {
            if (this.form.elements[i].tagName == "INPUT") {
                if ( !this.checkObject(this.form.elements[i])) return false;
            }
           
            // Ajax에서 사용할 Post 값을 설정
            var flag = true;
            var objValue= this.form.elements[i].value;
            if(this.form.elements[i].tagName == "INPUT" && this.form.elements[i].type == "radio") {
                flag     = this.form.elements[i].checked ? true : false;
            } else if (this.form.elements[i].tagName == "INPUT" && this.form.elements[i].type == "checkbox") {
                flag     = this.form.elements[i].checked ? true : false;
                // objValue = flag  ? "Y" : "N";
            }
           
            this.postStr += flag ? this.form.elements[i].name + "=" + encodeURIComponent(objValue) + "&" : "";
        }
        return true;
    }

    this.checkAllSelect = function () {
        for (var i=0; i< this.form.elements.length; i++) {
            if (this.form.elements[i].tagName == "SELECT") {
                if ( !this.checkObject(this.form.elements[i])) return false;
            }
        }
        return true;
    }

    this.checkAllTextarea = function () {
        for (var i=0; i< this.form.elements.length; i++) {
            if (this.form.elements[i].tagName == "TEXTAREA") {
                if ( !this.checkObject(this.form.elements[i])) return false;
            }
        }
        return true;
    }

    // 하나의 입력항목에 대한 체크
    this.checkObject = function(eleObj) {
        // var lio = eleObj.name.lastIndexOf(":");
        // id를 있다면 ID 기반으로 없다면 name 기반으로 옵션 체크를 한다.
        var splitName = (isNullObject(eleObj.id) ? eleObj.name.split(":") : eleObj.id.split(":") );
        var objValue  = eleObj.value;
        if (splitName.length > 1) {
            // 해당 Object의 validation값 체크
            var objValidationFlag = true;

            for ( var j = 1; j < splitName.length ; j++) {
                switch (splitName[j].charAt(0) ) {
                    // 필수 입력 처리
                    case "m":
                        objValidationFlag = isMandatory(objValue);
                        break;

                    // Regular 항목 체크
                    case "/":
                        objValidationFlag = isEmpty(objValue) ? true : isSearch(objValue, splitName[j]);
                        break;

                    // Float 체크
                    case "f":
                        objValidationFlag = isEmpty(objValue) ? true : isFloat(objValue);
                        break;

                    // Int 체크
                    case "i":
                        objValidationFlag = isEmpty(objValue) ? true : isInt(objValue);
                        break;

                    // Long 체크
                    case "l":
                        objValidationFlag = isEmpty(objValue) ? true : isLong(objValue);
                        break;

                    // 한글이 포함되어 있는가 검사
                    case "h":
                        objValidationFlag = isEmpty(objValue) ? true : isHangul(objValue);
                        break;

                    // 한글이 포함되어 있지 않은가 체크
                    case "H":
                        objValidationFlag = isEmpty(objValue) ? true : !isHangul(objValue);
                        break;

                    // Email 체크
                    case "e":
                        objValidationFlag = isEmpty(objValue) ? true : isEmail(objValue);
                        break;

                    // 년도체크
                    case "y":
                        objValidationFlag = isEmpty(objValue) ? true : isYear(objValue);
                        break;
                       
                    // 날짜체크
                    case "d":
                        objValidationFlag = isEmpty(objValue) ? true : isDate(objValue);
                        break;                       
                }
               
                if(!objValidationFlag) {
                    var msg = "[" + (isNullObject(eleObj.alt) ? splitName[0] : eleObj.alt) + "]";
                        msg += " 필드 => \n" + this.message.get(splitName[j].charAt(0));
                    alert(msg);
                    try{eleObj.focus();} catch (e) {}
                    return false;  
                }
            }

            // 존재하는가 체크
            var intendedObj = document.getElementsByName(splitName[0])[0];
            if (isNullObject(intendedObj)) {
                // input 타입의 새로운 객체 생성
                var newObj = document.createElement("INPUT");
                newObj.type  = "hidden";
                newObj.name  = splitName[0];
                newObj.id    = splitName[0];
                newObj.value = objValue

                this.form.appendChild(newObj);
            } else {
                // TODO: 동일 이름의 객체가 두개 이상일 수 있다.
                // - 지금은 하나만 만든다.
                intendedObj.value = objValue
            }
           
        }

        return true;
    }
}

//***********************************************************
//** 각종 Validation 체크 함수
//***********************************************************
function check_m(el) {
    return isMandatory(el) ;
}

function isMandatory(el) {
    return (el == "" || el == null) ? false : true;
}

function isSearch(el, pattern) {
    eval("var fm = " + pattern + ";");
    var p = el.search(fm);
    return (p == -1 ? false : true);   
}

function isFloat(el) {
    if (isNaN(parseFloat(el))) {
        return false;
    }
    return true;
}

function isInt(el) {
    if (isNaN(parseInt(el)) ||
        (parseInt(el) != parseFloat(el))) {
        return false;
    }
    return true;
}

function isLong( el) {
    return isInt(el);
}

function isNullObject(el){
    return (el == "undefined" || el==null) ? true : false;
}

function isEmpty(el){
    return ( el == null  || el == "" ) ? true : false;
}

function isEmail(el) {
    var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

    return (el.search(filter) == -1 ? false : true);
}

// 한글 체크하는것이 아니라 유니코드체크하는것이네.. 쩝.. ^^;;
// 머 크게 문제는 없겠지...
function isHangul(el) {
    return (escape(el).search(/%u/i) == -1 ? false : true );
}

function trim(str){
     return str.replace(/(^\s*)|(\s*$)/ig, "");
 }

function isYear(str) {
    return isSearch(str, "/^\d{0,4}$/i");      // <- /^\d{4}$/i
}

function isDate(str) {
    return isSearch(str, "/^(\d{1,4})\\/((0[1-9])|(1[0-2]))\\/((0[1-9])|([1-2][0-9])|(3[0-1]))$/i");

728x90
반응형