如何在一个表单中验证3个div代码

Question

在id为"join_del"的表单中，有3个div标记具有一组输入。

我已经准备好了，在div"register1"中单击按钮后，它会显示div"register2"。在div"register2"中单击按钮后，div"register3"将出现。HTML代码是：

<form id="join_del" action="{{ route('register') }}" method="post" >
<div id="register1" v-show="register1 == 1">
Some Input Code Here
</div>
<div id="register2" v-show="register2 == 1">
Some Input Code Here
</div>
<div id="register3" v-show="register3 == 1">
Some Input Code Here
</div>
</form>

vue.js代码是：

data: {
register1: 1,
register2: 1,
register3: 1,
t_c1: 0,
},
secondForm(){
this.register1=0;
this.register2=1;
window.scrollTo(0, 0);
},
thirdForm(){
this.register1=0;
this.register2=0;
this.register3=1;
window.scrollTo(0, 0);
},

在转到"register2"之前，我如何验证和显示"register1"中的错误，依此类推。？

Answer 1

我会使用一个防止"下一步"按钮的计算属性。类似于：

<template>
<form>
<div v-show="register">
<input type="text" v-model="register1">
<button :disabled="stepOneInvalid">Next Step</button>
</div>
</form>
</template>
<script>
export {
computed: {
stepOneInvalid() {
return this.register1.length == 0 // Or whatever your validation rules for each field are
}
}
}
</script>