[자바스크립트] Null값 체크, 유효성 검사

현재 자바스크립트와 Vue로 웹을 개발 중이다. 우리는 현재 웹 개발을 하면서 로그인 페이지나 회원가입, 기타 정보 입력란을 만드는 페이지들을 최소 한번 쯤은 만들어본 기억이 있을 것이다.
회원가입을 예로 들면 비밀번호, 주민번호 등 누락되지 않아야 하는 값들이 있을 때 보통 유효성 검사를 하는데 여러 방법이 있어서 이것 저것 활용해 본것 중 가장 쉽고 효과적이어서 기록으로 남기고자 이렇게 글을 적게 되었다.

<form class="form_container" name="frm1">
  <div class="init_info">
    <div class="input_container">
      <label for="name">이름</label>
      <input type="text" id="name" name="name" v-model="name" />
    </div>
    <div class="input_container">
      <label for="pNum">핸드폰 번호</label>
      <input
        type="text"
        id="pNum"
        name="pNum"
        v-model="pNum"
        placeholder="- 제외하고 입력해주세요"
      />
    </div>
    <div class="tinput_conainer">
      <label for="email">이메일</label>
      <input type="text" id="email" name="email" v-model="email" />
    </div>
</form>

회원가입에 이러한 폼이 있다고 하자. 간단하게 개인정보를 받는 form이다. 이 때 우리는 보통 유효성 검사를 할 때 null값이 있으면 alert을 띄우는 방식을 사용할 것이다.

watch: {
    name(val) {
        if(val === null || val === "") {
            alert("이름을 입력해주세요!")
            return this.nameCheck = false
        }
    }
}

이러한 방법으로 구현했을 것이다.
하지만 이렇게도 구현이 가능하다.

checkOnclick() {
    const frm = document.frm1;
    const emailCheck = verifyEmail(this.email);
    const pNumCheck = verifyPhoneNumber(this.pNum);

    if (frm.name.value === '') {
        alert('이름을 입력해주세요.');
        return frm.name.focus();
    } else if (frm.email.value === '') {
        alert('이메일 주소를 입력해주세요.');
        return frm.email.focus();
    } else if (!emailCheck) {
        alert('이메일 주소를 올바르게 입력해주세요');
        return frm.email.focus();
    }
    this.submit();
}

이렇게 document.frm1으로 HTML요소에 접근해서 name값을 통해 form을 가져온다. 그 후 form 내부의 name값을 통해 HTML요소의 접근해서 각 값의 value를 검사한다.

여러 방법이 있지만 이게 조금 더 직관적이고 쉬워서 나는 이 방식을 자주 사용할 것 같다!
이 방법이 좋은 방법인지 나쁜 방법인지는 사실 잘 모르겠다. Vue에서는 보통 watch에서 변경 감지를 통해서 구현하는데 나는 html 요소에 직접 접근해서 사용했으니 말이다.

이 방법의 효율성을 알고 있는 분들은 댓글로 피드백 바랍니다!