未捕获的错误：[vee-validate] 不存在此类验证器“1234567”

Question

我正在使用 vee-validate 来验证注册表单，我制作的代码如下，

        <form @submit.prevent="signUp()">
          <div class="form-group" :class="{'has-error': errors.has('register.mobile_number') }" >
            <input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" required class="form-control" type="number" placeholder="Mobile Number">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.email') }" >
            <input v-model="register.email" v-validate="register.email" class="form-control" type="email" data-vv-rules="required|email" placeholder="Email">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.password') }" >
            <input v-model="register.password" v-validate="register.password" name="password" data-vv-rules="required" class="form-control" type="password" placeholder="Password">
          </div>
          <div class="form-group" :class="{'has-error': errors.has('register.confirm_password') }" >
            <input v-model="register.confirm_password" v-validate="register.confirm_password" name="confirm_password" data-vv-as="password" data-vv-rules="required|confirmed:password" class="form-control" type="password" placeholder="Confirm Password">
          </div>
          <div class="modal-footer btn-center">
            <button type="submit" class="btn btn-default">Sign Up</button>
          </div>
        </form>

脚本是：

export default {
data() {
return {
register: {
        mobile_number: '',
        email: '',
        password: '',
        confirm_password: '',
      },
}
},
  methods: {
signUp() {
      this.$validator.validateAll().then((result) => {
      });
      axios.post(config.apiDomain+'/Home',this.register).then(response=>{
      });
    }
},
}

并且还在 main.js 中导入了 vee-validate，

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

但是如果我们在输入框中输入任何内容，就会抛出错误

Uncaught Error: [vee-validate] No such validator '12312321' exists.

无论我在任何输入框中输入什么，它都显示相同的错误。请帮我解决这个问题。

Answer 1

我在 VeeValidate 3 中遇到了类似的错误，问题是我忘记在 import 语句中包含规则，然后像这样扩展它们：

import { required, email, integer, between } from 'vee-validate/dist/rules';

extend('required', required);
extend('email', email);
extend('integer', integer);
extend('between', between);

以防其他人犯同样的错误。

Answer 2

代码错误地指定了验证规则。例如这里：

<input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" class="form-control" type="number" placeholder="Mobile Number">

代码表明验证规则应该是 register.mobile_number 中的任何内容，因为：v-validate="register.mobile_number"。

相反，您应该指定要使用的验证规则的名称。

<input v-model="register.mobile_number" v-validate="'required'" class="form-control" type="number" name="Mobile Number" placeholder="Mobile Number">

请注意，我添加了name="Mobile Number"，因为name 或data-vv-name 是必需的，而我删除了data-vv-rules，因为它是deprecated。

所有这些都直接包含在文档中的basic example 中。