반응형
vue2 plus vee-validate - ES6 없이 오류 메시지를 커스터마이즈하려면 어떻게 해야 합니까?
vee-validate 에러 메시지를 커스터마이즈 하려고 합니다만, Web 사이트의 예에서는 모두 ES6 를 사용하고 있습니다.그것이 없어도 충분히 할 수 있기 때문에, 제가 잘못하고 있는 것에 대한 어떠한 제안도 감사하게 생각합니다.
<script>
const messages = {
en: {
confirmed: "Your password is not confirmed",
email: "I really dont like your email"
}
};
Vue.use(VeeValidate);
var app = new Vue({
el: '#app'
});
app.$validator.updateDictionary(messages);
</script>
오류는 없으며 기본 메시지가 사용됩니다.
갱신하다
아래는 저의 HTML 코드입니다.
<input type="text" name="email" v-validate data-vv-rules="required|email" />
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>
<input type="password" name="password" v-validate data-vv-rules="required" />
<span v-show="errors.has('password')">{{ errors.first('confirmation')}} </span>
<input type="password" name="confirmation" v-validate data-vv-rules="confirmed:password"/>
<span v-show="errors.has('confirmation')">{{ errors.first('confirmation')}}/span>
() =>
는 ES6에서 함수를 정의하기 위한 구문이며 vee-validate 구문을 이전 Javascript로 변환합니다.
따라서 매뉴얼을 참조해 주십시오.
alpha: () => 'Some English Message'
와 동등할 것이다
alpha: function() {
return 'Some English Message'
}
마찬가지로 다음과 같이 변경해야 합니다.
<script>
const messages = {
en: {
confirmed: function () {
return "Your password is not confirmed"
},
email: function () {
return "I really dont like your email"
}
}
};
Vue.use(VeeValidate);
var app = new Vue({
el: '#app'
});
app.$validator.updateDictionary(messages);
</script>
작업 예제를 사용하여 답변 업데이트
위의 코드에 구문 오류가 있는 것 같습니다.다음은 최신 vee-validate 구문을 사용하는 동작 코드입니다.
<script>
const dictionary = {
en: {
messages: {
confirmed: function () {
return "Your password is not confirmed"
},
email: function () {
return "I really dont like your email"
}
}
}
};
VeeValidate.Validator.updateDictionary(dictionary);
Vue.use(VeeValidate);
Vue.config.debug = true;
var App = new Vue({
el: '#app'
});
</script>
작업용 바이올린
언급URL : https://stackoverflow.com/questions/41073224/vue2-plus-vee-validate-how-to-customize-error-messages-without-es6
반응형
'programing' 카테고리의 다른 글
라우터 뷰에서 동일한 컴포넌트 간의 Vue 전환이 다시 마운트/생성되지 않음 (0) | 2022.07.17 |
---|---|
POSIX 시스템에서는 argc를 0으로 할 수 있습니까? (0) | 2022.07.17 |
상태를 완전히 복제하고 Vuex에서 롤백하려면 어떻게 해야 합니까? (0) | 2022.07.10 |
구성 요소 vuej 외부에 있는 저장소에 액세스 (0) | 2022.07.10 |
구조 필드(C)를 할당하면 "error: assignment to expression with array type error"가 나타난다. (0) | 2022.07.10 |