[회원가입-유효성검사]

1. 폼을 만든다.

    <h1>회원가입</h1>
    <form>
      <div>
        <label for="name">이름 : </label>
        <input id="name" type="text" />
        <span class="name hide"></span>
      </div>
      <div>
        <label for="email">이메일 : </label>
        <input id="email" type="email" />
        <span class="email hide"></span>
      </div>
      <div>
        <label for="password">비밀번호 : </label>
        <input id="password" type="password" />
        <span class="password hide"></span>
      </div>
      <div>
        <span>통신사 : </span>
        <label
          ><input
            id="tel1"
            class="tel"
            type="radio"
            name="tel"
            value="LG"
          />LG</label
        >
        <label
          ><input
            id="tel2"
            class="tel"
            type="radio"
            name="tel"
            value="SKT"
          />SKT</label
        >
        <label
          ><input
            id="tel3"
            class="tel"
            type="radio"
            name="tel"
            value="KT"
          />KT</label
        >
        <span class="tell hide"></span>
      </div>
      <div>
        <label for="phone">휴대폰번호 : </label>
        <input id="phone" type="text" />
        <span class="phone hide"></span>
      </div>
      <div>
        <span>관심분야(2개이상선택) : </span>
        <label><input id="hobby1" class="hobby" type="checkbox" />Java</label>
        <label><input id="hobby2" class="hobby" type="checkbox" />C</label>
        <label><input id="hobby3" class="hobby" type="checkbox" />C++</label>
        <label><input id="hobby4" class="hobby" type="checkbox" />HTML</label>
        <label
          ><input id="hobby5" class="hobby" type="checkbox" />Javascript</label
        >
        <span class="hob hide"></span>
      </div>
      <button>전송</button>
      <span class="btn hide"></span>
    </form>

2. css를 만든다.

div {
  margin: 10px 0px;
}

.hide {
  font-size: 13px;
  color: blue;
}

button {
  width: 50px;
  height: 30px;
  font-size: 15px;
}

3. 정규식을 이용해서 유효성검사를 한다.

// 목표 : 이름은 2글자 이상 10글자 이하로 정한다
// 숫자나 특수문자가 입력되면 안된다.

// 1. input창에 값을 받아서 확인한다.
// 2. 값이 올바르게 입력되면 "GOOD"을 프린트한다.
// 3. 값이 올바르지 않으면 "글자나 영어를 2~5개까지 입력하셔야 합니다."라는 경고창이 뜬다.

let check_num = /[0-9]/; // 숫자
let check_eng = /[a-zA-Z]/; // 문자
let check_spc = /[~!@#$%^&*()_+|<>?:{}]/; // 특수문자
let check_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크

let nameInput = document.querySelector("#name");
let nameResult = document.querySelector(".name");

function nameCheck() {
  if (nameInput.value.length > 1 && nameInput.value.length < 10) {
    if (
      check_kor.test(nameInput.value) &&
      !check_num.test(nameInput.value) &&
      !check_eng.test(nameInput.value) &&
      !check_spc.test(nameInput.value)
    ) {
      nameResult.innerHTML = "GOOD";
    } else {
      nameResult.innerHTML = "한글만 입력이 가능합니다.(2~10개)";
    }
  } else if (nameInput.value.length === 0) {
    nameResult.innerHTML = "이름을 입력해주세요.(2~10개)";
  } else {
    nameResult.innerHTML = "한글만 입력이 가능합니다.(2~10개)";
  }
}

nameInput.addEventListener("blur", nameCheck);

// 목표 : 이메일문법확인하기

let emailInput = document.querySelector("#email");
let emailResult = document.querySelector(".email");
let reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;

function emailCheck() {
  if (reg_email.test(emailInput.value)) {
    emailResult.innerHTML = "GOOD";
  } else {
    emailResult.innerHTML = "이메일을 입력하세요.";
  }
}

emailInput.addEventListener("blur", emailCheck);

// 목표 : 비밀번호를 입력하세요.

let passwordInput = document.querySelector("#password");
let passwordResult = document.querySelector(".password");
let reg_password = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;

function passwordCkeck() {
  if (reg_password.test(passwordInput.value)) {
    passwordResult.innerHTML = "GOOD";
  } else {
    passwordResult.innerHTML =
      "비밀번호는 8자 이상이어야 하며, 숫자/대문자/소문자/특수문자를 모두 포함해야 합니다.";
  }
}

passwordInput.addEventListener("blur", passwordCkeck);

// 목표 : 통신사를 선택하면 "GOOD"이뜬다.
//선택을 하지 않으면 버튼클릭시 경고창이 뜬다.

let telInput = document.querySelectorAll(".tel");
// let telInput2 = document.querySelector("#tel2");
// let telInput3 = document.querySelector("#tel3");
let telResult = document.querySelector(".tell");

function telCkeck() {
  for (let i = 0; i < telInput.length; i++) {
    if (telInput[i].checked) {
      return (telResult.innerHTML = "GOOD");
    }
  }
}

for (let j = 0; j < telInput.length; j++) {
  telInput[j].addEventListener("click", telCkeck);
}

// telInput2.addEventListener("click", telCkeck);
// telInput3.addEventListener("click", telCkeck);

// 목표 : 전화번호를 입력하세요.

let phoneInput = document.querySelector("#phone");
let phoneResult = document.querySelector(".phone");
let reg_Phone = /^((01[1|6|7|8|9])[1-9]+[0-9]{6,7})|(010[1-9][0-9]{7})$/;

function phoneCkeck() {
  if (reg_Phone.test(phoneInput.value)) {
    phoneResult.innerHTML = "GOOD";
  } else {
    phoneResult.innerHTML = "전화번호를 입력하세요.(-없이 번호만 입력)";
  }
}

phoneInput.addEventListener("blur", phoneCkeck);

// 목표 : 관심분야를 2개 이상 선택하면 "GOOD"이 뜬다
// 전송버튼 클릭시 2개 미만이면 경고알림창이 뜬다

let hobbyInput = document.querySelectorAll(".hobby");
let hobbyResult = document.querySelector(".hob");

function hobbyCheck() {
  let count = 0;
  for (let i = 0; i < hobbyInput.length; i++) {
    console.log(hobbyInput[i].checked);
    if (hobbyInput[i].checked) {
      count++;
    } else if (!hobbyInput[i].checked) {
      count--;
    }
    if (count > -2) {
      hobbyResult.innerHTML = "GOOD";
    } else if (count < -1) {
      hobbyResult.innerHTML = "";
    }
  }
}

for (let j = 0; j < hobbyInput.length; j++) {
  hobbyInput[j].addEventListener("click", hobbyCheck);
}

// 목표 : 버튼을 눌렀을때 유효성검사가 완료되지 않은 곳을 확인한다.

let button = document.querySelector("button");
let buttonResult = document.querySelector(".btn");

function formCheck(event) {
  event.preventDefault();
  if (
    nameResult.textContent === "GOOD" &&
    emailResult.textContent === "GOOD" &&
    passwordResult.textContent === "GOOD" &&
    telResult.textContent === "GOOD" &&
    phoneResult.textContent === "GOOD" &&
    hobbyResult.textContent === "GOOD"
  ) {
    buttonResult.innerHTML = "올바르게 입력되었습니다.";
  } else {
    buttonResult.innerHTML = "올바르게 입력하세요.";
  }
}

button.addEventListener("click", formCheck);