Question

如何解决vue一个表单下有多个validator时，无法手动校验所有除最后一个validator外的validator?

代码如下，当我把comment填的超过12个字符后，点send按钮还是不会校验comment，但对comment2 却可以。

https://jsfiddle.net/cm7has41/

<script src='https://v1.vuejs.org/js/vue.js'></script>
<script src='https://cdn.jsdelivr.net/vue.validator/2.1.6/vue-validator.min.js'></script>


<div id="app">
    <form novalidate method="post" v-on:submit="submitForm">

        <validator name="validation1">
            <div class="username-field">
                <label for="username">username:</label>
                <input id="username" type="text" initial="off" detect-change="off" detect-blur="off"
                       v-validate:username="['required']">
            </div>
            <div class="comment-field">
                <label for="comment">comment:</label>
                <input id="comment" type="text" initial="off" detect-change="off" detect-blur="off"
                       v-validate:comment="{ maxlength: 12 }">
            </div>
            <div class="errors">
                <p v-if="$validation1.username.required">Required your name.</p>

                <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
            </div>

        </validator>


        <validator name="validation2">
            <div class="username-field">
                <label for="username">username:</label>
                <input id="username" type="text" initial="off" detect-change="off" detect-blur="off"
                       v-validate:username2="['required']">
            </div>
            <div class="comment-field">
                <label for="comment2">comment2:</label>
                <input id="comment2" type="text" initial="off" detect-change="off" detect-blur="off"
                       v-validate:comment2="{ maxlength: 12 }">
            </div>
            <div class="errors">
                <p v-if="$validation2.username2.required">Required your name.</p>

                <p v-if="$validation2.comment2.maxlength">Your comment2 is too long.</p>
            </div>
            <input type="submit" value="send" v-if="$validation1.valid">
        </validator>

    </form>

</div>

<script>
    var app = new Vue({
        el: '#app',
        methods: {
            submitForm: function (e) {
                var self = this;
                var form = e.target;
                console.log(e);
                console.log(form);

                this.$validate("comment", true, function () {

                    console.log(self.$validation1);
                    console.log(self.$validation2);

                    e.preventDefault();
                });

                e.preventDefault();

            }
        }
    })
</script>

Answer 1

<validator name=""></validator>同一个表单中只需要出现一对就行了，不在一个实例中，怎么同时给你验证嘛~你说对不？