JavaScript로 영수증 폼 검증해보기

HTML, CSS, Javascript를 모두 활용하는 실습을 해 보았다. 

이 세가지를 다 해야하는 이유는 HTML은 화면의 구성을 담당하고, CSS는 화면을 꾸미는 스타일링 역할, JavaScript는 문서를 동작하게 한다.

따라서, 3가지를 다 알아야 웹페이지의 구성, 흐름을 알 수 있고 어떤 요소를 사용해서 데이터를 뽑아올지, 어떤 데이터를 사용자로부터 받아올지, 받아오려면 어떻게 화면을 구성해야되는지 등을 정할 수 있다. 그래서 이 세가지를 모두 해볼 수 있는 폼을 만들고, Script(JavaScript)를 통해서 입력값을 검증하는 과정까지 수행해보았다.

 

radiobutton 중 어떤 것을 붙이느냐에 따라서 다른 영수증 종류가 나타나도록 했다.

조건문을 만족하면 div의 style.display = 'block' / 'none'을 바꿔서 화면이 다르게 구성되도록 만들었다.

내가 봤을 때는 form을 얼마나 잘 활용할 수 있느냐가 관건인 것 같다.

일단, 화면 구성은 이러하다.

 

그리고, 이 화면을 구성하기 위한 HTML 코드는 아래와 같다.

 

    <h5>영수증 확인을 위해 아래의 정보를 정확히 입력해 주시기 바랍니다.</h5>
    <form id="receipt" action="https://www.w3schools.com/action_page.php">
        <table class="radioButton" style="border-bottom: none;">
            <td>
                <input type="radio" id="paycheck" name="check" value="payInfo" onclick="divDisplay()" checked>구매자명 + 금액
                &nbsp;&nbsp;&nbsp;
                <input type="radio" id="emailcheck" name="check" value="email" onclick="divDisplay()">이메일
                &nbsp;&nbsp;&nbsp;
                <input type="radio" id="cardcheck" name="check" value="cardNumber" onclick="divDisplay()">카드번호
                &nbsp;&nbsp;&nbsp;
            </td>
        </table>



        <div id="div1" class="choice" style="display: block;">
            <table>
                <tr>
                    <th class="choice1"
                        style="border-bottom: 0.5px solid #888; border-right: 0.5px solid #888; border-top: #888;">
                        구매자명
                    </th>
                    <td style="border-bottom: 0.5px solid #888; border-top: #888;">
                        <input name="customerName" type="text">
                    </td>
                </tr>
                <tr>
                    <th class="choice1" style="border-right: 0.5px solid #888;">결제금액</th>
                    <td>
                        <input name="payAmount" type="text">
                    </td>
                </tr>
            </table>
        </div>


        <div id="div2" class="choice" style="display: none;">
            <table>
                <tr>
                    <th class="choice2">이메일</th>
                    <td>
                        <input name="email" type="text">
                    </td>
                </tr>
            </table>
        </div>


        <div id="div3" class="choice" style="display: none;">
            <table>
                <tr>
                    <th class="choice3">카드번호</th>
                    <td>
                        <input class="cardnum" name="cardnum" type="text"> -
                        <input class="cardnum" name="cardnum" type="text"> -
                        <input class="cardnum" name="cardnum" type="text"> -
                        <input class="cardnum" name="cardnum" type="text">
                    </td>
            </table>
        </div>
    </form>

    <br><br>

    <div id="submit">
        <button onclick="chkSubmit();" style="width: 70px; height: 30px;">입력</button>
    </div>

    <br>
    <p>
        <h6>
            [참고사항] <br>
            구매사항과 금액은 결제결과 메일에 기재된 내역을 기준으로 입력하시기 바랍니다.
        </h6>
    </p>

이러하다. 세 개의 화면을 다 구성하고 하나씩 감추고 보여주는 방식이다보니 생각보다 길다.

가장 중요한 초기 화면은 구매자명과 결제금액이 표시된 화면으로 둘 것이기 때문에 

<div id="div1" class="choice" style="display: block;"> 으로 설정해두었다.

 

