Form check

Form check

-주민등록번호를 올바르게 입력했는지 검사하는 간단한 페이지를 만들 것이다.

 

-Project, jsp 파일 생성

 

기본 양식

-먼저 주민등록번호를 입력할 기본 양식을 만들어 준다.

 

-모든 주민등록번호는 앞자리는 6자리, 뒷자리는 7자리이므로 maxlength를 사용하여 그 이상은 입력할 수 없도록 설정한다.

 

이벤트 

-이벤트는 키보드를 누르거나 마우스를 클릭하는 것과 같이 어떤 현상이 프로그램에 영향을 미치는 것을 의미한다.

 

-onload: 현재 페이지가 브라우저에 표시될 때 실행되는 이벤트

-onkeyup: 키보드가 눌렸다 떨어질 때 실행되는 이벤트

-onkeydown: 키보드가 눌릴 때 실행되는 이벤트

-onkeypress: 키보드를 누르고 있을 때 실행되는 이벤트

-onsubmit: 전송(submit) 버튼이 눌릴 때 실행되는 이벤트

 

-onsubmit 이벤트에는 return 함수명() 형태로 코딩한다.

-onsubmit 이벤트가 실행하는 함수는 결과로 true 또는 false만 리턴 되도록 작성해야 한다.

-onsubmit 이벤트 실행 결과가 true면 action 페이지로 넘겨주지만 false면 현재 페이지에 그대로 머문다.

 

-키보드가 눌렸다 떨어질 때(onkeyup) moveNext() 함수를 호출한다. 

-입력한 주민번호 앞자리(j1)가 6자리이면 j2로 커서를 위치시킨다.

-입력한 주민번호 뒷자리(j2)가 7자리이면 sendBtn로 커서를 위치시킨다.

 

함수

-자바스크립트 파일에 함수를 작성할 것이다.

-Project -> WebContent [오른쪽] -> New -> Other...

 

-JavaScript Source File -> Next >

 

-File name 입력 -> [Finish]

 

-formCheck.js 생성 완료

 

-입력 칸에 입력을 완료하면 다음 칸으로 자동으로 넘어가는 함수를 만들 것이다. 

-obj.value.length : obj로 넘어온 객체에 입력된 값(value)의 문자 수(length)  

 

-두 번째로 form을 검사하는 함수를 만들 것이다.

-form을 검사하는 함수는 맨 끝에 "return true"를 적어주고 if를 사용하여 오류를 검사하고, 오류가 발생하면 false를 리턴하도록 작성한다. 

-obj.j1.value은 juminForm의 j1에 입력된 값이 있으면 true, 없으면(null) false를 리턴한다.

-!obj.j1.value: 입력된 값이 있으면 true이지만 !을 붙여서 false가 된다. 입력된 값이 없으면 false이지만 !로 인해 true가 되어 조건식에 참이된다. 

-obj.j1.value.trim().length: 입력된 값에서 공백을 제거한 길이

 

-주민등록번호 앞자리를 6자리 입력했는지 검사한다.

 

-Number(): 괄호 안의 인수를 숫자로 변환한다.

-isNaN(): Not a Number, 괄호 안의 인수가  숫자가 아니면 true, 숫자이면 false를 리턴한다.

 

-주민등록번호 뒷자리 입력도 위와 같이 작성해준다.

 

-여기까지 에러가 발생하지 않았다면 입력된 주민등록번호는 13자리 숫자이다.

-이제 주민등록번호 유효성 검사 코드를 작성할 것이다.

 

주민등록번호 유효성 검사 규칙(+코드)

둘리의 주민등록 번호를 이용하여 유효성 검사를 해볼 것이다. 

 

-주민등록번호 앞자리와 뒷자리 이어주기

 

1. 주민등록번호(12자리만) 각각의 자리에 2 3 4 5 6 7 8 9 2 3 4 5를 곱한 합을 구한다.

주민등록번호 :    8     3     0     4     2     2     1     1     8     5     6     0     0

       X
가중치         :    2     3     4     5     6     7     8     9     2     3     4     5

 

16 + 9 + 0 + 20 + 12 + 14 + 8 + 9 + 16 + 15 + 24 + 0 = 143      

         

2. 합을 11로 나눈 나머지를 구한다.

143 % 11 = 0

 

3. 11에서 나머지를 뺀다.

11 - 0 = 11

 

4. 3의 결과를 10으로 나눈 나머지를 구한다.

11 % 10 = 1

 

-2, 3, 4의 결과를 result에 저장

 

5. 4의 결과와 주민등록번호의 마지막 자리가 같으면 유효한 주민등록번호이다.

4의 결과(1)와 주민등록번호 마지막 자리(0)은 같지 않으므로 둘리의 주민등록번호는 유효하지 않다.  

 

-모든 코드 작성을 완료했다. formCheck.jsp를 실행한다.

-둘리의 주민등록번호를 입력한 후 [검사하기] 버튼을 클릭한다.

 

-둘리의 주민등록번호 유효성 검사 결과가 표시되었다.

-[확인] 버튼을 클릭한다.

 

-앞자리, 뒷자리 입력칸이 비워지고 앞자리 입력칸에 커서가 위치되었다.