小编Cha*_*Joe的帖子

使用Vee-Validate验证提交时的子输入组件

我目前正在尝试使用多个"输入字段"组件创建一个注册表单,一旦按下提交,这些组件都需要验证.当文本内部发生变化时,它们都会自行验证,但我发现很难对所有输入字段进行全局调用以验证所有内容.我想要实现的目的如下:http://vee-validate.logaretm.com/examples#validate-form但validateAll()方法没有附加任何字段.

我尝试使用email和confirm_email填充validateAll(),这得到了我想要的结果,但错误消息不会显示在字段旁边.

任何帮助将非常感激!

ValidatedInputField.vue:

<template>
   <div class="form-control" v-bind:class="{ errorPrompt : errors.has(name) }">
      <label v-bind:for="name">* {{as}}</label>
      <input ref="input" v-bind:value="_value" @input="updateValue($event.target.value)" v-validate v-bind:data-vv-rules="rules" v-bind:name="name" />
      <span v-bind:v-show="'errors.has(' + name +')'">{{ errors.first(name) }}</span>
   </div>
</template>

<script>
module.exports = {
  props: ['name', 'rules', 'as', 'value'],
  methods: {
  updateValue(value) {
     this._value = this.value;
     this.$emit('input', value);
  }
  },
  computed: {
     _value() { return this.value; }
  }
};
</script>
Run Code Online (Sandbox Code Playgroud)

Register.vue:

<template>
  <div class="container">
    <Card blueHeader="true" title="Register">
      <ValidatedInputField v-model="email" name="email" rules="required|email" as="Email" />
      <ValidatedInputField …
Run Code Online (Sandbox Code Playgroud)

vue.js

9
推荐指数
2
解决办法
8153
查看次数

标签 统计

vue.js ×1