JAVASCRIPT STEP 24 - FORM

★ 회원가입 form

• HTML 코드

<form name="form1" action="ex27_ok.jsp">
    <h1>회원 가입</h1>

    <table border="1">
        <tr>
            <th>이름</th>
            <td><input type="text" name="txtname"></td>
        </tr>
        <tr>
            <th>나이</th>
            <td><input type="number" name="txtage" min="10" max="100"></td>
        </tr>
        <tr>
            <th>아이디</th>
            <td><input type="text" name="txtid"></td>
        </tr>
        <tr>
            <th>암호</th>
            <td><input type="password" name="txtpw"></td>
        </tr>
        <tr>
            <th>암호확인</th>
            <td><input type="password" name="txtpwc"></td>
        </tr>
    </table>
    <hr>
    <input type="button" value="가입하기" name="btn">
</form>

• JavaScript 코드

document.form1.btn.onclick = m1;
        
function m1() {

    var txtname = document.form1.txtname;
    var txtage = document.form1.txtage;
    var txtid = document.form1.txtid;
    var txtpw = document.form1.txtpw;
    var txtpwc = document.form1.txtpwc;
    
}

• 유효성 검사 > 잘못된 값을 찾기!!
• 1. 이름 유효성 검사

//유효성 검사 > 잘못된 값을 찾기!!

//이름
//- 필수값
//- 2~5자 이내
//- 한글만

if(txtname.value == '') {
    alert('이름을 입력하세요.');
    txtname.focus();
    return; //진행 종료
}

if(txtname.value.length < 2 || txtname.value.length > 5) {
    alert('이름을 2~5자 이내로 입력하세요.');
    //txtname.value= ''; //텍스트박스 초기화
    //txtname.focus();
    txtname.select(); //기존에 잘못된것을 한번 더 포커스를 주면서 보여주는 역할
    return;
}

for (var i=0; i<txtname.value.length; i++) {
    var c = txtname.value.charAt(i);

    if(c <'가' || c>'힣') {
        alert('이름을 한글로 입력하시오.');
        txtname.select();
        return;
    }
}

//올바른 입력 > 전송
document.form1.submit(); //input type="submit"> 클릭과 동일

• 2. 나이 유효성 검사 

//나이
//1. 필수값
//2. 숫자만
//3. 범위 검사(10세 이상 ~ 100세 이하)

if(textage.value = '') {
    alert('나이를 입력하세요.');
    txtage.focus();
    return;
}

• 3. 아이디 검사(정규표현식 사용)
• 정규표현식 사용 > var regex = /정규표현식/;

// 아이디: 필수값, 4~12자 이내, 영어+숫자+_, 숫자로 시작 불가

// JavaScript > 정규표현식 사용
// var regex= new RegExp('정규표현식'); -> 클래스
// var regex = /정규표현식/; -> 정규표현식 객체(리터럴 표기법)
var regex = /^[A-Za-z_][A-Za-z0-9_]{3,11}$/;

if(!regex.test(txtid.value)) {
    alert('아이디를 올바르게 입력하세요.');
    txtid.select();
    return;
}

• 4. 암호 > 일치 검사

// 암호>일치
if(txtpw.value!=txtpwc.value) {
    alert('암호가 일치하지 않습니다.');
    txtpw.focus();
    return;
}

 

■ 실행 결과

회원가입 실행

 

★ CHECK

• HTML 코드

<h1>체크 박스</h1>

<form name="form1">
    <input type="checkbox" name="cb1">
    <input type="button" value="확인" name="btn1">
</form>

• JavaScript 코드 
• 1. 버튼 클릭시, 체크|체크해제

var cb1 = document.form1.cb1;

document.form1.btn1.onclick = m1;

function m1() {
    // cb1.checked = true;
    cb1.checked = !cb1.checked;
}

• 2. 버튼 클릭시 콘솔에 true, false 찍기

// cb1.onclick = m2; // -> 체크박스를 직접 클릭시 발생
cb1.onchange = m2; //입력 컨트롤의 값이 변할 때 발생하는 이벤트

function m2() {
    console.log(cb1.checked);
}

• 3. 약간 동의 체크박스
• HTML 코드

