Vue vee-validate

npm i vee-validate

 

vee-validate.js

import {confirmed, email, integer, length, max, min, min_value, numeric, required, regex, double} from 'vee-validate/dist/rules'
import {extend, localize} from 'vee-validate'
import ko from 'vee-validate/dist/locale/ko.json'

localize('ko', ko)

extend('required', {
  ...required,
  // message: 'This field is required1'
})

 

Company.vue

<template>
  <ValidationObserver ref="observer" v-slot="{ passes }" tag="div">
    <form @submit.prevent="passes(onSubmit)">
      <ValidationProvider v-slot="{ errors }" tag="div" class="form-label-group"
                          name="company-name"
                          rules="required"
                          :custom-messages="{ 'required': '회사명은 필수 정보입니다.'}">
        <input type="text" class="form-control" placeholder="회사명" v-model="companyName">
        <span class="text text-danger pt-2 pl-2 d-block" v-if="errors[0]">{{ errors[0] }}</span>
      </ValidationProvider>
    </form>
  </ValidationObserver>    
</template>

<script>
import {ValidationObserver, ValidationProvider} from 'vee-validate';

export default {
  components: {
    ValidationObserver,
    ValidationProvider
  }
}
</script>