HTML5 아이디(Id) 및 암호(Passowrd) Input 패턴

HTML5 에서는 input 에 정규표현식(Regular Expression)을 이용한 pattern 을 설정하여 입력을 제한할 수 있게 되었다. 자바스크립트나 서버사이드 스크립트의 도움을 받지 않고도 입력 패턴을 고정 할 수 있다는 이야기다. 이렇게 하여 PC 및 모바일 기기등의 대부분의 브라우저에서 한번에 적용할 수 있는 간단한 방법으로 입력을 제한할 수 있으니 정말 편리해졌다.
(물론 서버사이드 스크립트에서 최종적인 체크를 해 줘야 안전하다는 것은 달라지지는 않는다.)

다음의 패턴을 응용하여 자신의 사이트에 맞는 패턴을 만들면 되겠다.

Id: 영문소문자, 숫자, 언더바(_) 6~50자

<input type="text" name="id" pattern="^([a-z0-9_]){6,50}$">

Password: 영문 대소문자, 숫자, 특수문자를 꼭 포함하여 6~50자

<input type="password" name="passwd" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_-+=[]{}~?:;`|/]).{6,50}$">

특수문자만 입력 방지 (한글이나 한자등 일반적인 문자는 모두 입력 가능)

홀따옴표와 이중따옴표를 pattern="" 안에 어떻게 표현하는지가 포인트다.

<input type="text" id="nickname" pattern="[^!@#$%^&*()_-+=[]{}~?:;`|/<>'"]+">

다시한번 이야기하지만 보안상 예상치 않은 데이터 입력을 완전하게 컨트롤 하기 위해서는 최종적으로 서버사이드 스크립트에서 처리해 주어야 한다.