[Javascript] 회원가입폼 만들기_실습

코드: https://stackblitz.com/edit/stackblitz-starters-ga26xh?file=script.js

회원가입 폼을 만들어 노드객체를 변수 선언하고 if의 조건으로 데이터를 형식에 맞춰 받은 뒤 콘솔로 찍어내는 웹사이트를 만들었다.
(물론 실제 회원가입 개인정보를 콘솔이든 어디든 노출시키면 절대 안된다.)

html의 경우 form태그 안에 fieldset태그로 4분할하여 input(text, radio...), label, select, p태그 등등을 넣어 회원가입 양식을 만들었다.

js코드는

const form = document.querySelector('form');

function getUserInfo(
  name,
  ssn_front,
  ssn_back,
  username,
  password,
  emailId,
  mailbox,
  address,
  gender,
  agree
) {
  const userInfo = {
    name: name,
    ssn: ssn_front + '-' + ssn_back,
    username: username,
    password: password,
    email: emailId + '@' + mailbox,
    address: address,
    gender: gender,
    agree: agree,
  };
  return userInfo;
}

form.addEventListener('submit', function (e) {
  e.preventDefault();
  const name = document.querySelector('#name').value;
  const ssn_front = document.querySelector('#ssn_front').value;
  const ssn_back = document.querySelector('#ssn_back').value;
  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;
  const password_check = document.querySelector('#password_check').value;
  const emailId = document.querySelector('#emailId').value;
  const mailbox = document.querySelector('#mailbox').value;
  const address = document.querySelector('#address').value;
  const gender = document.querySelector('input[name="gender"]:checked').value;
  const agree = document.querySelector('input[name="agree"]:checked');
  const agree_checked = document.querySelector('#agree_check');

  if (password !== password_check) {
    alert(`비밀번호가 일치하지 않습니다.`);
    return;
  } else if (password.length < 4 || password.length > 12) {
    alert(`비밀번호는 4글자 이상, 12글자 이하로 입력해주세요.`);
    return;
  } else if (username.length < 4 || username.length > 8) {
    alert(`아이디는 4글자 이상, 8글자 이하로 입력해주세요.`);
    return;
  } else if (name.length < 2) {
    alert(`이름을 2글자 이상 입력해주세요.`);
    return;
  } else if (ssn_front.length !== 6 || ssn_back.length !== 6) {
    alert(`주민번호를 6자리로 입력해주세요.`);
    return;
  } else if (isNaN(ssn_front) || isNaN(ssn_back)) {
    alert(`주민번호를 숫자로 입력해주세요.`);
    return;
  } else if (mailbox === '미정') {
    alert(`이메일 형식을 입력해주세요.`);
    return;
  } else if (address.length < 4) {
    alert(`주소를 올바르게 입력해주세요.`);
    return;
  } else if (!agree_checked.checked) {
    alert('비동의 시 혜택이 제한될 수 있습니다.');
  } else {
    alert(`가입을 환영합니다!`);
    const result = getUserInfo(
      name,
      ssn_front,
      ssn_back,
      username,
      password,
      emailId,
      mailbox,
      address,
      gender,
      agree
    );
    console.log(result);
    window.location.reload();
  }
});

• 유저 정보를 담은 userInfo 변수를 담은 getUserInfo 함수에 유저 정보를 props로 전달했다.
  (props로 받은 getUserInfo의 내용은 userInfo에서 규정한 양식에 따라 가공된다.)
• 노드객체들을 변수 선언했다.
• if문으로 각각의 조건을 만들었다.
• 9개의 오류?를 무사 통과하고 나면 가입환영 인사와 함께 getUserInfo함수에 유저정보를 props로 넣어준다.(getUserInfo는 userInfo의 양식에 따라 시행된다.)
• 유저 정보를 콘솔로 찍어준 후 새로고침된다.

회고: 어렵지 편이었던 것 같다. 까다로운 점이라고 한다면 addEventListener 밖에서 정의한 함수를 안으로 불러들어와 호출시키는 로직인 것 같다.
그 외에는 if문 조건 만들고 오랜만에 css복습하기 위한 예제였던 것 같다.