Javascript 如果单击按钮，则显示两个窗体之一

我需要一些帮助。我想创建一个有两个按钮的网页，这取决于选择了哪个按钮。我想显示表格1或表格2。接下来，如果用户选择表单1的按钮，我只想对所选表单进行表单验证

//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
显示表格1
显示表格2



这是表格一


表格1方框1
看起来不错！
表格1方框2
看起来不错！
提交表格1



这是表格二


表格2方框1
看起来不错！
表格2方框2
看起来不错！
提交表格2
看看它是否符合您的要求

我刚刚在按钮中添加了一个事件，用于翻转两个窗体的显示属性。
对于验证，仅验证显示的表单，但一旦验证表单，它将保持验证状态


//示例starter JavaScript，用于在存在无效字段时禁用表单提交
（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
功能切换（一）{
设form1=document.getElementById（'form1'）；
设form2=document.getElementById（'form2'）；
如果（i==1）{
form1.style.display='none'；
form2.style.display='block'；
}否则{
form1.style.display='block'；
form2.style.display='none'；
}
}
.row{
背景#f8f9fa；
边缘顶部：20px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}
显示表格1
显示表格2




这是表格一


表格1方框1
看起来不错！
表格1方框2
看起来不错！
提交表格1

这是表格二


表格2方框1
看起来不错！
表格2方框2
看起来不错！
提交表格2
对于表单，您可以尝试在单击时将表单显示设置为“无”。在形式1和形式2之间交替