JavaScript HTML form을 활용한 유효화 검사(pattern, 정규표현식 등 )

이전포스팅과 이어지는 내용입니다. 

JavaScript(HTML form validation)

HTML form에서 required로 min max 설정하기

<form></form>의 안에 <input> 태그가 들어가는데, 그 태그의 속성값으로 required를 지정해서 반드시 채워야하는 칸이라 공란으로 두면 무언가 입력값이 필요하다고 표시할 수 있다.

min max 속성을 이용하면 숫자를 최소 몇부터 최대 몇까지 입력할 수 있는지 설정할 수 있다.

예시)

<form action="/example.html" method="POST">
  <label for="guests">Enter # of guests:</label>
  <input id="guests" name="guests" type="number" min="1" max="4">
  <input type="submit" value="Submit">
</form>

글자의 길이를 체크하기

minlength 속성과 maxlength 속성을 활용한다.

예시)

<form action="/example.html" method="POST">
  <label for="summary">Summarize your feelings in less than 250 characters</label>
  <input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
  <input type="submit" value="Submit">
</form>

(참고) HTML form 태그에서 method 속성값

데이터를 전송하는 두가지 방식을 지정한다. method = ‘post’와 method=’get’이 있는데, get은 검색창 등에 활용되어 전송되는 값을 url에 표시하여 전달하고 post는 해당 과정을 브라우저에 남기지 않고 데이터를 전송해서 보안이 필요한 로그인 비밀번호 등에 사용된다.

pattern을 활용하여 특정 조건에 맞는 텍스트만 받기

pattern 속성을 활용하여 regex(정규표현식)을 값으로 주게 되면 해당 정규표현식 조건에 맞는 값만을 입력 할 수 있다. 아래는 숫자를 최소 14자리부터 최대 16자리까지 입력하라는 뜻이다.

예시는 다음과 같다.

 <form action="/example.html" method="POST">
  <label for="payment">Credit Card Number (no spaces):</label>
  <br>
  <input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
  <input type="submit" value="Submit">
</form>

정규표현식에 대한 자세한 링크는 MDN:정규표현식 으로 갈음한다.

요약

• 클라이언트 사이드의 유효화 검사는 서버에 정보가 전달되기 전에 일어난다.
• required 속성을 추가하면 입력값이 존재하는지 체크한다.
• min 속성을 활용하면 인풋값의 최소값을 정한다. max는 최대값을 정한다.
• minlength와 maxlength는 각각 최소 최대 입력값의 길이(글자의 갯수)를 정한다.
• 정규표현식을 pattern에 적용하면 입력값이 설정된 표현식에 맞는지 체크하여 배정한다.
• form에서의 유효화 검사가 통과되지 않으면 유저는 왜 그러한 결과가 생겼는지 설명을 하는 메세지를 받게된다.