[Udemy Vue 완벽가이드 Section16] 247. 양식 유효성 검사 추가하기

양식을 제출할 때 단계를 하나 추가하려고 한다.

바로 유효성 검사.

→ 이를 위해 validateForm 메서드를 추가해보자.

로직을 두 메서드로 나누어서 메서드 하나가 너무 길어지지 않게 해보자.

그리고 submitForm의 시작부분에서 this.validateForm 메서드를 호출하여 모든 입력값을 검토해서 유효한지 아닌지 확인하자.

 

1/ 먼저, 새로운 데이터 프로퍼티를 추가하자.

 formIsValid : true

처음에는 true이지만, 입력값이 하나라도 거짓이면 false가 된다.

다른 데이터는 더이상 특정 프로퍼티의 값이 아니라, 객체가 된다.

 

 

2/ validateForm함수로 유효한지 아닌지 확인하게 된다.

validateForm() {
 this.formIsValid = true;
 if(this.firstName.val === '') {
   this.firstName.isValid = false;
   this.formIsValid = false;
 }
 if(this.lastName.val === '') {
   this.lastName.isValid = false;
   this.formIsValid = false;
 }
 if(this.description.val === '') {
   this.description.isValid = false;
   this.formIsValid = false;
 }
 if(!this.rate.val || this.rate.val < 0) { //비어있는지 확인하는 대신, rate가 존재하는지의 여부. null이나 0등을 확인.
 //또한, 만약 있더라도 this.rate.val이 0보다 작은지 확인. 시간당 수강료가 -인건 불가능하므로.
   this.rate.isValid = false;
   this.formIsValid = false;
 }
 if(this.areas.val.length === 0) { //전문분야가 입력되지 않았다는 뜻
   this.areas.isValid = false;
   this.formIsValid = false;
 }
}


submitForm() {
  this.validForm();

  if (!this.formIsValid) {
    return; //form이 유효하지않으면, 나머지 메서드가 실행되지 않게 한다.
  }
  const formData = {
    first: this.firstName.val,
    last: this.lastName.val,
    desc: this.description.val,
    rate: this.rate.val,
    areas: this.areas.val,
  };
  console.log('formData', formData);
  this.$emit('save-data', formData);
},

 

 

3/ 입력값이나 양식 전체가 무효인 경우, 유저에게 피드백을 표시하도록 해보자.

"Register"버튼 위에 p태그를 추가하여 메시지를 추가하자.

그리고 v-if로 formIsValid가 false인 경우만 표시되도록 하자.

<p v-if="!formIsValid">Please fix the above errors and submit again!</p>

 

 

4/ 추가로 무효인 입력값을 강조 표시해보자.

div에 class를 하나 동적으로 바인딩해보자. 객체엔 invalid 클래스를 추가하고, firstName.isValid가 false일 경우 p태그를 추가하여 메시지를 추가하자. 

<div class="form-control" :class="{ invalid: !firstName.isValid }">
  <label for="firstname">Firstname</label>
  <input
    type="text"
    id="firstname"
    v-model.trim="firstName.val"
    @blur="clearValidity('firstName')"
  />
  <p v-if="!firstName.isValid">Firstname must not be empty.</p>
</div>
<style scoped>
.invalid label {
  color: red;
}

.invalid input,
.invalid textarea {
  border: 1px solid red;
}
</style>

 

firstName, lastName, description 전부 추가해보자.

 

 

새로운 메서드 clearValidity()를 추가해보자.

괄호 안에 input을 인수로 넣고, 해당 input의 isValid를 참으로 설정한다.

methods: {
 clearValidity(input) {
   this[input].isValid = true;
 },
}

 

 

그리고 input이 focus를 잃을때마다 clearValidity()를 호출한다.

→ @blur 이벤트 : 내장 이벤트로서 포커스를 잃을 때마다 자동으로 트리거되고 그럴때마다 clearValidity()를 호출한다.

<input
  type="text"
  id="lastname"
  v-model.trim="lastName.val"
  @blur="clearValidity('lastName')"
/>

 

 

이제 유효한 값을 입력하고 'Register'버튼을 클릭하면 제출 가능하고, 등록한 코치를 볼 수 있다.

 

 

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