Kudos
Collect
Twiiter
Facebook
Share
Develop somethings, meditation, reading and thinking...

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

마지막 업데이트 5년 전
1 0 0 0

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="[^!@#$%^&*()_-+=[]{}~?:;`|/<>'"]+">

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

Hi, my name is Richard. I’m a developer wants to make the world better with logic power. Mainly I use Linux, Nginx, MySQL, PHP and JavaScript . I want to share my knowledge with someone that it was also based from some great persons via LYNMP. 👨‍💻

Essedrop - 이미지 주소를 만드는 가장 빠른 방법
 

독자 의견

저자 @richard 에게 의견 남기기:

Please sign in to comment.
Markdown is also available in comment.