[Udemy Vue 완벽가이드 Section11] 146. 기본 양식 유효성 검사 추가

지금까지 v-model을 사용해서 값을 추출하는 법을 배웠다.

대안으로 $refs를 사용할 수 있다는 것도 배웠다.

$refs는 원리가 다르지만, 데이터를 한번만 읽어도된다면, $refs를 사용하는 것도 좋은 선택이다.

 

이번에는 입력 데이터 유효성 검사에 대해 알아보자.

submitForm메서드에서 전체값을 확인해보고, 만약 만족해야하는 조건을 못 맞춘 값이 있다면 오류 경고를 표시해보자.

모든 키 입력 혹은 입력 데이터가 focus를 잃을 때 유효성 검사를 할 수도 있다.

 

예를 들어, user-name에 blur 이벤트가 발생하면, 즉 입력란이 포커스를 잃는 경우를 감시해서 저장된 값이 유효한지 확인할 수 있다.

만일 유효하지 않으면 사용자에게 오류 메시지를 보여준다.

input요소에 blur이벤트(@blur)를 추가하면 된다. blur는 내장 이벤트이다.

blur이벤트로 메서드를 트리거하자. methods에 validateInput메서드를 추가하고, blur 이벤트 리스너로 validateInput 메서드를 바인딩하자.

data 프로퍼티에 userNamevalidity 프로퍼티를 추가하자. 그리고 유효성 여부는 아직 모르니, 초깃값은 'pending'으로 설정하자.

 

<input id="user-name" name="user-name" type="text" v-model.trim="userName" @blur="validateInput" />

data() {
  return {
    userName: '',
    userNameValidity: 'pending',
  };
},
methods: {
  validateInput() {
    if (this.userName === '') {
      this.userNameValidity = 'invalid';
    } else {
      this.userNameValidity = 'valid';
    }
  },
},

validateInput메서드에는 우리가 v-model로 업데이트하려는 data프로퍼티인 userName에 if검사를 진행하자.

이때 직접 trim함수를 써도 되지만, v-model에 수식어로 trim함수를 쓸 수 있으니, input태그의 v-model에 trim수식어를 함께 쓰자.

 

validateInput메서드에서 userName이 빈 문자열인지 if검사를 해서, 빈 문자열이면 userNameValidity에 'invalid'값을 할당하자.

 

그리고, p요소를 추가하여 userNameValidity의 값이 'invalid'일 경우에만 메시지를 표시한다. 반대로 'pending'이거나 'valid'일 경우에는 표시하지 않는다.

form-control에 조건부 클래스를 추가할 수도 있다. userNameValidity의 값이 invalid이면 invalid 클래스를 추가하자.

<div class="form-control" :class="{invalid: userNameValidity === 'invalid'}">
   <label for="user-name">Your Name</label>
   <input
     id="user-name"
     name="user-name"
     type="text"
     v-model="userName"
     @blur="validateInput"
   />
   <p v-if="userNameValidity === 'invalid'">Please enter a valid name!</p>
 </div>
 
 
//css
.form-control.invalid input { //'form-control'클래스를 가지면서 'invalid'클래스를 가진요소의 후손요소 중 input요소
  border-color: red;
}

.form-control.invalid label { //'form-control'클래스를 가지면서 'invalid'클래스를 가진요소의 후손요소 중 label요소
  color: red;
}

form-control 클래스에 invalid 클래스도 추가되어있다면, 그 div의 후손요소 중,  input요소를 대상으로 border-color을 red로 지정하자.

label에도 적용해서 텍스트 색상도 red로 설정하여 입력데이터가 무효라는 것을 강조하자.

 

Your Name 입력필드를 클릭했다가 유효한 값을 입력하지 않고 다른 곳을 클릭하면, blur 이벤트가 발생한다.

따라서 오류 메시지가 표시되고, 오류 스타일링이 적용된다.

 

유효한 데이터를 입력하고 다른 곳으로 포커스를 옮기면 오류 표시가 사라진다.

 

v-model에 trim 수식어를 설정해놓았기 때문에 공백만 입력하는 경우에도 오류 스타일링이 적용된다.

 

유효성 검사는 다양한 방식으로 구현할 수 있고, 더 유연하고 동적인 방식으로도 구현할 수 있다.

다른 방법도 충분히 가능하지만, 이번에는 입력 데이터가 제출되기 전 실시간 유효성 검사를 구현하는 방법을 배웠다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.