[javascript] 자바스크립트 prompt 로 email 입력 받아 검증 해서 출력 하기(email 에 Id 분리 Object에 넣기)

자바스크립트 prompt 로 email 입력 받아 검증 해서 통과 하면 @를 앞부분을 Object에 id 키 값으로 넣고 패스워드를 입력을 받아 패스워드 조건을 만족 했을시 Object 에 pw 키값으로 넣고 입력 종료시에 아이디 패스워드 이메일 출력 하기

먼저 이메일 검증 정규식은

    const email_re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

패스워드 검증 정규식은

 const pw_re = /^[A-Za-z0-9]{6,12}$/;

을 사용 한다.

 

그외 여러 버전을 올린다.

무한 루프 break 를 이용 해서 종료

while(true) {
   if (조건문) {
       break;
   } else {
       오류 계속
   }
}

<script>
    const email_re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    const pw_re = /^[A-Za-z0-9]{6,12}$/;

    let login_info = {};
    let input = "";
    while (true) {
      // 이메일 입력 받기
      let input = prompt("Enter Email");
      if (email_re.test(input)) {
        console.log("정상 이메일");
        user_id = input.split("@");
        login_info.email = input;
        login_info.id = user_id[0];
        // 패스워드 입력 받기
        while (true) {
          // 패스워드 입력 받기
          input = prompt("Enter Password");
          if (pw_re.test(input)) {
            login_info.pw = input;
            break;
          } else {
            alert("패스워드 다시입력(6~12자리 숫자와 문자만 사용가능)");
          }  // if
        }   // while
        break;
      } else if (input == null) {
        console.log("취소 하여 종료");
        break;
      } else {
        alert("잘못된 이메일 다시입력");
      }
    }

    // 오브젝트에 값이 들어 갔을 때만 출력
    if (Object.keys(login_info).length > 0) {
      console.log("id:" + login_info.id);
      console.log("pw: " + login_info.pw);
      console.log("email: " + login_info.email);
    }

  </script>

Object 길이 값을 체크 해서 루프 종료

Object(객체) 사용 하기 

let 변수 = {};  // 객체 선언 json 형태의 키와 값, 파이썬에서의 딕셔너리

변수.키 = 값;  // 형태로 사용

 

Object(객체)의 비었는지 체크나 길이가 얼마인지 구하는 방법은

Object.keys(Object변수).length  로 확인

만약 비었는지 체크는(isEmpty) if문(조건문)을 활용 해서 

Object.keys(Object변수).length == 0

이렇게 체크 하면 된다.

 <script>
    const email_re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    const pw_re = /^[A-Za-z0-9]{6,12}$/;

    let login_info = {};
    let input = "";
   
    do {
      // 이메일 입력 받기
      input = prompt("Enter Email");
      if (input == null) {
         console.log("취소 하여 종료");
         break;
      }
      if (email_re.test(input)) {
        console.log("정상 이메일");
        user_id = input.split("@");
        login_info.email = input;
        login_info.id = user_id[0];
      } else {
        alert("잘못된 이메일 다시입력");
      }
      console.log(Object.keys(login_info).length);
    } while (Object.keys(login_info).length == 0);

    do {
      // 패스워드 입력 받기
      input = prompt("Enter Password");
      if (input == null) {
         console.log("취소 하여 종료");
         break;
      }
      if (pw_re.test(input)) {
        login_info.pw = input;
      } else {
        alert("패스워드 다시입력(6~12자리 숫자와 문자만 사용가능)");
      }
    } while (Object.keys(login_info).length != 3);

    // 오브젝트에 값이 들어 갔을 때만 출력
    if (Object.keys(login_info).length == 3) {
      console.log("id:" + login_info.id);
      console.log("pw: " + login_info.pw);
      console.log("email: " + login_info.email);
    }

  </script>

 

email 입력 받을 때 취소 버튼 눌렀을 때 while 문 종료 되고 출력

prompt 에서 취소를 누르면 null 값이 반환이 되는데 이 값으로 조건을 걸어 null 이면 break 를 주면 된다.

<script>
    const email_re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
    const pw_re = /^[A-Za-z0-9]{6,12}$/;

    let login_info = {};
    let input = "";
    do {
      // 이메일 입력 받기
      input = prompt("Enter Email");
      if (input == null) {
         console.log("취소 하여 종료");
         break;
      }
      if (email_re.test(input)) {
        console.log("정상 이메일");
        user_id = input.split("@");
        login_info.email = input;
        login_info.id = user_id[0];
        while (true) {
          // 패스워드 입력 받기
          input = prompt("Enter Password");
          if (pw_re.test(input)) {
            login_info.pw = input;
            break;
          } else {
            alert("패스워드 다시입력(6~12자리 숫자와 문자만 사용가능)");
          }  // if
        }   // while
      } else {
        alert("잘못된 이메일 다시입력");
      }
    } while (input != null);

    // 오브젝트에 값이 들어 갔을 때만 출력
    if (Object.keys(login_info).length > 0) {
      console.log("id:" + login_info.id);
      console.log("pw: " + login_info.pw);
      console.log("email: " + login_info.email);
    }

  </script>

마지막으로 함수를 만들어 try catch 를 이용하는 버전이다.

함수에 throw 로 에러를 발생 시켜 try catch 에서 잡아서 오류를 출력하는 방법을 사용 한다.

  <script>
    function validateEmail(email) {
      let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (re.test(email)) {
        let id = email.split("@");
        return id[0];
      } else {
        throw "잘못된 이메일 다시입력"
      }
    }

    function validatePw(pw) {
      let re = /^[A-Za-z0-9]{6,12}$/;
      if (re.test(pw)) {
        return pw;
      } else {
        throw "패스워드 다시입력(6~12자리 숫자와 문자만 사용가능)"
      }
    }

    let login_info = {};
    let input = "";

    // 이메일 입력 받기
    do {
      input = prompt("Enter Email");
      if (input == null) {
         console.log("취소 하여 종료");
         break;
      }
      try {
        login_info.email = input;
        login_info.id = validateEmail(input);
      } catch(e) {
        alert(e);
      }
    } while (Object.keys(login_info).length != 2);
    
    // 패스워드 입력 받기
    do {
      input = prompt("Enter Password");
      if (input == null) {
         console.log("취소 하여 종료");
         break;
      }
      try {
        login_info.pw = validatePw(input);
      } catch(e) {
        alert(e);
      }
    } while (Object.keys(login_info).length != 3);

    // 오브젝트에 값이 들어 갔을 때만 출력
    if (Object.keys(login_info).length == 3) {
      console.log("id:" + login_info.id);
      console.log("pw: " + login_info.pw);
      console.log("email: " + login_info.email);
    }

  </script>