VeeValidate 3.1 如何在外部文件和每个组件中添加规则

Question

我可以很好地使用这些规则，但我必须在每个组件中都有它们，这不是 DRY 而是杂乱无章。我想添加 rules.js 文件进行验证，但在文件中你只是扩展了一个 class 所以我不确定如何在将文件导出和导入组件或制作它们方面实现这一点global，我想这样做，因为我在应用程序中有很多表单。

如果它是一个变量，我可以将其导入，但我对如何导入这些扩展 vee-validate 的规则一无所知。

Answer 1

创建 vee-validate.js 文件：

import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";

// Install rules
extend("required", required);

将该文件导入您的入口文件，通常 main.js 如果您使用 vue-cli:

import Vue from 'vue';
import App from './App';
import './vee-validate';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App)
});

或者，如果您使用的是 Nuxt.js，请创建具有相同内容的 plugins/vee-validate 并将其添加到 nuxt.config.js 插件数组。

Answer 2

好的。如果 this.$validate 关闭，那么我们就不能使用 this.$validate.$validatorAll()，这里将是完美的解决方案。因为我在版本 2 中有类似的东西，但现在不起作用了。

 this.$validator
    .validateAll("scope")
    .then(result => {
      if (!result) {
        alert("error");
        return;
      }
      alert("success");
    })
    .catch(() => {});

好吧，在阅读了一些内容后，我设法让它以这种方式工作；

https://medium.com/javascript-in-plain-english/how-to-use-veevalidate-3-for-form-validation-bb18e9c3256c

在您的 bootstrapper js 文件或您的插件文件中，或者可能是您启动 javascript 的地方；示例：index.js.

import Vue from "vue";
import { ValidationProvider } from "vee-validate";
import { ValidationObserver } from "vee-validate";
import * as VeeValidate from "vee-validate";

// Now tell vue to use this plugin

Vue.use(VeeValidate, { inject: false });
Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);

注意：对于那些正在使用 nuxt.js 的人。您可以将此☝️代码复制并粘贴到您的 root directory、plugins/vee-validate.js 中。然后进入你的 nuxt.config.js 文件，它也在你的 root directory 中；并将文件添加到您的插件中，如下所示：

   plugins: ["...some existing plugin", "@/plugins/vee-validate.js"],

在您的表单中，这就是您必须要做的。我在我的表格中使用 BootstrapVue，但也适用于常规 bootstrap 表格。

  <ValidationObserver ref="observer" v-slot="{ invalid }">

      <form class="pt-3" @submit.prevent="sendDataToServer">
        <ValidationProvider name="email" rules="required|email" v-slot="{ errors }">

          <b-form-group  class="{'has-danger': errors[0]"} label="Enter your email" label-for="email" :invalid-feedback="validateFeedback">
           <b-form-input type="email" id="email" name="email" v-model="form.email" data-vv-scope
             aria-describedby="input-1-live-feedback" class="form-control form-control-lg" placeholder="Enter Email" trim required></b-form-input>

           <p class="invalid-form" id="input-1-live-feedback">{{ errors[0]}</p>
          </b-form-group>

      </ValidationProvider>
   </form>

最后在你的计算和方法中：

 computed: {
   validateFeedback() {
     Object.keys(rules).forEach(rule => {
       extend(rule, {
       ...rules[rule], // copies rule configuration
       message: messages[rule] // assign message
    });
  });
}
},

methods: {
   /** Send login form data to server */
   sendDataToServer() {
      const isValideForm = this.$refs.observer.validate();
       if (!isValideForm) {
           return false;
       }
    console.log("working... ");
   }
}

希望这对某人有所帮助。

VeeValidate 3.1 如何在外部文件和每个组件中添加规则

VeeValidate 3.1 how to add rules on external file vs in each component

vee-validate