유효성 검사란 HTML에 작성된 데이터가 전송되기 전, 사용자가  과연 지정된 형식에 맞게  작성 하였는지 검사하는 것을 말한다. 실수로 다른 데이터를 입력하게 되면 처리 과정에서 에러가 날 뿐 아니라, 사용자의 입장에서는 이미 작성한 폼을 다시 새로 작성해야하는 번거로움을 줄여줄 수 있기 때문이라도 필요한데 이는 컨트롤러에서 실행할 지, HTML 자체에서 실행할 지 개발자가 어느 방향으로 제작했는지가 중요하다.

 

   HTML도 발전을 거듭하여 java코드로만 행해졌던 유효성 검사 대부분은 form에서도 지정할 수 있는데, 주로 서버를 거치지 않은 간단한 항목에 대해서는 HTML 자체에서 걸러낼 수 있다. 입력 데이터가 없을 경우, 날짜 혹은 이메일의 형식을 지키지 않은 경우, 나이를 입력할 때 숫자로 쓰지 않은 경우, 입력 폼의 제한 길이를 초과했을 경우 등 input이나 textarea 등 직접 사용자의 텍스트를 값으로 받는 태그는 대부분 해당 검사가 가능하니 오늘은 유효성 검사가 어떻게 흘러가는지 과정을 살펴보도록 하겠다.

 

   먼저, 유효성 검사를 거치기 위해서는 입력된 값이 무엇인지 확인하는 절차가 필요할 것이다.

 

 

   오랜만에 JS(자바스크립트)를 사용하게 되었다. HTML을 읽어내는 크롬이나 사파리 같은 번역기들은 기본적으로 HTML / CSS 파일을 해석할 수 있는데, 여기서 Java Script 또한 해석이 가능하기 때문에 유효성 검사에 많이 활용된다고 한다...

 

   JS는 기존에 배운 것과 동일하다, 다만 jsp에서 script태그를 이용하여 작성할 경우 자동완성 기능은 제공하지 않기 때문에 되도록 js파일을 만들어 작성하는 것을 권장하는 편이다. querySelector를 이용하여 가져온 값을 알림창으로 출력하는 기능을 통해 제대로 값을 가져온 것을 확인하자.

 

 


let but = document.querySelector("#sub");
but.addEventListener("click", checkLogin);
//submit으로 form의 내용을 바로 전송하지 않기 위해 타입을 button으로 지정하고 이벤트를 할당했다

let myForm = document.querySelector("#ex8_2_form");

//버튼에 할당된 이벤트 내용이다
function checkLogin() 
{
   let id = document.querySelector("#id");
   let pw = document.querySelector("#pw");
   console.log("실행");
   console.log(id);
   console.log(pw);
   //해당 태그를 잘 선택했는지 확인한다

   //id의 값이 null일 경우 경고창이 뜨고, return을 통해 해당 기능을 즉시 종료한다
   if(id.value=="")
   {
      alert("아이디를 입력해주세요.");
      id.focus();
      return false;

   //pw의 값이 null일 경우 경고창이 뜨고, return을 통해 해당 기능을 즉시 종료한다
   } else if(pw.value=="")
   {
      alert("비밀번호를 입력해주세요.");
      pw.focus();
      return false;

   }
   
   //if문이 실행되지 않고 넘어오면(유효성 검사 통과) submit() 함수를 통해 해당 form을 전송한다.
   myForm.submit();
   
}

 

   여기서 한번 고생을 한 부분이 있는데(놀랍게 js로 돌아오자마자 트러블을 일으켰다, 여러모로 대단한 언어다) 앞 예시에서 input태그의 id값을 submit으로 준 것 때문에 그대로 쓰다가 유효성 검사를 위한 함수를 작성하는데서 자꾸 오류가 터져 막막했었다. 정확한 이유는 모르겠지만 submit()이 함수가 아니라는 에러가 돌아왔는데, 그 이유가 바로 input태그의 아이디 값을 submit으로 주었고, querySelector를 통해 가져온 것이 화근이 되었던 것 같다.

 

   정말 이유는 모르겠지만 결국 input 태그의 id값을 수정하였고 그 결과 정상적으로 작동되는 것을 확인했다... ...

 

   어쨌든 이런 식으로 함수를 활용하여 사용자가 입력한 데이터가 전송되기 전 검출하는 함수를 작성할 수 있었다. 하지만 HTML5 부터는 해당 기능을 form에 추가할 수 있기 때문에 복잡한 것이 아니라면 그 기능을 활용하는게 더 편할 것이다.

 

   < Book-Market 사이트 만들어보기 ⑤ >   

 

 

   이제 유효성 검사의 원리와 방법을 배웠으니 책을 등록하는 페이지에서 작성 방법을 제한하는 함수를 작성하여 적용하자.

 


