Javascript 3选项卡式登录表单验证

我有一个3个选项卡的用户表单，其中一个选项卡用于“注册”，另一个选项卡用于“登录”，第三个选项卡用于“忘记”。默认设置为“登录”，在大多数情况下，所有操作都可以正常工作。我的问题是，当用户单击其他选项卡中的一个时，比如说“注册”，然后填写信息并单击“提交”，页面似乎会刷新并跳回默认状态，即登录。我明白它为什么这样做，因为默认单选按钮是这样设置的。我如何停留在该页面上，并确保它已单独完成正确的验证？我知道我可以创建3个单独的页面，但我正在努力使其尽可能高效，这似乎是合乎逻辑的。我尝试过使用“会话”，但一切都太臃肿了。有没有一种简单的方法可以在“当前”选项卡上进行验证？AJAXJavascript？JQuery？我已经试了两个星期了，几乎失败了

登记
登录
忘记
登记




那么你想把这段代码添加到标签页中吗？这是因为当你提交时，你的响应会导致整个页面重新加载，并且它不知道返回哪个标签页。Ajax（使用vanilla JS或jQuery）在这里是一个很好的解决方案，您也可以通过在表单（隐藏字段）中提交用户所在的选项卡，然后在页面加载时使用JS弹出到该选项卡来破解它。
<div class="sign_Area">
<input type="radio" name="tabGroup1" id="rad1" class="tab1"/>
<label for="rad1">REGISTER</label>
<input type="radio" name="tabGroup1" id="rad2" class="tab2" checked="checked"/>
<label for="rad2">LOGIN</label>
<input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
<label for="rad3">FORGOT</label>
<div class="tab1"><!-- REGISTER -->
    <div class="sign_Case">
        REGISTER
        <br/>
        <br/>
        <form action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method = "post">
            <label>Login ID  :</label><input type = "text" name = "new_name" class = "box"/><br /><br />
            <label>Email  :</label><input type = "text" name = "new_email" class = "box"/><br /><br />
            <label>Password  :</label><input type = "text" name = "new_pass" class = "box"/><br /><br />
            <input type = "Submit" value = "Submit" name = "Submit1"/><br />
        </form>
        <br/>
        <br/>
    </div><!-- end of #sign_Case -->
</div><!-- end of TAB1 -->
<div class="tab2"><!-- LOGIN -->
    <div class="sign_Case">
        LOGIN ...
        <br/>
        <br/>
        <form action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method = "post">
            <label>UserName  :</label><input type = "text" name = "username" class = "box"/><br /><br />
            <label>Password  :</label><input type = "password" name = "password" class = "box" /><br/><br />
            <input type = "Submit" value = "Submit" name = "Submit2"/><br />
        </form>
        <br/>
        <br/>
    </div><!-- end of #sign_Case -->
</div><!-- end of TAB2 -->
<div class="tab3"><!-- FORGOT -->
    <div class="sign_Case">
        FORGOT PASSWORD ...
        <br/>
        <br/>
        <form action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method = "post">
            <label>Login1 ID  :</label><input type = "text" name = "forgot_name1" class = "box"/><br /><br />
            <label>Login2 ID  :</label><input type = "text" name = "forgot_name2" class = "box"/><br /><br />
            <input type = "Submit" value = "Submit" name = "Submit3"/><br />
        </form>
        <br/>
        <br/>
    </div><!-- end of #sign_Case -->
</div><!-- end of TAB3 -->
<br/>
<br/>