如何解决vue一个表单下有多个validator时,无法手动校验所有除最后一个validator外的validator?
如何解决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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
<validator name=""></validator>同一个表单中只需要出现一对就行了,不在一个实例中,怎么同时给你验证嘛~你说对不?