vee-validate 3 的有效格式是什么？答案

【问题标题】：Which is valid format for vee-validate 3?vee-validate 3 的有效格式是什么？
【发布时间】：2020-03-19 07:15:38
【问题描述】：

在@vue/cli 4.0.5 应用程序中，我安装了 "vee-validate": "^3.0.11" 并遇到问题，因为试图设置 common 电子邮件字段的验证规则：

<validation-provider rules="required|email" v-slot="{ errors }">
<input
        type='email'
        v-model="form.email"
        name="email"
        id="email"
        class="form-control editable_field" placeholder="Email Address"
>
<span>{{ errors[0] }}</span>
</validation-provider>

   ...
<script>
    import {ValidationProvider, extend} from 'vee-validate'
    import {required, email} from 'vee-validate'
    extend('required', value => !!value);
    extend('email', value => !!value);

验证根本没有，没有错误信息或控制台错误...

怎么了？

修改#2：

查看文档和实时示例 https://codesandbox.io/s/jdqzk 我尝试使用验证和出现错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: handleSubmit is not a function"

发现于 ---> 在 src/views/auth/Login.vue

我的 src/views/auth/Login.vue ：

<template>
   <div class="page_content_container">

      <div class="page_content_content col-xs-12 col-sm-10 col-md-6 mx-auto">

         <ValidationObserver v-slot="{ handleSubmit }">
            <form class="login" v-on:submit.prevent="handleSubmit(authenticate)">
               <div class="card">

                  <div class="card-body card-block">

                     <div class="block_2columns_md m-3"> <!-- email -->

                        <div class="key_values_rows_label_13 m-0 p-0">
                           <label class="col-form-label" for="email">Email:</label>
                        </div>
                        <div class="key_values_rows_value_13 m-0 p-0">
                           <div class="col-12">
                              <div class="input-group">
                                 <div class="input-group-addon">
                                    <i :class="'i_link '+getHeaderIcon('email')"></i>
                                 </div>
                                 <ValidationProvider
                                       rules="required"
                                       immediate
                                       v-slot="{ errors }"
                                 >
                                    <input
                                          v-model="form.email"
                                          name="email"
                                          id="email"
                                          class="form-control editable_field" placeholder="Email Address"
                                    >
                                 </ValidationProvider>
                              </div>
                           </div>
                        </div>

                     </div> <!-- <div class="block_2columns_md m-0"> email -->

                     <div class="block_2columns_md m-3"> <!-- password -->

                        <div class="key_values_rows_label_13 m-0 p-0">
                           <label class="col-form-label" for="password">Password:</label>
                        </div>
                        <div class="key_values_rows_value_13 m-0 p-0">
                           <div class="col-12">
                              <div class="input-group">
                                 <div class="input-group-addon">
                                    <i :class="'i_link '+getHeaderIcon('password')"></i>
                                 </div>
                                 <input type="password" v-model="form.password" id="password" name="password" class="form-control editable_field"
                                        placeholder="Password"
                                 >
                              </div>
                           </div>
                        </div>

                     </div> <!-- <div class="block_2columns_md m-0"> password -->

                  </div> <!-- <div class="card-body card-block"> -->

                  <div class="card-footer m-0 p-0">
                     <div class="form-row m-1" style="justify-content: flex-end;">
                        <button type="reset" class="btn btn-danger btn-sm m-2">
                           <i :class="'i_link '+getHeaderIcon('cancel')"></i>Home
                        </button>
                        <button type="submit" class="btn btn-success btn-sm m-2 ml-4 mr-4">
                           <i :class="'i_link '+getHeaderIcon('save')"></i>Submit
                        </button>
                     </div>
                  </div>

               </div> <!-- <div class="card"> -->

            </form>
         </ValidationObserver>

      </div> <!-- page_content_content -->

   </div> <!-- page_content_container -->
</template>

<script>
    import {bus} from '../../../src/main'
    import appMixin from '@/appMixin'

    import {ValidationObserver, ValidationProvider, localize, extend} from 'vee-validate'
    import en from 'vee-validate/dist/locale/en.json';
    import * as rules from 'vee-validate/dist/rules';

    localize('en', en);

    extend('required', {
        validate(value) {
            return {
                required: true,
                valid: ['', null, undefined].indexOf(value) === -1
            };
        },
        computesRequired: true
    });

    export default {
        name: 'loginPage',

        components: {
            ValidationObserver, ValidationProvider
        },

        data() {
            return {
                form: {
                    email: '',
                    password: ''
                },
                error: null,
                site_name: process.env.VUE_APP_SITE_NAME
            }
        },

        mixins: [appMixin],

        methods: {
            authenticate() {
                alert('authenticate::' + (-3))

                console.log('authenticate  this.form::')
                console.log(this.form)

                this.$store.dispatch('login', this.form)
                    .then(() => this.$router.push('/'))
                    .catch(err => console.log(err))
            }
        }, // methods: {

        computed: {
            authError() {
                return this.$store.getters.authError
            }
        } // computed: {
    }

</script>

我希望 handleSubmit 是在 vee-validate 库中定义的... 在示例中，我没有看到它是附加导入的。我试图创建自己的 handleSubmit 方法，但还是出错了......

如何解决？

修改#3：

我现在搬到了 3.1 和我的 /package.json ：

