form 만들면서 배우는 조건문

Bootstrap에서 form을 하나 가져와봅시다.

Bootstrapgetbootstrap

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
 
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>

이 코드를 참조해서 js008.html의 modal에 이 코드를 넣어 줌

<form action="success.html">
    <div class="mb-3">
        <input type="text" class="form-control" id="email">
    </div>
    <div class="mb-3">
        <input type="password" class="form-control" id="password">
    </div>
    <button type="submit" id="submit" class="btn btn-primary">Submit</button>
    <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>

그리고success.html을 같은생폴더에성생

form 바깥에 있던 닫기 버튼도 form 안으로 넣어줌

🎈submit 버튼 외의 버튼은 type을 button으로 지정

💎 전송버튼을 누를 때 <input>에 입력값이 없으면 alert 띄우기

이런걸 개발자스럽게 얘기하면 유효성 검사 라고 한다.

🎈조건문 문법

if(조건식) {
    //실행할 코드
    console.log("조건 충족");
}

//script 부분에 넣어서 참과 거짓 확인 
if(2<1) {
    console.log("참");
}else {
    console.log("거짓");
}

✨ 실습. 전송 버튼을 누를 때 <input>에 입력 값이 없으면 alert 띄우기

alert 띄우는 것은

alert("alter 창에띄울 문구");

그럼 공백 검사하는 것 만 알면 할 수 있겠다.

아직 공백 검사는 배워본 적이 없지만 스스로 검색하면서 코드를 짜보자.

😱내가 하는 걸 따라 쳐서는 실력이 늘 수가 없다.😱

$('#submit').on('click', function (){
    //여기에 코드 작성하면 작동함
    //조건문
    alert("아이디를 입력하세요");
    
})

$('form').on('submit', function (e){
   console.log(document.getElementById('email').value);
   if($('#email').val() == ''){
      alert('아이디를 입력하세요');
      e.preventDefault();
   }
});

e는 이벤트 객체

e.preventDefault() 는 폼 전송을 막는 코드

if(1) {
 
}else if(2){

}else if(조건3){

}else {
    //나머지
}

조건 2 가 참이면 조건3부터 else까지는 그냥 지나감

✨ 과제. 전송 누르면 아이디/ 패스워드 입력란 공백검사

✨ 과제. 패스워드가 4자 미만이면 길게 입력하라고 안내문 띄우기

if($('#password').val() == ''){
    alert('패스워드를 입력하세요');
}else if($('#password').val().length <4){
    alert('패스워드는 4자 이상이어야 합니다.');
}