Live validator

사용자 이름이 필요합니다 -> Username is required

사용자 이름이 5자 이하일 때 -> Username is too short!

사용자 이름에 숫자, 소문자, 언더바 이외의 다른 것이 들어갔을 때
-> match(/[^a-z0-9_]/)

조건을 만족했을 때

---

HTML

<h1>Live validator</h1>

    <div>
        <label for>Username</label>
        <input type="text" id="input"> 
        <p id="message">Enter username.</p>
    </div>

CSS

 <style>
        input {
            width: 18rem;
            padding: 0.5rem;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        label {
            display: block;
        }
        .success {
            color: skyblue;
        }
        .not {
            color: red;
        }
        
    </style>

JS

<script>
        var input = document.getElementById('input');
        var message = document.getElementById('message');

        console.log(input)
        console.log(message)
       
        // input 부분에 keyup 이벤트
        input.addEventListener('keyup', (e) => {

            try {
                // keyup 제대로 실행되는지 확인
                var username = e.target.value;

            console.log(username)

            // 여기서 테스트...

            // 사용자 이름이 필요할 때
            if (!username) {
            	// Username is required 출력
                throw 'Username is required';
            }

            // 사용자 이름이 5자 이하일 때
            if (username.length < 5) {
            	// Username is too short! 출력
                throw 'Username is too short!';
            }


            // 사용자 이름에 숫자, 소문자, 언더바 이외의 다른 것이 들어갔을 때
            if (username.match(/[^a-z0-9_]/)) {
            // lowercase letters, number and underscore are only accepted. 출력
                throw 'lowercase letters, number and underscore are only accepted.';
            }

			// 조건 충족 시 cool username! 출력
            message.innerHTML = `<p class = "success">cool username!</p>`
            

            } catch(error) {
            	// 에러가 생길 때마다 문구가 바뀌어야 함.
                message.innerHTML = `<p class = "not">${error}</p>`
                console.log(error)
            }
        } )
        
    </script>

---

try... catch

• 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정

1. try

• 실행될 코드

2. catch

• try 블록에서 예외가 발생했을 때 실행될 때 코드

ex) age에 따라 미성년자인지 아닌지 출력

<script>
        try {
            var age = 20

            if (age < 18) {
                throw "미성년자입니다"
            }

        } catch (error) {
            console.log(error)
        }

    </script>