[JavaScript] 로그인 폼

로그인 폼 만들기

✍️ 코드

<div class="black-bg">
        <div class="white-bg">
            <h4>로그인 하세요</h4>
            <form action="success.html">
                <div class="my-3    ">
                    <input type="text" class="form-control" id="id">
                </div>
                <div class="my-3">
                    <input type="password" class="form-control" id="password">
                </div>
                <button type="submit" class="btn btn-primary" id="전송">전송</button>
                <button tye="button" class="btn btn-danger" id="close">닫기</button>
            </form>
        </div>
    </div>

bootstrap 설치해 주시고..이렇게 코드 짜면 저렇게 예쁜 기본 로그인 폼 완성됩니다! 😄

---

아이디 공백 검사

< input > 에 입력한 값이 아무것도 없으면 전송 버튼 누를 때 알림을 띄우려면! 조건문을 사용하시면 됩니다 :)

✍️ 코드

<script>
document.getElementById('전송').addEventListener('click', function () {
      input에 입력한 값이 공백이면 알림 띄워 주세요
    }
</script>

1. 전송 버튼을 누르면..! input에 입력한 값이 공백인 경우 알림 띄워 주세요 이렇게 짜봅니다

<script>
document.getElementById('전송').addEventListener('click', function () {
      if (input에 입력한 값이 공백) {
        alert('아이디 공백입니다 문자를 입력하세요')
    }
</script>

2. 조건문을 사용하여 알림 띄우기! 입력한 값이 '~~이면'이니까..! 조건문을 사용하면 됩니다!

<script>
document.getElementById('전송').addEventListener('click', function () {
      let 입력한값 = document.getElementById('id').value
      if (입력한값 == '') {
        alert('아이디 공백입니다 문자를 입력하세요')
    }
</script>

3. 공백은 ' ' 이거이므로 저렇게 작성해 줍니다

---

비밀번호 공백 검사

아이디 공백 검사랑 동일하게 작성해 줍니다!

✍️ 코드

<script>
document.getElementById('전송').addEventListener('click', function () {
      if (document.getElementById('password').value == '') {
        alert('비밀번호 공백입니다 문자를 입력하세요')
      }
    }
</script>

---

비밀번호 길이 검사

✍️ 코드

<script>
document.getElementById('전송').addEventListener('click', function () {
     if (document.getElementById('password').value.length < 6) {
        alert('비밀번호는 6자리 이상이어야 합니다')
      }
</script>

---

Retrospect 🧐

간단한 로그인 폼 만들기 해보았다! 자바스크립트 정말 기초적인 부분이지만 구현해 보니 잼난다 😃 아이디 이메일 형식 / 비번 영문(대소문자) 포함 / 비번 특수 문자 포함 등등.. 다양한 로그인 유효성 검사가 있어서 조만간 더 배워야겠다!