[Vue] Vuetify에서 rules 값 받아서 처리하기

본인은 Vue에서 UI 프레임워크로 Vuetify를 애용하고 있다. 물론 본질적으로는 Vue의 컴포넌트, 이벤트 등을 이용하여 구현된 것이기 때문에 타 프레임워크를 사용하거나, 직접 만들어도 원리는 같다.

입력을 위해서 v-text-field 등을 사용하는 경우가 많은데, 유효성 검사를 위해서 rules 속성을 사용하는 경우가 많다. 가장 많이 사용하는 비었는지 여부부터 해서, 정규식을 사용하기도 한다. 흔히 회원 가입 창에서 보는, 맞지 않는 규격일 경우에는 빨간 테두리가 쳐지면서 에러 문구가 아래에 출력되는 것이 디폴트 동작이다. (참고로 rules 속성에는 boolean 함수/변수들을 넣을 수 있으나, async-await(Promise)는 넣을 수 없다. 우회하는 방법이 있으나 이는 추후에 시간이 되면 추가로 포스팅해보겠다.)

이것까지는 제공해주는 기능으로 좋은데, 많은 시나리오에서 맞지 않는 입력의 경우에는 제출 버튼이 비활성화 되는 등을 통해 아예 잘못된 형태의 request를 보내지 않게 한다(물론 별개로 서버 측에서도 유효성 검사는 해야 한다.). 처음에는 이것을 v-text-field의 value 값이 변경되면(@change) 받아서 처리하는 식으로 했었는데, 사용자가 focus out을 해야만 change가 인식되어 한 박자 늦다는 부분이 있었다.

이를 바로 반영하기 위해서 rules의 위반 여부를 체크하는 식으로 바꾸기로 했고, v-form을 사용함으로 이를 해결할 수 있다. 아래는 예시이다.

<v-form v-model="valid">
  <v-text-field
    :rules="rules"
  />
</v-form>

<script lang="ts">
//...
  valid = false // v-form 내에서 rules의 결과를 받을 변수
  rules=[validation.required()] // 유효성 체크할 배열
//...
</script>

 

rules는 vuetify의 처리로 입력값에 대해 실시간으로 반영되고, valid는 v-model로 연결되어 그 rules의 변화를 실시간으로 받아들인다. 이제 이 valid 값으로 원하는대로 사용하면 된다.

알고 나서는 꽤 간단한 해결이었으나, 많이 사용되는 시나리오임에도 참고 자료가 많이 없어서 도움이 될 듯 하여 정리하였다.