HTML input 유효성검사 두가지 방법으로 하는 법(html, javascript)

1. html로만 유효성 적용하기

1-1. 일반적인 input 

<form action="">
  <div>
    <label for="email">이메일</label>
    <input type="email" name="" id="email" required/>
  </div>
  <div>
    <label for="pw">비밀번호</label>
    <input type="password" name="" id="pw" required/>
  </div>
  <button type="submit">로그인</button>
</form>

위 와 같이 버튼을 눌렀을 때 아무런 표시를 안 해두면 form에 어떤 field를 채워야 하는지 

지시가 나오지 않기 때문에 <input> 에 requred 속성을 추가해 준다.

 

위와 같이 requred를 추가하면 버튼을 눌렀을 때 빈칸일 경우 브라우저에서 제공하는 기본 alert이 뜬다.

 

required 속성은 text, search, url, tel, email, password, checkbox, radio, date pickers, number, file과 같은 유형에서 함께 사용가능하다.

 

 

1-2. checkbox, radio 유형

<!-- radio -->
<form action="">
  <div>
    <strong>성별</strong>
    <input type="radio" name="gender" value="female" required></input>
    <input type="radio" name="gender" value="male" required></input>
  </div>
  <button>저장하기</button>
</form>

<!---클릭하고자 하는 곳에 required를 추가해주면 된다.---!>

<!--checkbox-->
<form action="">
  <div>
    <input type="checkbox" name="" required>수량선택</input>
    <select>
      <option value="" selected>선택하세요.</option>
      <option value="">1</option>
    </select>
  </div>
  <button type="submit">저장하기</button>
</form>

 

2. HTML 추가적인 요소

유효성을 검사하는데 required를 제외하고 다른 요소들도 있다.

<!-- type : 데이터 유형을 제한하는 속성, input 요소의 필수는 아니지만 항상 명시해두는 것이 좋다.-->
<input type="file" name="filename">
<input type="email" name="myemail">

<!--maxlength, minlength : 글자수 최대 최소 제한-->
<input type="password" minlength="4" maxlength="20">

<!--min, max : 입력 요소 최소, 최대 값 명시 date, datetime, datetime-local, month, number, range, time, week -->
<input type="date" name="birth" min="1900-01-01" max="2024-01-01">

<!--pattern : 데이터 패턴을 저장한다.-->
<input type="tel" id="tel" pattern="010-\d{4}-\d{4}$" required />

 

3. 자바스크립트와 함께 활용

html도 구현할 수 있고 자바스크립트로도 유효성 검사가 가능하다.

좀 더 복잡한 유효성 검사가 필요할 때 사용한다.

 

3-1. onsubmit

<form> 태그에 onsubmit을 사용하면 이벤트 실행 전 어떤 동작이나 기능실행이 가능하다.

<form action="" onsubmit="login();">
  <div>
    <label for="email">이메일</label>
    <input type="email" name="" id="email" required />
  </div>
  <div>
    <label for="password">비밀번호</label>
    <input type="password" name="" id="pw" />
  </div>
  <button type="submit">로그인</button>
</form>

<script>
 function login(){
  const email = document.querySelector("#email").value;
  const password = document.querySelector("#password").value;
  event.preventDefault();
 }
</script>

 

onsubmit은 양식 제출 이벤트가 발생할 때의 동작을 지정한다.
추가적으로 preventDefault()를 사용하면 이벤트의 기본 동작 기능을 중지한다.
submit의 경우 전송 된 후에 페이지가 새로고침 되는 것을 방지한다.

 

왜 사용할까?

form을 사용하지만 실제 submit은 작동하지 않도록 하면서 불필요한 데이터들이 서버로 전송되는 것을 막을 수 있기 때문이다. 데이터 전송 직전에 form에 입력된 데이터들의 유효성검사를 위해서 쓰인다.

 

 

이번에 유효성검사에 대해 정리하면서 소개한 위 두 가지 방법 외에도 다른 방법이 있는데 퍼블리셔 관점에서 바라봤을 땐 

유효성 검사를 이 정도까지만 알아줘도 기본은 알고 있는 거라 대표적인 두 가지만 정리해 봤다.

 

 

출처 : https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

https://pageclip.co/blog/2018-02-20-you-should-use-html5-form-validation.html