[JavaScript] 카드번호 입력폼 예제[JavaScript] 카드번호 입력폼 예제

Posted at 2018. 4. 18. 10:05 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 16자리(4x4) 카드번호 입력폼



아래 예제는 텍스트 박스 입력시 maxlength에 지정된 숫자를 체크하고 그 갯수만큼의 문자열이 채워지면

nextElementSibling.focus()를 통해 자동으로 다음 텍스트 박스로 이동하게 된다.


# 소스코드

<html>

<head>

<title>:: 숫자 다음 TEXT 이동 ::</title>

<style type="text/css">

.moveNumber {

text-align:center;

width:40px;

};

</style>

<script type="text/javascript">

function inputMoveNumber(num) {


if(isFinite(num.value) == false) {
alert("카드번호는 숫자만 입력할 수 있습니다.");
num.value = "";
return false;
}


max = num.getAttribute("maxlength");


if(num.value.length >= max) {

num.nextElementSibling.focus();

}

}

</script>

</head>

<body>

<h2>카드 번호</h2>

<input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/>&nbsp;-&nbsp;

<input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/>&nbsp;-&nbsp;

<input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/>&nbsp;-&nbsp;

<input type="text" class="moveNumber" maxlength="4"/>

</body>

</html>




# 출력결과









■ 카드 유효기간(MM/YY) 입력폼




다음은 MM/YY형태의 카드 유효기간을 입력하는 입력폼이다.

기본적으로 MM/YY형태의 숫자 4자리를 입력하면 자동으로 슬래시( / )기호가 삽입되게끔 제작되었다.




<html>
<head>
<title>:: 카드 유효기간 체크 ::</title>
<style type="text/css">
    .validThru {
        text-align:center;
        width:60px;
    }
</style>
<script type="text/javascript">
    function inputValidThru(period) {

        // replace 함수를 사용하여 슬래시( / )을 공백으로 치환한다.
        var replaceCard = period.value.replace(/\//g, "");

        // 텍스트박스의 입력값이 4~5글자 사이가 되는 경우에만 실행한다.
        if(replaceCard.length >= 4 && replaceCard.length < 5) {

            var inputMonth = replaceCard.substring(0, 2);    // 선언한 변수 month에 월의 정보값을 담는다.
            var inputYear = replaceCard.substring(2, 4);       // 선언한 변수 year에 년의 정보값을 담는다.


            // 현재 날짜 값을 구한다.

            var nowDate = new Date();

            var nowMonth = autoLeftPad(nowDate.getMonth() + 1, 2);

            var nowYear = autoLeftPad(nowDate.getFullYear().toString().substr(2, 2), 2);


            // isFinite함수를 사용하여 문자가 선언되었는지 확인한다.
            if(isFinite(inputMonth + inputYear) == false) {
                alert("문자는 입력하실 수 없습니다.");
                period.value = autoLeftPad((Number(nowMonth) + 1), 2) + "/" + nowYear;
                return false;
            }

            // 입력한 월이 12월 보다 큰 경우
            if(inputMonth > 12) {
                alert("12월보다 큰 월수는 입력하실 수 없습니다. ");
                period.value = "12/" + inputYear;
                return false;
            }


            // 입력한 유효기간을 현재날짜와 비교하여 사용 가능 여부를 판단한다.
            if((inputYear + inputMonth) <= (nowYear + nowMonth)) {
                alert("유효기간이 만료된 카드는 사용하실 수 없습니다.");
                period.value = inputMonth + "/" + autoLeftPad((Number(nowYear) + 1), 2);
                return false;
            }

            period.value = inputMonth + "/" + inputYear;
        }
    }


    // 1자리 문자열의 경우 앞자리에 숫자 0을 자동으로 채워 00형태로 출력하기위한 함수
    function autoLeftPad(num, digit) {
        if(String(num).length < digit) {
            num = new Array(digit - String(num).length + 1).join('0') + num;
        }
        return num;
    }
</script>
</head>
<body>
    <h2>카드 유효기간</h2>
    <!-- maxlength의 값을 5로지정하여 다섯자리 이상의 값이 등록되는것을 막는다. -->
    <input type="text" class="validThru" onKeyup="inputValidThru(this);" placeholder="MM/YY" maxlength="5"/>
</body>
</html>



# 출력결과




# 예외처리





반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입  (0) 2018.08.20
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스  (3) 2018.08.17
//

티스토리툴바