vee验证自定义规则出错

Question

在@vue/cli 4.1中。1应用程序我使用v-money和vee validate，我发现所需规则不适用于v-money，因为它始终具有“0”值。因此，我在这里编写自定义验证http://vee-validate.logaretm.com/v2/guide/custom-rules.html#using-习惯规则

在测试页面中插入此测试[ple]控制台中出现警告：

 WARNING  Compiled with 2 warnings                                                                                                                                                                           7:45:56 AM

 warning  in ./src/views/Test.vue?vue&type=script&lang=js&

"export 'Validator' was not found in 'vee-validate'

 warning  in ./src/views/Test.vue?vue&type=script&lang=js&

"export 'Validator' was not found in 'vee-validate'


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

在浏览器中，我看到错误：

vue-router.esm.js?8c4f:2113 TypeError: Cannot read property 'extend' of undefined
    at eval (Test.vue?f246:87)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Test.vue?vue&type=script&lang=js& (4.js:11)
    at __webpack_require__ (app.js:790)
    at fn (app.js:151)

我的测试组件：

<template>
    <div class="frontend_item_container">
        <ValidationObserver
                ref="pageObserverForm"
                v-slot="{handleSubmit}"
        >
            <b-form @submit.prevent="handleSubmit(onSubmit)">

                <b-card-header>
                    <h3 class="row_content_left_aligned p-2" v-show="is_page_loaded">
                        <i :class="'info_link '+getHeaderIcon('page')"></i>{{ getHeaderTitle }}
                    </h3>
                    <div v-show="!is_page_loaded">
                        <h3>
                            <b-spinner variant="success" label="Page loading"></b-spinner>&nbsp;Page loading...
                        </h3>
                    </div>

                </b-card-header>

                <b-card-body v-show="is_page_loaded">

                    <b-row class="editor_row">
                        <b-col md="4">
                            <label for="editable_ad_price" class="pt-2 ">
                                Price<span class="required"> * </span>:
                            </label>
                        </b-col>
                        <b-col md="8">
                            price::{{ price}}
                            <ValidationProvider
                                    name="editable_ad_price"
                                    rules="required|truthy"
                                    v-slot="{ errors }"
                            >
                                <money
                                        v-model="price"
                                        v-bind="moneyConfig"
                                        name="editable_ad_price"
                                        id="editable_ad_price"
                                        class="form-control text-right"
                                        placeholder="Enter price"
                                >
                                </money>
                                <p class="validation_error">{{ clearErrorMessage(errors[0]) }}</p>
                            </ValidationProvider>
                        </b-col>
                    </b-row>

                </b-card-body>

                <b-card-footer class="buttons_container" v-show="is_page_loaded">
                    <b-button size="md" @click.prevent="$router.push('/admin/pages')" class="m-3">
                        <i :class="'a_link '+getHeaderIcon('cancel')"></i>Cancel
                    </b-button>
                    <b-button type="submit" size="md" variant="success" class="m-3">
                        <i :class="'action_link '+getHeaderIcon('save')"></i>{{ submit_label }}
                    </b-button>
                </b-card-footer>

            </b-form>
        </ValidationObserver>
    </div>
</template>

<script>
    import appMixin from '@/appMixin';
    import Vue from 'vue'

    import money from 'v-money'
    Vue.use(money, {precision: 4})

    import {settingsLocalizeMessages} from '@/app.settings.js'

    import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'

    import * as rules from 'vee-validate/dist/rules';

    Object.keys(rules).forEach(rule => {
        extend(rule, rules[rule]);
    });


    import { Validator } from 'vee-validate';

    Validator.extend('truthy', {
        getMessage: field => 'The ' + field + ' value is not truthy.',
        validate: value => !! value
    });

    let instance = new Validator({ trueField: 'truthy' });

    instance.extend('falsy', (value) => ! value);

    instance.attach({
        name: 'falseField',
        rules: 'falsy'
    });


    import {localize} from 'vee-validate';
    localize({
        en: settingsLocalizeMessages['en']
    });

    export default {
        data() {

            return {
                apiUrl: process.env.VUE_APP_API_URL,
                price: 12,
                moneyConfig: {
                    decimal: ',',
                    thousands: '.',
                    prefix: '$',
                    suffix: '',
                    precision: 2,
                    masked: false
                },
                is_page_loaded: false,

            }
        }, // data() {

        name: 'testPage',
        mixins: [appMixin],

        components: {
            ValidationObserver, ValidationProvider
        },

        mounted() {
        }, //  mounted() {

        created() {
        }, //  created() {

        beforeDestroy() {
        },

        methods: {
        },  // methods: {

        computed: {
            getHeaderTitle: function () {
                return 'Test'
            },
        }, //computed: {


    }
</script>

为什么会出现错误以及如何修复？

"bootstrap-vue": "^2.3.0",
"v-money": "^0.8.1",
"vee-validate": "^3.2.1",
"vue": "^2.6.11",

谢谢！

Answer 1

您正在使用vee validate的旧文档。在版本3中，您必须执行以下操作：

import { extend } from 'vee-validate';

还可以查看3。此处有x个文档：https://logaretm.github.io/vee-validate/guide/basics.html#adding-规则