상세 컨텐츠

본문 제목

영수증 유효성 검사_Json - 데이터 가져오기, 유효성 검사

WEB-Front end/*JAVASCRIPT

by 주초위왕 2023. 10. 25. 09:43

본문

<script>
    // 위의 HTML 은 수정하지 마세요
    // 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요
    document.getElementById('btn').addEventListener('click', function () {
        let e;
        for (x of document.getElementsByName('option')) {
            if (x.checked) {
                e = x.value;
                break;
            }
        }

        switch (e) {
            case '구매자명+금액': {
                const frm = document.forms['frm1'];
                if (!frm['name'].value.trim().length) {
                    alert('구매자명을 입력하세요');
                } else if (Number(frm['price'].value.trim()) <= 0) {
                    alert('올바른 금액을 입력하세요(0보다 커야함)');
                } else {
                    frm.submit();
                }
                break;
            }
            case '이메일': {
                const frm = document.forms['frm2'];
                let regex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
                console.log(frm['email'].value.trim());
                if (!regex.test(frm['email'].value.trim())) {
                    alert('이메일 형식에 맞춰 제대로 입력하세요.');
                } else {
                    frm.submit();
                }
                break;
            }
            case '카드번호': {
                const frm = document.forms['frm3'];
                let regex = new RegExp('^[0-9]{4}$');

                const numlist = document.getElementsByName('cardNum');
                let check = true;
                for(x of numlist) {
                    if(!regex.test(x.value)) {
                        alert('카드번호 제대로 입력하세요');
                        check = false;
                        break;
                    }
                }

                check && frm.submit();
                break;
            }
        }
    });

    function hidenClass(e) {
        switch (e.value) {
            case '구매자명+금액': {
                document.forms['frm1'].classList.remove('hidden');
                document.forms['frm2'].classList.add('hidden');
                document.forms['frm3'].classList.add('hidden');
                break;
            }
            case '이메일': {
                document.forms['frm1'].classList.add('hidden');
                document.forms['frm2'].classList.remove('hidden');
                document.forms['frm3'].classList.add('hidden');
                break;
            }
            case '카드번호': {
                document.forms['frm1'].classList.add('hidden');
                document.forms['frm2'].classList.add('hidden');
                document.forms['frm3'].classList.remove('hidden');
                break;
            }
        }
    }


    for (e of document.getElementsByName('option')) {

        e.addEventListener("focus", function () {
            hidenClass(this);
        });

    }

</script>

유상곤님 코드

<script>
        var api_key = "36e7dd6b4b31c8b29a940ccd09b0f09e";

        function loadData() {
            const frm = document.forms['frm'];

            const regDate = frm['regDate'].value.trim().split('-').join('');
            let multiMovieYn = frm['multiMovieYn'].value.trim();
            if (multiMovieYn.length) {
                url += `&multiMovieYn=${multiMovieYn}`;
            }

            let repNationCd = frm['repNationCd'].value.trim();
            if (repNationCd.length) {
                url += `&repNationCd=${repNationCd}`;
            }

            let itemPerPage = frm['itemPerPage'].value.trim();

            if (!regDate.length) {
                alert('날짜 포맷이 맞지 않습니다.');
            } else if (!Number(itemPerPage) || (!Number.isInteger(Number(itemPerPage)) || (Number(itemPerPage) < 1 || Number(itemPerPage) > 10)))
                alert("출력 ROW는 1 ~ 10 사이의 정수이어야 합니다.");
            else {
                url += `&targetDt=${regDate}&itemPerPage=${itemPerPage}`;
                // console.log(url);
                fetch(url)
                    .then(response => response.json())
                    .then(obj => parseJSON(obj))
                    ;
            }
        }


        function parseJSON(data) {
            const table = [];
            table.push(`
                <tr>
                    <th>순위</th>
                    <th>영화명</th>
                    <th>누적관객수</th>
                    <th>전일대비순위증감</th>
                </tr>
            `);

            const list = data.boxOfficeResult.dailyBoxOfficeList;

            for(x of list) {
                table.push(`
                    <tr>
                        <td>${x.rank}</td>
                        <td>${x.movieNm}</td>
                        <td>${x.salesAmt}</td>
                        <td>${x.rankInten}</td>
                    </tr>
                `);
            }
           
            document.getElementById('resultTable').innerHTML = table.join('\n');

        }

        function removeTable() {
            document.getElementById("resultTable").innerHTML = '';
        }
    </script>

유상곤님 코드

<script>
    // 위의 HTML 은 수정하지 마세요
    // 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요
   

    let radios = document.querySelectorAll('#receiptOption input');
    let frms = document.querySelectorAll('#receipt form');
    let formNum = 0;
   
    for(e of document.querySelectorAll('#receiptOption input')){
        e.addEventListener('change', function(){
           
            for(let i=0; i<3; i++){
                radios[i].checked ? frms[i].classList.remove('hidden') || (formNum = i) : frms[i].classList.add('hidden');
            }
        })
    }
   

    function check() {
        let bool = true;

        if(formNum==0){
            frms[0]['name'].value.trim() === "" && (alert("구매자명을 입력하세요"),bool=false);
            frms[0]['price'].value.trim() === "" && (alert("결제금액을 입력하세요"),bool=false);
        }

        if(formNum==1){
            //계정@도메인. 한글안됨
            /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(frms[1]['email'].value.trim()) || (alert("이메일을 입력하세요"),bool=false);
        }
   
        if(formNum==2){
            for(e of frms[2]['cardNum']){
                /^\d{4}$/.test(e.value.trim()) || (bool=false);
            }
             bool || alert("카드번호를 입력하세요");
        }

          bool && frms[formNum].submit();
       
    }
   
    let btn = document.getElementById('btn');
    btn.addEventListener('click', check);



   

</script>

종현님 코드

<script>

    var submitBtn = document.getElementById("btn");
   
    // 위의 HTML 은 수정하지 마세요
    // 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요

    for(e of document.querySelectorAll("#receiptOption input")){
        e.addEventListener("click",function(){
        if(this.value == "구매자명+금액") {
            document.forms['frm1'].classList.remove('hidden');
            document.getElementsByName("name").item(0).value = "";
            document.getElementsByName("price").item(0).value = "";
            document.forms['frm2'].classList.add('hidden');
            document.forms['frm3'].classList.add('hidden');
        }
        if(this.value == "이메일") {
            document.forms['frm1'].classList.add('hidden');
            document.forms['frm2'].classList.remove('hidden');
            document.getElementsByName("email").item(0).value = "";
            document.forms['frm3'].classList.add('hidden');
        }
        if(this.value == "카드번호") {
            document.forms['frm1'].classList.add('hidden');
            document.forms['frm2'].classList.add('hidden');
            document.forms['frm3'].classList.remove('hidden');
            for(e of document.getElementsByName("cardNum")){
                e.value = "";
            }
        }
    });
    }


    submitBtn.addEventListener("click",function(){
       
        if(document.getElementsByName("option").item(0).checked){
            if(document.getElementsByName("name").item(0).value.trim().length == 0) {
                alert("구매자명을 입력하세요"); return}
            if(document.getElementsByName("price").item(0).value.trim().length == 0){
                alert("결제 금액을 입력하세요"); return}
            document.forms['frm1'].submit()
        }


        if(document.getElementsByName("option").item(1).checked){

            // 이메일 정규표현식
            let regexp_email = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;  
            if(!regexp_email.test(document.getElementsByName("email").item(0).value.trim())){
                alert("이메일을 입력하세요"); return}
                document.forms['frm2'].submit()
        }


        if(document.getElementsByName("option").item(2).checked){

            // 카드번호 정규표현식
            let regexp_number = /\d{4}/;
            for(e of document.getElementsByName("cardNum")){
                if(!regexp_number.test(e.value)) {
                    alert("카드번호를 입력하세요"); return}
            }
            document.forms['frm3'].submit()
        }
    });
</script>

이상진

<script>

        var api_key = "f5eef3421c602c6cb7ea224104795888";
        function removeTable() {
            document.getElementById('resultTable').removeChild(document.getElementById('resultTable').childNodes[0]);
        }

        function cheack(targetDt, itemPerPage) {

            // 날짜 유효성 검사
            const regexp_date = /\d{4}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])$/
            if (!regexp_date.test(targetDt)) {
                alert("날짜 포맷이 맞지 않습니다.")
                return false;
            }

            // 페이지 ROW 유효성 검사
            if (!(itemPerPage > 0 && itemPerPage < 11)) {
                alert("출력ROW는 1 ~ 10 사이의 정수이어야합니다.")
                return false;
            }

            return true;
        }

        function loadData() {
            let url;
            const frm = document.forms['frm']
            let targetDt = frm["targetDt"].value.replaceAll("-", "");
            let multiMovieYn = frm["multiMovieYn"].value;
            let repNationCd = frm["repNationCd"].value;
            let itemPerPage = frm["itemPerPage"].value;

            // 유효성 검사
            if (!cheack(targetDt, itemPerPage)) return;

            url = `${req_url}?key=${api_key}&targetDt=${targetDt}`
            fetch(url)
                .then(Response => Response.json())
                .then(jsonObj => parseJSON(jsonObj));
        }

        function parseJSON(jsonObj) {
            const table = [];
            table.push("<tr><th>순위</th><th>영화명</th><th>누적관객수</th><th>전일대비순위증감</th></tr>");
            jsonObj.boxOfficeResult.dailyBoxOfficeList.forEach(list => {
                table.push(`
                <tr>
                    <td>${list.rank}</td>
                    <td>${list.movieNm}</td>
                    <td>${list.audiAcc}</td>
                    <td>${list.rankInten}</td>
                </tr>
                `)
            });
            document.getElementById("resultTable").innerHTML = table.join('\n');
        }
    </script>
<script>
    // 위의 HTML 은 수정하지 마세요
    // 위의 HTML 안에 inline JS 코드 없이 동작할수 있도록 아래에 작성해보세요
   

    let radios = document.querySelectorAll('#receiptOption input');
    let frms = document.querySelectorAll('#receipt form');
    let formNum = 0;
   
    for(e of document.querySelectorAll('#receiptOption input')){
        e.addEventListener('change', function(){
           
            for(let i=0; i<3; i++){
                radios[i].checked ? frms[i].classList.remove('hidden') || (formNum = i) : frms[i].classList.add('hidden');
            }
        })
    }
   

    function check() {
        let bool = true;

        if(formNum==0){
            frms[0]['name'].value.trim() === "" && (alert("구매자명을 입력하세요"),bool=false);
            frms[0]['price'].value.trim() === "" && (alert("결제금액을 입력하세요"),bool=false);
        }

        if(formNum==1){
            //계정@도메인. 한글안됨
            /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(frms[1]['email'].value.trim()) || (alert("이메일을 입력하세요"),bool=false);
        }
   
        if(formNum==2){
            for(e of frms[2]['cardNum']){
                /^\d{4}$/.test(e.value.trim()) || (bool=false);
            }
             bool || alert("카드번호를 입력하세요");
        }

          bool && frms[formNum].submit();
       
    }
   
    let btn = document.getElementById('btn');
    btn.addEventListener('click', check);



   

</script>

 

이종현님

반응형
저작자표시 비영리

'WEB-Front end > *JAVASCRIPT' 카테고리의 다른 글

자바스크립트 object, class문법  (0) 2024.01.12
[국비 프론트 수업] 제이쿼리로 유효성 검사  (0) 2023.10.27
Js006_Form4  (0) 2023.10.24
[국비 프론트 단위 평가] 이벤트 리스너를 활용해 글자 제어하기 (코드 있음)  (0) 2023.10.24
[자바스크립트] 공부 리스트  (0) 2023.07.19

관련글 더보기

댓글 영역

티스토리툴바