λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
ν”„λ‘œκ·Έλž˜λ° 곡뢀/JavaScript

[ex27] form(μœ νš¨μ„± 검사)

λŒ€μž₯μΏ΅μ•Ό 2023. 4. 26. 12:02

ex27

 

ν™”λ©΄

http://127.0.0.1:5500/javascript/ex27_form.html

 

μ½”λ“œ

<body>
    <!-- ex27_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>

    <script>
        
        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;

            //μœ νš¨μ„± 검사 > 잘λͺ»λœ 값을 μ°ΎκΈ°!!

            //이름
            //- ν•„μˆ˜κ°’
            //- 2~5자 이내
            //- ν•œκΈ€λ§Œ

            if (txtname.value == '') {
                alert('이름을 μž…λ ₯ν•˜μ„Έμš”.');
                txtname.focus();
                return; //진행 μ’…λ£Œ
            }

            if (txtname.value.length < 2 || txtname.value.length > 5) {
                alert('이름을 2~5자 μ΄λ‚΄λ‘œ μž…λ ₯ν•˜μ„Έμš”.');
                // txtname.focus();
                // txtname.value = ''; //ν…μŠ€νŠΈ λ°•μŠ€ μ΄ˆκΈ°ν™”

                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;
                }
            }



            //λ‚˜μ΄
            //1. ν•„μˆ˜κ°’
            //2. 숫자만
            //3. λ²”μœ„ 검사(10μ„Έ 이상 ~ 100μ„Έ μ΄ν•˜)
            if (txtage.value == '') {
                alert('λ‚˜μ΄λ₯Ό μž…λ ₯ν•˜μ„Έμš”.');
                txtage.focus();
                return;
            }



            //아이디
            //1. ν•„μˆ˜κ°’
            //2. 4~12자 이내
            //3. μ˜μ–΄ + 숫자 + _
            //4. 숫자둜 μ‹œμž‘ λΆˆκ°€

            //JavaScript > μ •κ·œν‘œν˜„μ‹ μ‚¬μš©
            //var regex = new RegExp('μ •κ·œν‘œν˜„μ‹'); > 잘 μ•ˆμ”€
            //var regex = /μ •κ·œν‘œν˜„μ‹/; > νŽΈν•¨
            var regex = /^[A-Za-z_]{1}[A-Za-z0-9_]{3,11}$/;

            if (!regex.test(txtid.value)) {
                alert('아이디λ₯Ό μ˜¬λ°”λ₯΄κ²Œ μž…λ ₯ν•˜μ„Έμš”.');
                txtid.select();
                return;
            }


            //μ•”ν˜Έ > 일치
            if (txtpw.value != txtpwc.value) {
                alert('μ•”ν˜Έκ°€ μΌμΉ˜ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.');
                txtpw.focus();
                return;
            }


            

            //μ˜¬λ°”λ₯Έ μž…λ ₯ > 전솑
            //<input type="submit"> 클릭과 동일
            document.form1.submit(); 

        }//m1

    </script>

</body>
</html>

 

'ν”„λ‘œκ·Έλž˜λ° 곡뢀 > JavaScript' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[ex31] select  (0) 2023.04.27
[ex28~30] check, radio, range  (0) 2023.04.27
[ex26] μš”μ†Œ(νƒœκ·Έ)의 이벀트 μΌκ΄„μ²˜λ¦¬  (0) 2023.04.26
[ex24~25] λ‘€μ˜€λ²„ 이미지, 메세지 λ°•μŠ€  (0) 2023.04.26
[ex18~22] screen, location, history, collection, link  (0) 2023.04.25

'ν”„λ‘œκ·Έλž˜λ° 곡뢀/JavaScript' Related Articles

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”