자바스크립트 18 - 데이터유효성검사 1

1. 이름 입력값없으면 : '이름을 입력하세요'

2. 비번 입력값없으면 : '비번을 입력하세요'

3. 비번과 비번확인 값이 다르면 : '비번을 확인하세요'

4. 비번과 비번확인 값이 같으면 : '이름님 환영합니다'

window.onload = function(){
          let mform = document.querySelector('#mform');  
          mform.onsubmit = function(){
              let name =document.querySelector('#name').value;
              let pass =document.querySelector('#pass').value;
              let passCheck =document.querySelector('#pass-check').value;
              
              if(name == ""){
                alert('이름을 입력하세요');
              }else if(pass == "" || passCheck ==""){
                  alert('비번을 입력하세요');
              }else if(pass != passCheck){
                    alert('비번을 확인하세요');    
              }else{
                //   alert(name+'님 환영합니다.');
                  alert(`${name}님 환영합니다.`);
              }
          }
        }

 

 <form id="mform">
        <label for="name">이름</label> <br>
        <input type="text" name="name" id="name"> <br>

        <label for="pass">비밀번호</label> <br>
        <input type="text" name="pass" id="pass"> <br>

        <label for="pass-check">비밀번호확인</label> <br>
        <input type="text" name="pass-check" id="pass-check"> <br><br>

        <input type="submit" value="제출">

    </form>