使用 Vee-Validate 在提交时验证子输入组件 [英] Validate child input components on submit with Vee-Validate
问题描述
我目前正在尝试创建一个带有多个输入字段"组件的注册表单，一旦按下提交，所有这些组件都需要验证.当其中的文本更改时，它们目前都自行验证，但我发现很难对所有输入字段进行全局调用以验证所有内容.我想要实现的是以下内容:http://vee-validate.logaretm.com/examples#validate-form 但 validateAll() 方法没有附加字段.
我尝试用 email & 填充 validateAll()Confirm_email 得到了我想要的结果，但错误消息不会显示在字段旁边.
任何帮助将不胜感激！
ValidatedInputField.vue:
<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="姓名"/><span v-bind:v-show="'errors.has(' + name +')'">{{ errors.first(name) }}</span></模板><脚本>模块.出口 = {道具: ['name', 'rules', 'as', 'value'],方法: {更新值(值){this._value = this.value;this.$emit('input', value);}},计算:{_value() { 返回 this.value;}}};
注册.vue:
<div class="容器"><卡片 blueHeader="true" title="注册"><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="公司网站"/><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="地址 2"/><ValidatedInputField name="city" rules="required" as="City"/><ValidatedInputField name="zip" rules="required" as="Zip/Postal Code"/></卡片><Card blueHeader="true" title="条款和条件"><button v-on:click="submitForm()">提交</button></卡片></模板><脚本>从 './components/ValidatedInputField' 导入 ValidatedInputField;从 './components/InputField' 导入 InputField；模块.出口 = {方法: {提交表格() {this.$validator.validateAll();}},数据() {返回 {电子邮件: ''，确认电子邮件: ''};},成分: {验证输入字段，输入框}};
我不确定我是否理解正确.但是要进行全局调用，您必须在单击按钮时发出一个事件，并指示每个模板对该事件采取行动.每个模板的操作应该是'this.$validator.validateAll()'，因为'this'将引用那个特定的模板.
你可以通过创建一个命名实例('bus')来做到这一点.在创建实例之前创建它.
var bus = new Vue({});使用它从模板中发出:
bus.$emit('validate_all');并捕获模板:
创建:function() {var vm = 这个；bus.$on('validate_all', function() {vm.$validator.validateAll()});}现在应该已经验证了所有字段，并且应该显示所有错误消息.祝你好运！
I'm currently trying to create a Registration form with multiple "Input Field" components which all require validating once Submit has been pressed. They all currently validate on their own accord when the text within is changed but I'm finding it difficult to make a global call to all input fields to validate all. What I am trying to achieve is the following: http://vee-validate.logaretm.com/examples#validate-form but the validateAll() method has no fields attached to it.
I tried populating validateAll() with email & confirm_email which got me the result I wanted, but the error messages would not show next to the fields.
Any help would be much appreciated!
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>
Register.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>
I'm not sure I understand you correctly. But to make the call globally, you will have to emit an event on clicking the button and instruct each template to act upon that event. The action for each template should be to 'this.$validator.validateAll()', because 'this' will refer to that specific template.
You can do that by creating a named instance ('bus'). Create that before creating the instance.
var bus = new Vue({});
Use that to emit from the template:
bus.$emit('validate_all');
and to catch in a template:
created: function() {
var vm = this;
bus.$on('validate_all', function() {
vm.$validator.validateAll()
});
}
Now all fields should have been validated and all error messages should show. Good Luck!
这篇关于使用 Vee-Validate 在提交时验证子输入组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
