티스토리 뷰

HTML

[HTML] Matching a Pattern

Dongi 2021. 11. 25. 10:45

안녕하세요 동기 여러분! 오늘은 사용자가 개발자가 정해 놓은 패턴의 입력값을 적도록 하는 방법에 대해 알아봅시다.

 

Matching a Pattern

신용카드를 적는 칸에 사용자가 문자를 넣으면 에러가 뜨게 하고 ID를 적는 칸에 한글을 넣으면 에러가 나는 그런 경우를 본 적이 있으실 겁니다. 바로 오늘 알아볼 기능 때문인데요, Matching a Pattern을 하기 전에 개발자라면 반드시 알아야 하는 정규 표현식(regex=regular expression)에 아주 간단히 알아봅시다.

 

 

정규 표현식(regex=regular expression)

게임을 하던 웹 사이트를 이용하건 개발자들은 방대한 정보들을 수집합니다. 그 엄청난 정보들 중에 특정한 규칙이 들어 있는 친구들을 찾아내려면 상당히 복잡하고 힘이 드는데 이를 쉽게 많들어 주는 기능이라 할 수 있겠습니다. (함정은 정규 표현식도 처음엔 어려움ㅋㅋㅋ)

 

오늘은 아주 기본적인 부분만 포스팅 해보겠습니다ㅋㅋㅋㅋ

부호 설명 예 예시 설명
[ ] 부호의 세트 [a-z] a부터 z까지
{ } 사용될 글자 또는 숫자 갯수 {3} 세 글자 또는 세 숫자

 

 

더욱 자세한 내용을 알아보고 싶으신 분들은
1. 생활코딩 https://opentutorials.org/course/909/5143
2. 잔재미코딩 https://www.fun-coding.org/DS&AL3-4.html
 

: - 잔재미코딩

프로그래밍 연습(생각만 해보기) 다음 코드를 실행해보고, 이름 정보를 통해 남자인지, 여자인지, 기타인지(남녀 구별 불가)를 확인할 수 있는 방법 생각해보기 import openpyxl # 엑셀파일 열기 work_b

www.fun-coding.org

 

정규표현식 패턴들 - 생활코딩

본 수업은 zvon의 정규표현식 tutorials를 이용한다. 실제 강의는 동영상을 참고하자. zvon은 아래의 URL을 통해서 접근 할 수 있다. http://zvon.org/comp/r/tut-Regexp.html#Pages~Contents 아래는 인터렉티브하게 정

opentutorials.org

 

 

 

생김새

<!DOCTYPE html>
<html>
  <body>
    <form action="/ex.html" method="post">
      <label for="phonenum">휴대폰 번호를 입력해주세요 (10자리~11자리)</label>
      <br>
      <input type="text" id="phonenum" name="phonenum" pattern="[0-9]{10,11}" required>
      <br>
      <input type="submit" value="보내기">
    </form>
  </body>
</html>

 

코드 설명

  • <form action="/ex.html" method="post"> → post 방식으로 ex.html로 form을 보내자!
  • <label for="phonenum">휴대폰 번호를 입력해주세요 (10자리~11자리)</label> → 휴대폰 번호(10자리~11자리)를 입력해 달라고 label을 달아줌
  • <br>  → 줄 바꿈
  • <input type="text" id="phonenum" name="phonenum" pattern="[0-9]{10,11}" required> → input 타입은 문자로, id는 위에 있는 label과 짝을 지어 주기 위해 for의 값과 같게 해줌, name은 식별을 쉽게 하기 위해 phonenum으로 설정, pattern은 사용자에게 0에서 9까지([0-9])의 숫자를 사용하게 하되 10자리나 11자리({10,11})를 입력하도록 설정, required를 달아 이와 같은 입력을 하지 않을 경우 에러가 뜨게 만듦
  • <input type="submit" value="보내기"> → 보내기 버튼

 

실행 화면

 

문자를 사용한 경우

에러가 뜸

숫자 아홉 자리를 입력한 경우

역시 에러가 뜸

 

 

오늘의 느낌

갑자기 몸살이 와서 진짜 무서웠다. 타지에서 혼자 아프니까 너무 불안... 혹시 몰라서 COVID-19 테스트를 받고 왔다 ㅠ ㅠ

'HTML' 카테고리의 다른 글

[HTML] Main and Footer  (0) 2021.11.27
[HTML] Header and Nav  (0) 2021.11.26
[HTML] Checking Text Length  (0) 2021.11.24
[HTML] Set a Minimum and Maximum  (0) 2021.11.23
[HTML] Requiring an Input  (0) 2021.11.22
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함