vue同一页面中拥有两个表单时,的验证问题

当在同一页面中使用多个表单时，最好为每个表单使用不同的验证器名称，这可以通过在 Vue 模板的每个表单中设置“name”属性来实现。例如：

<form name="form1" ...>
<input name="username" v-model="username" required>
...
</form>

<form name="form2" ...>
<input name="email" v-model="email" required>
...
</form>

在Vue的脚本中，在create()或mounted()挂钩中创建一个新的对象作为组件的实例，每个表单通过实例挂锁的$refs属性来获取：

const vm = new Vue({
el: '#app',
data: {...},
methods: {...},
computed: {...}
});

const form1 = vm.$refs.form1;
const form2 = vm.$refs.form2;

然后对每个表单实例化一个新的验证器，如下所示：

const validator1 = new VueValidator({
data: form1,
rules: {...}
});

const validator2 = new VueValidator({
data: form2,
rules: {...}
});

这样，您就可以使用不同的验证器在每个表单上执行自定义验证规则了。