반응형

회원가입, 상품등록을 할 때 빠질수 없는게 유효성검사!

 

JAVA에서는 Controller랑 DTO부분에서 유효성검사를 처리하였었는데

Laravel에서는 Controller에서 Validate를 사용한다

단순 공백, 정규식검사 뿐만 아니라 테이블에 값의 여부도 판단해주는 생각보다 편한 기능일지도🤔

 

우선 view blade와 JS의 ajax는 아래와 같이 간단하게 구성

라벨값은 localization 처리했으니 알아서 생각해주시길

<div class="container mt-5 w-75">
    <form data-action="/insertClient" method="POST" enctype="multipart/form-data" id="clientForm">
        @csrf
        <div class="input-group row mb-3">
            <label class="col-2 text-center" for="clientName">
                {{__('custom.label.client-name')}}
            </label>
            <input class="input-group-text col-8" type="text" id="clientName" name="clientName">
        </div>
        <div class="input-group row mb-3">
            <label class="col-2 text-center" for="clientPwd">
                {{__('custom.label.password')}}
            </label>
            <input class="input-group-text col-8" type="password" id="clientPwd" name="clientPwd">
        <div class="col-1" id="pwdView">
            <i class="bi bi-eye" id="pwdViewIcon" style="cursor:pointer;"></i>
        </div>
        </div>
        <div class="input-group row mb-3">
            <label class="col-2 text-center" for="clientEmail">
                {{__('custom.label.email')}}
            </label>
            <input class="input-group-text col-8" type="text" id="clientEmail" name="clientEmail">
        </div>
        <button class="btn btn-secondary btn-lg ml-2" type="button" style="float:right;" onclick="location.href = '/showClient'">
            {{__('custom.button.back')}}   
        </button>
        <button class="btn btn-primary btn-lg" type="submit" id="submit" style="float:right;">
            {{__('custom.button.enroll')}}
        </button>
    </form>
</div>

 

$(document).ready(function(){

    var form = '#clientForm';

    $('form').on('submit', function(event){
        event.preventDefault();

        let url = $(this).attr('data-action');
        let data = new FormData(this);
        console.log(data);

        $.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            processData: false,
            contentType: false,
            data: new FormData(this),
            success: function(result){
                alert(result.message);
                location.href = '/showClient';
            },
            error: function(request, status, error){
                styleInit();
                let resText = JSON.parse(request.responseText);
                let errors = resText.errors;

                for(let key in errors) {
                    console.log(key+"error >>> "+errors[key]);
                    $('label[for='+key+']').attr('style','color:red');
                    
                } 
            }
        })
    });

    $('#pwdView').click(function(){
        let icon = $('#pwdViewIcon');
        if(icon.hasClass('bi-eye')){
            $('#pwdViewIcon').removeClass('bi-eye');
            $('#pwdViewIcon').addClass('bi-eye-slash');
            $('#clientPwd').attr('type', 'text');
        } else{
            $('#pwdViewIcon').removeClass('bi-eye-slash');
            $('#pwdViewIcon').addClass('bi-eye');
            $('#clientPwd').attr('type', 'password');
        }
    });
});

function styleInit(){
    $('label').removeAttr('style');
}

 

 

Controller로 가보자

name, pwd, email은 모두 필수값(required) email은 email 양식에 맞도록 email을 추가하였다

여기서 email값은 DB 테이블에서 unique로 설계 되어있어서 확인이 필요했는데

처음엔 DB SELECT문으로 조회하는 코드를 사용했었다

        $emailChk = DB::select(DB::raw(
            "SELECT COUNT(client_email) AS count 
            FROM client
            WHERE client_email='".$params['clientEmail']."'"
        ));
        $emailCtn = $emailChk[0]->count;
        if($emailCtn>0){
            return json_encode(array('code'=>600, 'message'=>'登録されているクライアントです。'));
        }

여기서 validate unique를 사용한다면 한줄로 중복체크가 가능하다..!

unique:{table},{column}

만약 반대로 테이블에 값이 없으면 에러를 발생시키고 싶다면?

unique와 동일한 방법으로 exists를 사용하면 된다

exists:{table},{column}

이것도 굉장히 유용할거 같다

 

그렇게 짠 Controller 코드가 이거

    public function insert(Request $request) {

        $request -> validate([
            'clientName' => 'required',
            'clientPwd' => 'required',
            'clientEmail' => 'required|email|unique:client, client_email'
        ]);
    }

중복 테스트를 위해 email에 기존 테이블에 있는 이메일을 입력 후 submit 버튼을 눌렀을때 아래와 같은 에러가 발생하였다

[previous exception] [object] (PDOException(code: 42S22): SQLSTATE[42S22]: Column not found: 1054 Unknown column ' client_email' in 'where clause' at C:\\project\\mallCRM\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php:368) [stacktrace]

WHERE절이 뭐가 문제일까 엄청 해멨는데

설마설마해서 unique:client, client_email 여기 쉼표 다음 스페이스바를 없애니까 오류가 사라졌다......

생각해보니까 홑땀('') 안에 있는 문장이니까 스페이스바를 조심해야하는것 같다

 

아무튼! 

user123@naver.com이라는 이메일이 테이블에 등록되어있는 상태에서 아래와 같이 입력 후 등록 버튼을 누른다면?

이렇게 데브툴에서 이쁜 에러를 확인 할수있다😎

 

에러가 발생하면 그다음 코드는 실행 안되니까 에러처리만 뷰쪽에 잘 보여주면 된다

 

 

참고자료

https://reffect.co.jp/laravel/laravel_validation_understanding/

 

반응형

+ Recent posts