[jQuery] 데이터 유효성 처리 플러그인 (jquery-validate)

기본적인  CRUD를 하려면 db에 반영전에 validation이 필수 일텐데요. 이번 글에선 jQuery로 데이터 처리시 편리하게 validate 할수 있는 플러그인을 적어볼까 합니다. 데이터의 유효성 체크는 프론트엔드 뿐만 아니라 백엔드 에서도 당연 처리를 해야합니다. 하지만 전부 백엔드 에서만 처리한다면 아무래도 불필요한 연결이 서버를 고치는 회수가 많을 것입니다. 이를 보완하기 위해 프론트 단에서도 validation을 해주는 게 좋습니다. (강제로 쿼리를 쏘면 아마 보안은 그냥 뚫을 수 있겠죠.)

 jquery-validate 라는 플러그인 인데.. 이름 처럼 데이터 유효성 체크에 관련한 코드를 조금 간결하게 처리할수 있게 도와줍니다. 적용 방법은  간결한데. 경고창 위치라던가 사소한 조절은 아무래도 어려움이 있으므로 일부분에만 적용 하는게 좋을 듯합니다. (이부분은 확실하게 찾아본 것은 아님)

또한 jQuery에 종속된 '플러그인'의 개념이므로 서비스에서 jQuery를 사용하지 않는다면 추천하진 않습니다. (이걸 쓰기 위해 jQuery 를 쓰는건 비 효율적이기 때문)

기본적인 라이브러리 로드 방법은 생략하고.. 바로 적용 코드부터 살펴보자면 다음과 같습니다.

$(function(){
        $('form').validate({
        rules : {
            
            title: {
                required : true,
                minlength: 1,
                maxlength: 40
            },
            contents: {
                required : true,
                minlength: 3
            }
        },
        messages : {
            title:{
                required : "글 제목을 입력하세요",    
                minlength : "글 제목을 입력하세요",
                maxlength : "글 제목이 너무 길어요"
            },
            contents: {
                required : "본문을 입력하세요",
                minlength : "본문을 입력하세요"
            }
        },
    });
}); 

동작 흐름은 form을 기준으로 submit할 때 validation이 이루어진다. 조건에 맞지 않으면 빨간 글씨로 입력창 옆에 span경고가 나타난다.

당연히 minlength나 maxlength를 만족하지 못해도 false로 처리 한다

title, contentes, messages 는 text field의 id값이다. 플러그인 초기화를 하고 인자에 조건을 넘겨주었는데. 아마 다른 방법도 있을듯....

참고 출처 및 레퍼런스

https://github.com/jquery-validation/jquery-validation

https://jqueryvalidation.org/documentation/

http://hellogk.tistory.com/48