<h1>회원 가입</h1>

    <h2>이용 약관</h2>

    <div style="width:500px; height:150px; overflow: auto; border:1px solid black; padding : 10px;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facere ullam id est, libero quod vel asperiores nesciunt minima amet ex, similique architecto itaque quis obcaecati consequuntur qui, necessitatibus ratione sit nemo saepe sequi earum veniam voluptatibus eveniet! Ducimus, aliquid rerum exercitationem laudantium accusantium obcaecati, ut sit ratione perferendis quae consequatur optio, ea iste quam animi fuga doloremque esse laboriosam quasi non ipsam! Nemo dicta esse necessitatibus commodi quisquam corporis doloribus optio recusandae nulla, natus veniam earum architecto obcaecati iure ducimus incidunt! Illum sunt et, officia earum voluptatibus aspernatur, quasi sit officiis, vero distinctio quis nostrum facere possimus magni enim tempora. Iste eum magni sit? Ex ipsa maiores doloribus eaque quis alias atque blanditiis quasi, magnam, aliquid debitis accusamus! Ex voluptatem vero et unde nesciunt corrupti molestias repudiandae id ipsum totam enim ipsa numquam facilis, obcaecati sequi veritatis. Soluta aspernatur illum accusantium, velit maxime consectetur voluptatibus in quos voluptatum saepe facere voluptatem voluptates. Perferendis nobis modi enim nisi, a dolores aliquid ab voluptatibus alias eius, facere sed dolore. Tenetur doloremque et culpa incidunt aliquid est sint possimus necessitatibus quisquam. Harum ipsam eos nostrum accusamus iure dolores numquam culpa consequuntur ut quod tenetur veritatis aspernatur voluptatibus maiores, sunt odio explicabo possimus magnam quo dolorem nihil dolor exercitationem labore magni. Dolorum dolorem unde sint possimus voluptas exercitationem. Quas quos alias facilis molestias recusandae assumenda hic, velit voluptatibus dolorum magni incidunt. Adipisci, ipsa repellendus. Officiis minima accusantium explicabo est corporis perspiciatis nulla? Est expedita ipsum pariatur consequatur ab, minima nulla saepe autem, fuga ullam harum dicta omnis id perspiciatis placeat voluptatum. Architecto quidem perspiciatis culpa repudiandae et, ullam ipsa dolorem, similique possimus qui saepe at consequuntur libero doloremque pariatur recusandae corporis modi officia id est dolores nostrum. Atque pariatur eveniet similique iste dolorum ad eius dolores, temporibus, excepturi voluptas, exercitationem minima? Sunt quasi nihil commodi illo quae. Dignissimos possimus nostrum eaque rerum tempore! Voluptates optio ab blanditiis. Provident tempore ipsam esse accusantium magni repudiandae voluptatem accusamus distinctio placeat mollitia ab sint ullam quidem commodi, rerum beatae debitis amet? Aspernatur reprehenderit veniam minima voluptatum, provident, alias qui distinctio porro vel, repellendus cupiditate recusandae maxime impedit. Numquam dignissimos ab minus minima, a at expedita nostrum, maxime optio voluptas doloremque totam culpa nam odit saepe sunt perferendis quibusdam similique fuga voluptatum? Sunt sed vero veniam esse officiis vitae, officia alias reprehenderit optio aliquam repudiandae, voluptates dolor voluptas repellat dolores? Quos quas ipsam laborum corrupti id nisi sunt magni nam dolore nulla, cupiditate omnis repellat sit impedit ab? Ullam ipsa, ea quasi nobis, omnis id autem necessitatibus voluptatem suscipit quas doloribus aspernatur alias. Aliquid vel exercitationem quaerat magni rerum ab possimus voluptatem, labore, inventore perferendis corporis quia id quisquam ullam quae eveniet aperiam mollitia autem, officiis deserunt ipsum facere harum omnis? Enim porro sed nulla omnis nihil? Quae ullam ipsum quaerat dignissimos necessitatibus, ab ducimus sunt dolorem perferendis. Facere totam perspiciatis inventore quos repellendus molestiae consequuntur laboriosam illum velit porro libero tenetur provident laudantium dolores quis sit corporis distinctio doloremque fuga beatae, numquam, soluta, saepe debitis! Enim, consequatur.</div>
    <hr>
    <label>
        <input type="checkbox" name="cbagree">
        약간에 동의합니다.
    </label>
    <hr>
    <input type="button" value="다음 단계로" disabled name="btnnext" onclick="location.href='ex27_form.html';">

• JavaScript 코드

var cbagree = document.all.cbagree;
var btnnext = document.all.btnnext;

cbagree.onchange = m3;

function m3() {
    if(cbagree.checked) {
        btnnext.disabled = false;
    }else {
        btnnext.disabled = true;
    }
}

• 실행 결과 

실행 결과