Как использовать validate в vue - PullRequest
1 голос
/ 18 апреля 2020

Я использовал директиву validate в своей форме для проверки содержимого.

<input type="text" v-model="address" name="address" ref="address" v-validate="{ regex:/^([0-9]+|[0-9]+,[0-9]{0,2}?)$/ }" data-vv-validate-on="blur">

Но она возвращает ошибку, как показано ниже:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: validate

Как решить эту проблему?

1 Ответ

2 голосов
/ 18 апреля 2020

Как уже упоминалось в документах :

Мы можем использовать плагин VeeValidate, используя глобальный метод Vue.use(), например:

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

или включите скрипт напрямую, например:

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
    Vue.use(VeeValidate); // good to go.
</script>

Демо:

Vue.use(VeeValidate);
new Vue({
  el: "#app",
  data: {
    address: ''
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/vee-validate@<3.0.0"></script>
<div id="app">
  <form>
    <span>Enter some text, then remove focus from textbox to validate</span><br/>
    <input type="text" v-model="address" name="address" ref="address" v-validate="{ regex:/^([0-9]+|[0-9]+,[0-9]{0,2}?)$/ }" data-vv-validate-on="blur">
    
    <br/>
    <span>{{ errors.first('address') }}</span>
  </form>
</div>
...