[Vue] v-text-field 한글, 숫자 입력 막는 법(cf. vee-validate)

728x90

안녕하세요. 제니입니다!

오늘은 vue........... 정리,,

React 를 너무 사랑하지만,, 현재 들어가는 프로젝트가 vue 기본 구조가 크게 잡혀 있어서

마이그레이션을 하고 리팩토링을 하고 있는 중입니다 ㅠㅡㅠ

단순 input 고치는 것도 굉장히 헷갈리고 많은 구글링을 안겨 주네요..!

1. v-text-field 한글 입력 막기

일단, 일반 성명과 영문명을 같이 사용해야 하는 곳이 있는 ui 입니다.

영문명을 제어하려고 하는데, 기존 서버 코드에서도 에러 핸들링이 크게 들어가 있는 곳이 아니었더라구요.

양쪽에서 핸들링을 잘 잡아주고자 한글 입력을 막는 코드를 구현하였습니다.

여러 구글링을 해보니, 함수를 적용하거나, @input, rule 등 다양한 방법을 사용했는데

모두 제 기존 코드에선 적용이 되지 않더라구요.

<v-text-field
	oninput="javascript: this.value = this.value.replace(/[^a-zA-Z]/g, '');"
>
</v-text-field>

이런 식으로 oninput값을 넣어주면, 영어만 사용할 수 있습니다!

여러 방법 중 해당 코드는 무리 없이 적용 되어서 기록 남깁니닷

2. vee-validate로 에러 메시지만 노출하는 법

기존에 vee-validate라는 라이브러리를 사용해서 에러 메시지를 노출하고 있더라구요.

React 개발할 땐, 에러 메시지를 커스텀해서 정규식과 함께 사용해주었는데

vue에선 나름의 편의성을 위해 만든 것 같지만,,

코드 퀄리티나 이해도적인 부분에서 저는 오히려 조금 난해함과 어려움을 겪었습니다..

하나하나 찾아가기도 불편하더라구요.

2-1. vee-validate.js 셋팅

일단, vee-validate를 사용한다는 가정하에 vee-validate.js에서 로직을 만들어주려 합니다.

const english_only = {
  validate: function(value) {
    return /^[A-Za-z\s]+$/.test(value);
  }
}

개인적으로 함수에서 스네이크 기법을 선호하진 않는데,

해당 플젝의 경우 정규식은 모두 스네이크 기법으로 통일 되어 있어서 코드 컨벤션을 맞춰주었어요.

저처럼 위 함수로 return 해주셔도 되고 별도의 message까지 함수 안에서 작성해주셔도 됩니다!

저는 ko,en json 별도의 파일이 있기 때문에 함수 아래에

이런 식으로 작성 된 코드가 따로 있어요!

extend("englishOnly", english_only)

Vue.component('validation-provider', ValidationProvider)

만들어 둔 함수를 extend에 작성해주시고

2-2. v-text-field 코드

<validation-provider
  :name=// 설정해두신 name
  rules="englishOnly"
  v-slot="{ errors, valid }"
  style=// 설정해두신 style
  tag="div"
>
  <v-text-field
    v-model=//설정해두신 v-model
    :error-messages="errors"
    :success="valid"
    required
  >
    <template v-slot:label>
      // 설정해두신 내용
      <span style="color: #e83f4b; margin-left: 5px">*</span>
    </template>
  </v-text-field>
</validation-provider>

v-text-field를 valiation-provider로 감싸고

이렇게 rules 안에 만들어 둔 englishOnly를 작성해주시면,

영어만 입력할 수 있다는, 에러 메시지를 표출해줍니다!

3. 다른 error 함께 적용하기

<validation-provider
  :name=// 설정해두신 name
  rules="required|englishOnly"
  v-slot="{ errors, valid }"
  style=// 설정해두신 style
  tag="div"
>
</validation-provider>

저는 required, 즉, 필수 항목에 대해서도 rule을 적용해주고 싶었어요.

required | englishOnly 이렇게 rules에 적어주시면

필수 정보에 대한 에러 메시지까지 같이 보여줄 수 있습니다.

3-1. required 사용하기

import {
  required,
} from 'vee-validate/dist/rules'

extend('required', required)

참고로 required는 vee-validate에서 import 할 수 있어서 편하게 사용하실 수 있어요!

React 하구 싶다..!

오늘의 기록 끝 -- ❤️