VeeValidate에서 오류 메시지(필드 이름)를 커스터마이즈하는 방법

VeeValidate에서 오류 메시지(필드 이름)를 커스터마이즈하는 방법

VeValidate가 비활성 필드를 선택하면 필드 이름을 사용하여 오류가 출력됩니다.

The address_line_1 field is required.

필드 이름이 항상 사용자에게 친숙한 것은 아니기 때문에 오류 메시지에서 필드 라벨이나 다른 속성을 사용할 수 있습니까?

사용할 수 있습니다.data-vv-as에러 메세지에 표시됩니다.자세한 것은 이쪽.

<input type="text" name="address_line_1" data-vv-as="Address Line 1" />

편집: 여기에서 문서 참조가 업데이트되었습니다.

VeValidate v3의 경우 합격 가능name의 어트리뷰트ValidationProvider

<ValidationProvider name="first name" rules="required|min:2" v-slot="{ errors }">

vee-validate를 통해 오류 메시지와 이름을 쉽게 맞춤화할 수 있습니다.

1- 다음 명령어를 사용하여 패키지 vee-displaces를 처음 설치합니다.

npm install vee-validate --save

2- 메인에서 다음 항목을 가져오고 등록합니다.

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';
import { ValidationObserver } from 'vee-validate';
Vue.component('ValidationProvider',ValidationProvider);
Vue.component('ValidationObserver',ValidationObserver);

3 - 컴포넌트로 이동하여 입력 필드를 만듭니다.

 <ValidationObserver v-slot="{ handleSubmit }">
                            <form @submit.prevent="handleSubmit(additem)">
                                <ValidationProvider name="Item" rules="required" v-slot="{ errors }">
                                    <div class="row">
                                        <label>Item</label>
                                        <textarea rows="5" id="item" data-vv-as="item1"  class="form-control" v-model="item"></textarea>
                                        <span>{{ errors[0] }}</span>
                                    </div>
                                </ValidationProvider>

                                <div class="row mt-3">
                                    <button class="btn btn-sm btn-primary" type="submit" >Save Item</button>
                                </div>
                            </form>
                        </ValidationObserver>

4- 이제 스크립트 태그의 vue 구성 요소에 다음과 같이 ValidationProvider를 Import할 현지화를 가져옵니다.

import {localize} from "vee-validate/dist/vee-validate.full.esm";
localize({

    en: {
names:{ Item: "ITEM FEILD", firstname: "First Name"},
        fields: {
            Item: {
                required: "Please enter some title",
                // alpha: "please enter alphabets only"
            }
        }
    }
});
    localize("en");

필드 이름을 여러 단어 문자열로 커스터마이즈해야 하는 경우 다른 규칙에서 이 필드를 대상으로 할 때 문제가 발생합니다.Vee Validate 3.x에서는vidprop: 에러 메시지에 표시되는 텍스트의 이름 프로펠을 남기는 모든 필드를 식별합니다.

예:

<validation-provider rules="required" vid="startDate" name="Start date" v-slot="{ errors }">

그런 다음 VID ID를 다른 검증 프로바이더 규칙에서 타겟으로 사용할 수 있습니다.

<validation-provider :rules="{greaterThanDate: {startDate: '@startDate'}}" 
name="End date" v-slot="{ errors }" vid="endDate">

언급

언급URL : https://stackoverflow.com/questions/43070137/how-to-customize-error-message-field-name-in-veevalidate