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

问题描述

我目前正在尝试创建包含多个输入字段组件的注册表单，一旦按下提交，所有这些组件都需要进行验证。当前，当其中的文本发生更改时，他们都将根据自己的意愿进行验证，但是我发现很难对所有输入字段进行全局调用以验证所有内容。我要实现的目标如下：

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

是，这与这个问题类似

In your example i can't see any validation attempt, but here is my working example in jsfiddle: link

我做了什么：
-向信息组件添加提交方法

what i did: -add submit method to info component

submit: function(){
        var validationArray = this.$children.map(function(child){
        return child.$validator.validateAll();
      });

    window.Promise.all(validationArray).then((v) => {
            alert('From Submitted!');
        }).catch(() => {
            alert('Correct them errors!');
        });
    }

此方法基本上会验证您信息的所有子级（在这种情况下为单输入）。

this method basically validates all children of your info(single-inputs in this case).

-更改了带有错误信息的span模板：

-changed a bit template of span with error message:

{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }}

编辑：
我只能猜测您的代码出了什么问题，但是我相信在您的情况下的问题是，您必须在带有输入的组件（单输入而不是信息组件）下访问直接验证器。

edit:I can only gues what was wrong with your code, but I belive that problem in your case was fact that you have to access a "direct" validators under components with inputs - single-input, not info component.

这篇关于使用Vee-Validate和vue js 2验证提交时的子输入组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！