Javascript 在选项卡更改时验证表单字段

我有两个不同字段的选项卡。一个是使用电子邮件、名称和密码字段注册，另一个是使用用户名和密码字段登录。表单操作将指向同一个servlet页面。那么，我将如何相应地验证这两个选项卡

<form name="form" action="RegisterServlet" method="post" onsubmit ="return validate()" >
<div class="login-wrap">
<div class="login-html">
    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab" >Sign In</label>
    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
    <div class="login-form">
        <div class="sign-in-htm">
            <div class="group">
                <label for="user1" class="label">Username</label>
                <input id="user1" name="username1" type="text" class="input" >
            </div>
            <div class="group">
                <label for="pass1" class="label">Password</label>
                <input id="pass1" name="password1" type="password" class="input" data-type="password" >
            </div>
            <span style="color:red"><%=(request.getAttribute("errMessage") == null) ? ""
 : request.getAttribute("errMessage")%></span>

            <div class="group">
                <input type="submit" name="ACTION" class="button" value="Login" >
            </div>
            <div class="hr"></div>
            <div class="foot-lnk">
                <a href="RegisterServlet?action=forgot-password">Forgot Password?</a>
            </div>
        </div>
        <div class="sign-up-htm">
            <div class="group">
                <label for="user" class="label">Username</label>
                <input id="user" name="username" type="text" class="input" >
            </div>
            <div class="group">
                <label for="pass" class="label">Password</label>
                <input id="pass" name="password" type="password" class="input" data-type="password" >
            </div>
            <div class="group">
                <label for="email" class="label">Email Address</label>
                <input id="email" name="email" type="text" class="input" >
            </div>
            <div class="group">
                <input type="submit" name="ACTION" class="button" value="Register" >
            </div>
            <div class="hr"></div>
            <div class="foot-lnk">
                <label for="tab-1">Already Member?</a>
            </div>
        </div>
    </div>
</div>

登录
注册
用户名
密码
用户名
密码
电子邮件地址
已经是会员了吗？

为单选按钮添加onchange处理程序，并确保 形式是可见的

为表单提交处理程序添加验证方法

希望这有帮助

函数onChangeSignIn（）{
var signIn=document.getElementsByClassName（“登录htm”）；
登录[0]。类列表。删除（“禁用”）；
var signUp=document.getElementsByClassName（“注册htm”）；
注册[0]。类列表。添加（“禁用”）；
}
函数onChangeSignUp（）{
var signIn=document.getElementsByClassName（“登录htm”）；
登录[0]。类列表。添加（“禁用”）；
var signUp=document.getElementsByClassName（“注册htm”）；
注册[0]。类列表。删除（“禁用”）；
}
函数验证（）{
if（选中document.getElementById（“tab-1”））{
console.log（'在选项卡1上-登录'）
//对选项卡1字段进行验证
const user1=document.getElementById（“user1”）.value；
如果（user1==“”）{
console.log（“登录时用户名为空，请输入”）；
返回false；
}
}
if（选中document.getElementById（“tab-2”））{
console.log（'在选项卡2上-注册'）
//对选项卡2字段进行验证
const user=document.getElementById（“用户”）.value；
如果（用户==“”）{
console.log（“注册时用户名为空，请输入”）；
返回错误
}
}
返回false；//或基于验证返回true
}
onChangeSignIn（）
。禁用{
显示：无；
}

登录
注册
用户名
密码
用户名
密码
电子邮件地址
已经是会员了吗？
您需要在两个不同的表单标签中添加注册和登录。它们可以指向同一个servlet页面，但您将知道单击了哪个按钮，然后您可以相应地执行您的功能。