[JavaScript] 홈페이지 회원가입폼, 유효성검사 / 정규표현식 regular expression / 정규표현식 학습사이트 / URL parsing

정규표현식?

문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴

 

아래 사이트에서 더 자세한 사항을 확인해보자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN

이 사이트에서는 정규식을 직접 실습해 볼 수 있다.

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

나는 아래 유투브 채널에서 많은 도움을 얻었다.

https://www.youtube.com/watch?v=V_ePeBaQzSc&list=PLB9NsRTifc1nc8J5BJhkE3AP9oieECVpJ 

---

아래는 정규표현식을 사용하여 홈페이지의 회원가입 폼에 대한 유효성검사를 구현한 페이지입니다.

 

구현:

1.아이디 정규식 유효성 (4~12자 영문 대소문자,숫자로만)

2.비밀번호 정규식 유효성 (아이디와 동일한 조건으로 체크 / 아이디와 같으면 다시 입력하도록 설정)

3.비밀번호확인 비밀번호와 일치하도록

4.이메일형식 정규식 유효성 (@와 .)

5.이름형식 정규식 유효성 (성 + 이름 최소 2글자는 입력하도록)

6.주소 API 불러오기 (서버가 열려 있어야 체크 가능) -> 다음 글에서 설명

7.주민등록번호형식 정규식 유효성(앞자리는 뒷자리는 첫자리1,2,3,4 + 나머지 6자리 랜덤)

8.생년월일에 입력한 년도, 월, 일이 주민등록번호의 그것과 일치하는지 체크

9.자기소개란 10자 이상 쓰도록 정규식 설정 실패

 

나의 HTML 파일은 위 사진과 같은 홈페이지의 틀을 가진다.

 

html form태그 안의 name 설정들

 

유효성검사를 위한 Js 

주소 API의 경우 다음 글에서 더 자세하게 사용 방법을 알아보자.

---