1. Form은 무엇인가?
- form 은 로그인 기능을 구현할 때 가장 많이 사용된다.
- 데이터 베이스에 내 계정 정보가 저장이 되어있다. 내 아이디, 비밀번호를 입력 즉, 화면에 입력한 값과 서버의 데이터 값이 일치하면 로그인을 할수있다.
- 웹페이지에 사용자의 입력을 받아서 서버로 내 계정정보에 보내야하는데, 이때 사용되는 HTML의 태그가 FORM태그이다
🔸긴말말고 예시코드 살펴보기
- 아래와 같이 로그인 화면을 간단하게 구현해보았다.
- form 태그 안에는 label, input, button 외에도 textarea, select&option 등이 쓰이지만, 이번 주제는 form 이아니고 form validation 이기 때문에 자세한 설명은 아래 출처목록 살펴보길 바란다.
<form action="">
<label for="id">아이디 : </label>
<input type="text" id="id">
<label for="pw">비밀번호 : </label>
<input type="text" id="pw">
<button>제출</button>
</form>
2. form validation이 뭔데? 왜 해야되는데?
- 폼에 작성된 데이터를 서버로 전송하기 전에 전송할 데이터들이 올바른 포맷으로 잘 입력되었는지 확인하는 과정
ex) 예를 들어서 상품개수를 입력받는 input창에는 당연히 양수만 들어와야한다는 걸 모두가 알고있을 것이다.
하지만...음수로 쓰는..별난 사람들도 있을 것이다. 혹은..숫자가 아니라 글자를 쓰는 사람들..등등이 있을 수 있다. 이렇듯 양수만 입력할 수 있게 하기위해 예외처리가 필요하다.
ex) 혹은 회원가입을 할때 비밀번호에는 영문,숫자,특수문자가 혼합되어야한다 와 같은 조건을 걸었는데, 한글로 비밀번호를 만들수도 있다. 특정조건의 데이터를 입력해야만 가입을 할수있게 유효성 검사를 해야한다.
- 서버에 예상치 못한 데이터가 들어오면 서버사이드 에서는 비즈니스 로직에 문제가 발생하게 되고, 엉뚱한 결과값을 반환하거나 에러화면이 전송이된다.
3. validation을 어디에서 해야할까? 클라이언트 사이드 VS 서버 사이드
- 각 영역마다 장단점이 있다. 속도 처리에서는 클라이언트가 빠르다. 렌더링된 태그에 유효성 검사가 내장되어있어서 잘못된 데이터가 들어오면 submit 버튼을 누르기전에(서버로 넘어가기 전에) 바로 에러메세지를 사용자에게 날릴수있기 때문이다.
- 하지만 서버만 할수있는 검사도 있다. (ex: 중복된 ID가 있는지 확인하기 위해선 데이터 베이스 내의 가입된 ID 데이터를 탐색하는 작업을 해야한다. )
- 결론 : 일반적으로 데이터 형식 email, password 길이, 나이 제한 등 을 다루는 작업은 클라이언트 내에서도 가능하고, 데이터 베이스를 의존해야 하는 작업들은 서버에서 다루는 것이 좋다
- 둘다 해야한다는 의견도 있음(클라이언트에서 유효성 검증을 했다고 하더라도, 나쁜 사람들은 항상 존재한다...일반적인 사람들은 클라이언트 유효성에서 끝나겠지만, 개발언어를 잘 아는..사람들은 자바스크립트를 쉽게 우회할수있고 위험한 값을 전달할 수 있기 때문이다.)
4. form validation 어떻게 해?
🔸예제1
- 데이터가 서버로 submit 되기 전에 경고창이 뜬다.
- 주로 input 태그에 min,max, required, minlength,maxlength 등 여러 속성들을 넣어서 체크할수 있다
- css 에 input태그에 붙일수있는 가상클래스를 주어 스타일이 칠해진 것으로도 확인할 수 있다.
<style>
label{
display:block;
}
/* required된 input만 스타일 되는 속성 */
/* 해당 속성을 required가 없는 input과 시각적인 구분을 가능하게 한다. */
input:required{
border:5px solid green;
}
/* 올바르지 않은 입력이 이루어진 input을 선택한다 */
input:invalid{
border:5px solid red;
}
/* 올바른 입력이 이루어졌을때 input을 선택함 */
input:valid{
border: 5px solid blue;
}
</style>
<form action="">
<label for="stuff">원하는 수량을 입력하세요(최소 3개 이상)</label>
<input type="number" min="3" id="stuff">
<label for="email">이메일을 입력하세요. (최대 20자)</label>
<input type="email" id="email" required minlength="20">
<button>제출</button>
</form>type="email" 형식을 지정해주었지만 그냥 숫자만 입력해서 제출버튼을 눌렀더니 아래처럼 경고창이 떴다.
<!-- minlength="" maxlength="" : 데이터의 길이를 제한한다 -->
<!-- required 반드시 입력해주삼 -->
<!-- number,email,text,password,url형식으로만 입력받기 -->
<!-- min="" max="" 숫자의크기를 제한한다. -->
<input type="text" required minlength="" maxlength="">
<input type="text" min="" max="">
🔸예제2
- input 의 pattern 속성으로 활용할 수 있다.
- pattern 안에 정규표현식을 넣어 확인 가능하다.
- 정규표현식은 문자열에서 특정 문자 조합을 찾기위한 패턴이다.
- pattern 속성이 제대로 동작하는 <input> 요소의 type 속성값은 아래와 같다
date, email, password, search, tel, text, url
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>네이티브 패턴</title>
<style>
label {
display: block;
margin-top: 20px
}
input:invalid {
border: 3px solid red;
}
</style>
</head>
<body>
<form action="">
<label for="">사과를 입력하세요</label>
<input type="text" pattern="사과">
<label for="">사과 혹은 배중 하나를 입력하세요</label>
<input type="text" pattern="사과|배">
<label for="">세글자만 입력할 수 있습니다.</label>
<!-- .은 모든 숫자와 문자를 의미함 -->
<input type="text" pattern="...">
<label for="">첫번째 문자는 사,과,배,두번째 문자는 1,2,3만 입력할 수 있음</label>
<!-- []은 선택할 수 있는 문자의 종류를 지정할수있음 -->
<input type="text" pattern="[사과배][123]">
<label for="">한글만 입력이 가능해야함</label>
<!-- [-]은 선택할 수 있는 문자의 범위를 지정할수있음 -->
<!-- [ ] 하나만 쓰면 한글자만 가능함 -->
<input type="text" pattern="[ㄱ-ㅎ가-힣]">
<label for="">한글과 숫자만 글자 수 제한 없이 입력이 가능해야함</label>
<!-- [-]은 선택할 수 있는 문자의 범위를 지정할수있음 -->
<!-- [ ]뒤에 * 을 붙이면 글자수제한 없는것 -->
<!-- ㄱ-ㅎ 뒤에 한번 띄어쓰면 띄어쓰기도 가능하다는 뜻 -->
<!-- ㄱ-ㅎ 모든 자음 -->
<!-- ㅏ-ㅣ 모든 모음 -->
<input type="text" pattern="[ㄱ-ㅎ ㅏ-ㅣ 가-힣0 -9]*">
<label for="">한글 세글자만 가능함</label>
<!-- {}중괄호는 글자의 수를 제한해줌 -->
<input type="text" pattern="[ㄱ-ㅎ ㅏ-ㅣ 가-힣]{3}">
<!-- 주민등록번호를 입력하세요 -->
<label for="">주민등록번호를 입력하세요(하이픈 넣어서)</label>
<!-- 하이픈 표시 [\-] -->
<input type="text" pattern="[0-9]{6}[\-][0-9]{7}">
<!-- 주민등록번호를 입력하세요 -->
<!--pattern 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.- date, email, password, search, tel, text, url-->
<label for="">주민등록번호를 입력하세요(only숫자만)</label>
<input type="text" pattern="[0-9]{13}">
<label for="">이메일을 입력하세요</label>
<input type="email" pattern="[a-zA-Z0-9]*[@][a-zA-Z0-9]*\.[a-zA-Z]*">
<!-- + 수량자는 앞에 문자가 1개~N개, 0개면 안됨 -->
<label for="">이메일을 입력하세요</label>
<input type="email" pattern="[a-zA-Z0-9]+[@][a-zA-Z0-9]+[.]+[a-zA-Z]+[.][a-zA-Z]">
<label for="">전화번호를 입력하세요</label>
<!-- 첫번째는 010,016,011만 되고 두번째 파트는 3,4글자만
세번째 파트는 4글자만 가능 -->
<input type="tel" pattern="(010|016|011)-[0-9]{3,4}-[0-9]{4}">
<button>제출</button>
</form>
</body>
</html>
5. 정규표현식 패턴은 regex 사이트를 참고하자
community patterns메뉴 들어가면 개발자들이 만들어놓고 공유하는 패턴이 있다.
좋아요수 높은거 골라서 개발할때 사용하자
출처
1) form 개념 : https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC
[HTML] 📚 폼(Form) 태그 종류 💯 정리
우리가 특정 사이트에 로그인 할때, 계정 아이디와 비밀번호를 입력하는 화면을 수도 없이 많이 봤을 것이다. 거의 대부분의 사이트가 데이터베이스 서버로 나의 계정 정보를 가지고 있고, 나의
inpa.tistory.com
2) clinet validation VS server validation : https://velog.io/@beberiche/%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90%EC%84%9C-%ED%95%B4%EA%B2%B0%ED%95%B4%EC%95%BC%ED%95%98%EB%82%98
유효성 검사는 어디에서 처리해야하나?
백앤드에서 하려나? 프론트에서 해야하나?
velog.io
유효성 검사는 서버 / 클라이언트 중 어느 쪽에서 이루어져야 하는가?
둘 다. 이유는 :Client Side먼저 당신은 client-side에서 입력값 유효성 검사를 하기를 원할 것이다. 왜냐하면 보통의 사용자에게 좀 더 나은 피드백을 줄 수 있기 때문이다. 그들이 유효하지 않은 email
kutar37.tistory.com
3) https://velog.io/@purplew/input-validity
'프론트엔드 개발 > html' 카테고리의 다른 글
| Embedded 태그 中 iframe 태그 (1) | 2022.09.07 |
|---|---|
| Semantic Tag 시맨틱 태그 (부제: 언제까지 div 태그만 쓸거니?) (0) | 2022.08.31 |