let but = document.querySelector("#but");
but.addEventListener("click", CheckAddBook);

function CheckAddBook(){

   let bookId = document.querySelector("#bookId")
   let name = document.querySelector("#name");
   let unitPrice = document.querySelector("#unitPrice");
   let unitsInStock = document.querySelector("#unitsInStock");
   let description = document.querySelector("#description");
   let newBook = document.querySelector("#newBook");
   //모두 HTML태그를 가져와 저장했다

   //도서 아이디 체크를 위한 기능을 작성했다
   //파라미터로 정규 표현식을 사용한 범위, input태그, 메세지를 받는다
   function check(regExp, e, msg){

      //정규표현식과 input태그에 들어온 패턴을 비교하여 참일경우 여기서 기능을 멈춘다 (아래의 경고문구는 실행X)
      if(regExp.test(e.value)){
         return true;
      }

       //정규표현식과 맞지 않다면 경고창에 메세지를 띄우고 해당 input에 포커스를 맞춘다
       alert(msg);
       e.focus();
       return false;
    }

   //도서 아이디 체크 : 위의 기능에서 true/false를 반환받아 작동한다
   //정규 표현식 : ISBN으로 시작해야하며 0~9사이의 숫자 5자리부터 12자리까지 입력 가능
   //기능 경고창에 띄울 메세지를 입력했다
   if(!check(/^ISBN[0-9]{4,11}$/, bookId, "[도서 코드]\nISBN과 숫자를 조합하여 5~12자까지 입력하세요.\n첫 글자는 반드시 ISBN으로 시작하세요.")){
      return false;
   }



   //도서명 체크
   if(name.value.length < 4 || name.value.length > 50){
      alert("[도서명]\n최소 4자에서 50자까지 입력하세요.");
      name.focus();
      return false;
   }

   //도서 가격 체크
   if(unitPrice.value.length == 0 || isNaN(unitPrice.value)){
      alert("[가격]\n숫자만 입력하세요.");
      unitPrice.focus();
      return false;
   }

   if(unitPrice.value < 0){
      alert("[가격]\n음수를 입력할 수 없습니다.");
      unitPrice.focus();
      return false;
   }

   //재고수 체크
   //isNaN : 숫자가 아닐 경우 true를 반환
   if(isNaN(unitsInStock.value)){
      alert("[재고]\n숫자만 입력하세요.");
      unitsInStock.focus();
      return false;
   }

   //설명 체크
   if(description.value.length < 100){
      alert("[상세설명]\n최소 100자 이상 입력하세요.");
      description.focus();
      return false;
   }

   newBook.submit();

}

 

   if문을 활용해서 모든 input태그를 검사하고 하나라도 참이 나올 경우 return false 를 통해 즉시 해당 문구에서 기능을 멈추고 form을 전송하지 않는다. 모두 옳게 작성됐을 경우엔 if문에서 빠져나와 맨 아래의 submit() 함수를 통해 해당 form의 내용을 지정된 경로로 이동시켜, 결과적으로는 도서 추가가 완료된다.

'아이티에듀넷' 카테고리의 다른 글

2024-10-18 :: 057 보안 처리  (0) 2024.10.18
2024-10-17 :: 056 다국어 처리  (0) 2024.10.17
2024-10-15 :: 054 페이지 처리 및 파일 업로드  (0) 2024.10.15
2024-10-14 :: 053 내장 객체  (0) 2024.10.14
2024-10-11 :: 052 MVC 이해하기  (0) 2024.10.11

+ Recent posts

티스토리툴바