유효성검사로 회원가입 페이지 구현하기(2)

먼저 페이지에서 html5와 css를 이용하여 가입 항목을 구성하였다면

오늘은 가입버튼을 추가하고 제이쿼리를 이용하여 유효성 검사를 적용하겠습니다.

먼저 위와 같이 div태그와 폼태그, 버튼을 구성해 준 후,

div에 적당한 클래스값을 주고, 폼태그 name과 id값엔 상위 폼태그에 주었던 값과 똑같은 값을 넣어줍니다.

버튼 타입엔 submit을 주고 버튼안에 들어갈 글자를 입력해 줍니다.

그리고 위와 같이 css를 이용하여 버튼 위치와 색상을 수정해 주면 아래와 같이 버튼이 추가됩니다.

이제 가입 페이지가 구성되었으니 제이쿼리를 이용하여 유효성 검사를 구현해 보도록 하겠습니다.

먼저 위와 같이 script에 제이쿼리 기본 양식을 입력해 주고 함수값에 폼태그에 넣었던 값과 submit를 입력해 줍니다.

if문에 regex를 이용하여 아이디 항목에 들어갈 문자의 최소/최대 길이의 값과, 영어+숫자만 입력 가능하도록 값을 입력해 줍니다.

만약 해당 항목에 영어+숫자가 아닌 문자나 지정해준 문자의 길이를 벗어나는 글자수를 입력했을 경우 리턴이 되도록 설정하고, 팝업 될 글자를 입력해 줍니다.

그리고 script에 regex파일을 참조해주고 페이지를 열어 테스트 해보겠습니다.

       

위와 같이 아이디에 입력하고 가입버튼을 누른 결과 입력한 함수가 정상적으로 적용됩니다.

이제 나머지 항목의 함수를 모두 입력하겠습니다.

위와 같이 입력하고 실행한 페이지 양식을 현재 화면에 구현해 보겠습니다.

아이디 *

비밀번호 *

비밀번호 확인 *

이름 *

이메일 *

연락처 *

각종 이벤트/혜택 SMS 수신 동의

[선택]

각종 이벤트/혜택 이메일 수신 동의

[선택]

각 항목별로 입력해준 값이 정상적으로 작동되는 걸 확인하실 수 있습니다.

임의로 구성한 양식이라 실제로 가입이 이뤄지진 않으며, 기회가 되면 php를 이용하여 실제 가입이 가능한 페이지를 구성해 볼 수 있도록 하겠습니다.