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

发布于 2022-09-04 13:57:20 字数 3080 浏览 13 评论 0

如何解决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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夜唯美灬不弃 2022-09-11 13:57:20

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文