{
  "name": "ctasks",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^3.3.2",
    "font-awesome": "^4.7.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "vee-validate": "^3.1.0",
    "vue": "^2.6.10",
    "vue-focus": "^2.1.0",
    "vue-js-modal": "^1.3.31",
    "vue-notification": "^1.3.20",
    "vue-router": "^3.1.3",
    "vue-select": "^3.2.0",
    "vue2-filters": "^0.8.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-router": "^4.0.0",
    "@vue/cli-plugin-vuex": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.16.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

和

run npm install

我根据https://codesandbox.io/s/rsmwq 示例重新制作了我的页面，其中 loginData 定义为表单数据变量：

<template>
    <div class="page_content_container">

        <div class="page_content_content col-xs-12 col-sm-10 col-md-6 mx-auto">

            <ValidationObserver ref="form">
                <form class="login" @submit.prevent="handleSubmit(onSubmit)">
                    <div class="card">

                        <div class="card-body card-block">

                            <div class="block_2columns_md m-3"> <!-- email -->

                                <div class="key_values_rows_label_13 m-0 p-0">
                                    <label class="col-form-label" for="email">Email:</label>
                                </div>
                                <div class="key_values_rows_value_13 m-0 p-0">
                                    <div class="col-12">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i :class="'i_link '+getHeaderIcon('email')"></i>
                                            </div>
                                            <ValidationProvider
                                                    rules="required"
                                                    immediate
                                                    v-slot="{ errors }"
                                            >
                                                <input
                                                        v-model="loginData.email"
                                                        name="email"
                                                        id="email"
                                                        class="form-control editable_field" placeholder="Email Address"
                                                >
                                            </ValidationProvider>
                                        </div>
                                    </div>
                                </div>

                            </div> <!-- <div class="block_2columns_md m-0"> email -->

                            <div class="block_2columns_md m-3"> <!-- password -->

                                <div class="key_values_rows_label_13 m-0 p-0">
                                    <label class="col-form-label" for="password">Password:</label>
                                </div>
                                <div class="key_values_rows_value_13 m-0 p-0">
                                    <div class="col-12">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i :class="'i_link '+getHeaderIcon('password')"></i>
                                            </div>
                                            <input type="password" v-model="loginData.password" id="password" name="password" class="form-control editable_field"
                                                   placeholder="Password"
                                            >
                                        </div>
                                    </div>
                                </div>

                            </div> <!-- <div class="block_2columns_md m-0"> password -->

                        </div> <!-- <div class="card-body card-block"> -->

                        <div class="card-footer m-0 p-0">
                            <div class="form-row m-1" style="justify-content: flex-end;">
                                <button type="reset" class="btn btn-danger btn-sm m-2">
                                    <i :class="'i_link '+getHeaderIcon('cancel')"></i>Home
                                </button>
                                <button type="submit" class="btn btn-success btn-sm m-2 ml-4 mr-4">
                                    <i :class="'i_link '+getHeaderIcon('save')"></i>Submit
                                </button>
                            </div>
                        </div>

                    </div> <!-- <div class="card"> -->

                </form>
            </ValidationObserver>

        </div> <!-- page_content_content -->

    </div> <!-- page_content_container -->
</template>

<script>
    import {bus} from '../../../src/main'
    import appMixin from '@/appMixin'

    import {ValidationObserver, ValidationProvider, localize, extend} from 'vee-validate'
    import en from 'vee-validate/dist/locale/en.json';
    import * as rules from 'vee-validate/dist/rules';

    localize('en', en);

    extend('required', {
        validate(value) {
            return {
                required: true,
                valid: ['', null, undefined].indexOf(value) === -1
            };
        },
        computesRequired: true
    });

    export default {
        name: 'loginPage',

        components: {
            ValidationObserver, ValidationProvider
        },

        data() {
            return {
                loginData: {
                    email: '',
                    password: ''
                },
                error: null,
                site_name: process.env.VUE_APP_SITE_NAME
            }
        },

        mixins: [appMixin],


        methods: {
            onSubmit() {

                    this.$refs.form.validate().then(success => {
                        if (!success) {
                            return;
                        }

                        alert('Form has been submitted!');

                        this.firstName = this.lastName = this.email = '';

                        this.$nextTick(() => {
                            this.$refs.form.reset();
                        });
                    });
            } // onSubmit

        }, // methods: {

        computed: {
            authError() {
                return this.$store.getters.authError
            }
        } // computed: {
    }

</script>

但是点击提交按钮我还是报错：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "handleSubmit" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我看不出我的代码有什么问题？

谢谢！

【问题讨论】：

标签： vuejs2 vee-validate

【解决方案1】：

您应该阅读有关必填字段的指南，引用自文档：

vee-validate 不会验证为空的可选字段。这是有道理的，如果用户没有在可选字段中输入任何值，则它是有效的。在他们输入非空值之前，不会运行规则。

见Required fields。

【讨论】：

谢谢，我读到了：它与 v2 非常不同。我创建了规则和字段定义，但是有任何方法，例如： this.$validator.validateAll().then((result) => { ，我用来检查所有规则并在成功的情况下提交数据？
请看修改#2：
确保您使用的是 vee-validate 3.1 这在此处记录：logaretm.github.io/vee-validate/guide/…
将 v-slot="{handleSubmit}" 添加到您的 ValidationObserver ... 错误对我来说似乎很清楚？
我不知道如何使用它。你能举个例子吗？

【解决方案2】：

感谢@Ryley！我将我的表格重新制作为：

<ValidationObserver ref="form" v-slot="{handleSubmit}">
...
   <ValidationProvider
      name="Password"
      rules="required"
      v-slot="{ errors }"
   > 
      <div class="input-group">
         <div class="input-group-addon">
            <i :class="'i_link '+getHeaderIcon('users')"></i>
         </div>
         <input
              type='text'
              v-model="form.name"
              name="name"
              id="name"
              class="form-control editable_field" placeholder="Username"
         >
      </div>
       <div class="validation_error">{{ errors[0] }}</div>
   </ValidationProvider>

验证工作正常！

【讨论】：