그리고 스타일은 크게 중요하지 않았기 때문에 CSS문법을 이용한 <style>코드만 첨부하겠다.

 

    <style>
        .choice {
            width: 500px;
            border-top: 1px solid #888;
            border-bottom: 1px solid #333;
        }

        .choice1,
        .choice2,
        .choice3 {
            width: 80px;
            height: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            border-collapse: collapse;
        }

        th {
            width: 500px;
            background-color: silver;
        }

        td {
            background-color: whitesmoke;
        }

        .cardnum {
            width: 50px;
        }

        .radioButton {
            width: 502px;
            border-top: 1px solid #333;
            background-color: whitesmoke;
            text-align: center;
        }

        #submit {
            position: absolute;
            width: 500px;
            margin: auto;
            text-align: center;
        }

        #receipt {
            width: 500px;
        }
    </style>

 

그리고 Script (Javascript)

기본적으로 아래와 같이 동작해야 한다.

서버는 w3schools로 두고,

<form id="receipt" action="https://www.w3schools.com/action_page.php"> 로 form을 설정해두었다.

위를 보면 알겠지만, 조건을 설정해두고 그 조건에 맞지 않으면 alert("") (팝업창)가 발생하게 만들었다.

1. 구매자명 : 필수조건으로 입력되지 않았으면 서버로 넘어가지 않도록 구성

2. 결제금액 : 0보다 작은 값이 입력되거나, 비어있거나, 숫자가 아니면 서버로 넘어가지 않도록 구성

3. 이메일과 카드번호는 정규표현식 조건에 맞지 않으면 서버로 넘어가지 않도록 구성

   - 이메일 정규표현식은 아래로 정했다. (숫자 영문자로 구성된 @앞)+(숫자 영문자(이메일 사이트))+.+(com등 영문자)

     정도로 구성한 정규표현식 ( googling해도 나온다 )

   - 카드 패턴을 0000-0000-0000-0000 으로 구성할수도 있지만 지금 숫자 4개씩 끊어서 받는 것으로 화면을 구성했기

     때문에 한 뭉텅이씩 4개의 숫자가 들어가 있는지를 검증하겠다.

 

결과적으로 script는

    <script>
        function divDisplay() {
            var form = document.forms['receipt'];

            if (form['check'][0].checked) {
                document.getElementById('div1').style.display = 'block';
                document.getElementById('div2').style.display = 'none';
                document.getElementById('div3').style.display = 'none';
            } else if (form['check'][1].checked) {
                document.getElementById('div1').style.display = 'none';
                document.getElementById('div2').style.display = 'block';
                document.getElementById('div3').style.display = 'none';
            } else if (form['check'][2].checked) {
                document.getElementById('div1').style.display = 'none';
                document.getElementById('div2').style.display = 'none';
                document.getElementById('div3').style.display = 'block';
            }

        }

        // email 패턴
        var emailPat = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
        // cardnum 패턴
        var numPat = /[0-9]{4}/;

        function chkSubmit() {
            var form = document.forms['receipt'];


            if (form['customerName'].value.trim() == "") {
                document.getElementById('div1').style.display = 'block';
                document.getElementById('div2').style.display = 'none';
                document.getElementById('div3').style.display = 'none';
                alert("구매자명을 입력하세요.")
                form['customerName'].focus();
                return;
            }

            if (isNaN(form['payAmount'].value.trim()) || form['payAmount'].value.trim() < 0 || form['payAmount'].value.trim() == "") {
                document.getElementById('div1').style.display = 'block';
                document.getElementById('div2').style.display = 'none';
                document.getElementById('div3').style.display = 'none';
                alert("유효한 결재금액이 아닙니다.")
                form['payAmount'].focus();
                return;
            }

            var email = form['email'].value.trim();

            if (!emailPat.test(email)) {
                document.getElementById('div1').style.display = 'none';
                document.getElementById('div2').style.display = 'block';
                document.getElementById('div3').style.display = 'none';
                alert("유효한 이메일이 아닙니다.");
                form['email'].focus();
                return;
            }

            var cardnum = form['cardnum'];
            for (i = 0; i < cardnum.length; i++) {
                if (!numPat.test(cardnum[i].value.trim())) {
                    document.getElementById('div1').style.display = 'none';
                    document.getElementById('div2').style.display = 'none';
                    document.getElementById('div3').style.display = 'block';
                    alert("유효한 카드번호가 아닙니다.");
                    form['cardnum'][0].focus();
                    return;
                }
            }

            form.submit();
        }
    </script>

</body>

</html>

 

이렇게 구성이 된다.

다음 게시물에서는 본격적으로 데이터를 크롤링해보는 과정을 담도록 하겠다!