코딩 학원 30일차(Java Script 입력 유효성 검사)

오늘이 6개월 통틀어서 에러 잡기 가장 힘든 날일 거라 하셨다.

 

ValidCheck

 

원하는 형태로 입력하는 것을 Servlet에서 if/try로 할 것인가?

Servlet은 위 과정 말고도 할 일이 태산이며 위 과정을 한번 거친다는 것은 통신이 일어나는 것이기도 하니 

Html(사용자) 쪽에서 검사해서, 잘못 썻으면 요청도 안 하게 하는 것이 더 낫지 않을까

그렇기 위해서는 JavaScript가 필요한 것이고 금요일에 배운 것이 그것이다.

라는게 개요였다.

 

Web Browser가 실행[client-side]

 

기본 구성이다.

 

위의 주석 달린 조건문이 ID를 아예 안 썼을 경우의 상황을 대비한 것이다.

그리고 글자 수 같은 경우 최대는 input 속성에서 maxlength로 조절이 가능하지만 최소글자수는 JS에서 만져줘야 한다.

 

한글/특수문자는 오늘 마지막에 배울 것이고

중복검사는 JavaScript로 DB연동을 하는 것이기에 한참 뒤에나 배울 것이라 하셨다.

 

최소글자 제한 같은 경우 이미 써놓은 글자가 있을 것이기에 전부 지워주게끔 " "를 value로 넣어준다.

그리고 위 처럼 function에 조건문을 2개 넣어 놓고 조건문 마다 return true를 써놓았더니 위에서 true로 바로 보내버려서 밑에 최소 글자 수 조건문 연산이 안 됬었다. 근데 말씀하셨던 것 처럼 오류니 뭐니 아무 말도 없어가지고 찾기가 힘들긴 했다.

 

그리고 비밀번호 input도 만들어서 ID 했던 것 처럼 해보라 하셨다.

이때 function을 하나 더 만드는 사람이 있는데 이건 안 되고 기존 check function안에 변수와 조건문을 추가해줄 때 return true 밑에 코드를 쓰는 사람이 있는데 이건 Java에서 했으면 빨간줄 뜨고 난리날 것이라며 그 위쪽에 써야한다고 하셨다. 변수 같은 경우도 위쪽에 정리하 듯이 모아 놓는 것이 좋다고 하셨다.

 

뭐 하나 잘못 되면 감당이 안 되고 자동완성은 미약한데 오류는 안 잡아주고 소스는 길어지기 때문에 문제 될 만한 것들은 미리 처리를 해놓고 소스를 써야한다고 하셨다.

 

이번엔 비밀번호는 보통 비밀번호 확인Input이 있으니 두개가 같아야 true가 return 되게 만들어보라 하셨다.

 

우선 pwChk라는 비밀번호 확인 input을 만들어주고 위쪽 변수 모아놓은 곳에 pwChk 값을 담은 변수를 만들어준 뒤 기본틀은 같지만 조건문의 조건은 비밀번호 입력칸과 비밀번호 확인 입력칸의 value가 동일하지 않을 때 false가 return되게 만들어주었다.

 

Java는 String의 대조를 위해서는 .equlse를 써야 했지만 JS는 Java 보다 고급언어다 그냥 == 혹은 != 을 하면 된다.

 

그리고 나중에 placeholder는 재끼자고 하셨다.

 

좀 억지지만 나이를 입력하는 input도 만들어보자 하셨다. (원래 생년월일을 입력하는게 맞다)

 

입력 필수 조건은 쉽게할 수 있지만 숫자가 맞는지 아닌지 판단하는 조건문은 어떻게 만드는지 모른다.

isNaN = 숫자가 아닌지 라는 의미다.

 

Java : 글자의 순서에 접근할 때 charAt(1)을 썼다면

JavaScript : s[1] 이렇게 문장을 배열로 취급한다.

 

그리고 contains, startsWith, endsWith 처럼 문장에 어떤 글자가 포함하는지 확인하기 위한 기능이 있었다면

JavaScript 같은 경우 변수명.indexOf(글자) 라는 것이 있는데 이 문장에 괄호안에 들어간 글자가 몇 번째에 있는지를 나타낸다. 그 글자가 포함되어 있다면 배열로 취급하기에 그 순서에 맞는 인덱스 값이 나오고 포함 되어 있지 않다면 -1이 나온다. 이 구조를 활용해서 반복문을 돌려 해당 문장 전체에 어떠한 숫자나 글자가 포함되어 있는지 확인할 수가 있다.

 

아래는 숫자가 들어있나 검사하는 방법이다.

 

임의의 변수에 false 값을 넣어준 뒤 숫자면 num 변수에 1234567890을 넣고 (모든 경우의 수) JS에서는 문장을 배열로 인식하기에 반복문을 통해 위와 같이 작성해주고 비밀번호로 입력한 전체 문장 중 하나라도 num에 있는 숫자가 일치한다면  false로 넣었던 값을 true로 변환해준다. 그리고 아래서는 이 변수가 !containsNum (containsNum = false) 일 때 아래와 같이 행동하게 해준다.

 

이후에 영대문자를 포함하는지 검사하는 것도 만들라 하셨다. 같은 방법으로 반복문을 만들어주고 아래 조건식 출력에 ||(or) 를 통하여 하나라도 들어있지 않다면 실행되게 만들어준다.

 

특수문자도 같은 방법으로 하였지만 " 나 /를 기입할 때는 주의를 하라는 의미에서 해보셨다고 한다.

 

다음은 ID에 한글/특수문자는 못쓰게 하는데 -_@.은 괜찮게 만들어보라 하셨다.

근데 생각해보면 위의 처럼 한다면 한글의 모든 조합을 다 적어넣어야 되는데 이건 불가능 하다고 봐야한다.

할 수 있어도 안할 거다. 그러니까 반대로 써도 되는 것[영어 대, 소문자, 숫자, -_@.] 들만 적어서 진행을 해야한다.

 

경이롭다.

false로 넣고 값이 -1이 나와야 되겠다라는 생각 까지는 접근 했지만 기존에 하던 반복문 양식대로 만들면 unkor에 저장한 모든 단어가 포함 되어야 true가 되는 이상한 반복문이 되었었는데 저렇게 뒤집어서 대조를 하게 될 경우 우리가 원하던 방식의 대조가 가능하다.

오늘 하루 종일 이거 만들고 오류 찾는데 한 3시간은 쓴 것 같다.

진짜 인터프리터 방식의 묘미를 제대로 경험한 기분이다. 하다가 열 받아서 욕도 하고 책상을 내리치기도 했다.

 

내일은 지금까지 배운 것 Html, Css, JavaScript, Servlet을 종합적으로 다 쓰는 것을 해볼거라 하셨다.

정확히는 오늘 맛보기로 천천히 조금 하다가 내일 마무리 하자 하셨다.