我目前正在尝试创建一个包含多个“输入字段”组件的注册表单,这些组件都需要在按下提交后进行验证。当其中的文本发生更改时,它们目前都会自行验证,但我发现很难对所有输入字段进行全局调用以验证所有输入字段。我想要实现的目标如下:http://vee-validate.logaretm.com/examples#validate-form但是 validateAll() 方法没有附加字段。
我尝试使用 email 和 confirm_email 填充 validateAll(),这得到了我想要的结果,但错误消息不会显示在字段旁边。
如有任何帮助,我们将不胜感激!
验证输入字段.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>
注册.vue:
<template>
<div class="container">
<Card blueHeader="true" title="Register">
<ValidatedInputField v-model="email" name="email" rules="required|email" as="Email" />
<ValidatedInputField v-model="confirm_email" name="confirm_email" rules="required|email" as="Confirm Email" />
<ValidatedInputField name="company" rules="required" as="Company" />
<InputField name="company_website" as="Company Website" />
<ValidatedInputField name="first_name" rules="required" as="First Name" />
<ValidatedInputField name="last_name" rules="required" as="Last Name" />
<ValidatedInputField name="address_1" rules="required" as="Address 1" />
<InputField name="address_2" as="Address 2" />
<ValidatedInputField name="city" rules="required" as="City" />
<ValidatedInputField name="zip" rules="required" as="Zip/Postal Code" />
</Card>
<Card blueHeader="true" title="Terms & Conditions">
<button v-on:click="submitForm()">Submit</button>
</Card>
</div>
</template>
<script>
import ValidatedInputField from './components/ValidatedInputField';
import InputField from './components/InputField';
module.exports = {
methods: {
submitForm() {
this.$validator.validateAll();
}
},
data() {
return {
email: '',
confirm_email: ''
};
},
components: {
ValidatedInputField,
InputField
}
};
</script>
最佳答案
我有一个类似的设置,我尝试了事件的总线解决方案,但没有成功。然而,我使用了 v-validate 规范中定义的 Provider/Injector 模式。
所以在最顶层的父级中,添加这行代码(注意它是 TYPESCRIPT!)
@Provide('validator') $validator = this.$validator;
然后在每个 child /孙子中添加这行代码:
@Inject('validator') $validator: any;
现在您可以在您的父级中执行此操作,我将使用验证器注入(inject)器收集来自所有组件的所有错误。 (参见规范:https://baianat.github.io/vee-validate/api/errorbag.html#api)
if (this.$validator.errors.any()) {
// Prevent the form from submitting
e.preventDefault();
}
我在帖子中有一个类似的答案; vee-validate error object - _vm.errors is undefined
格茨
关于vue.js - 使用 Vee-Validate 在提交时验证子输入组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41022935/