如何实现HTML注册/登录表单仅在对应操作时验证必填字段？

我有一个包含注册（signup）和登录（login）两个表单的HTML页面，当前所有字段均设置了required属性，但希望实现仅在执行注册操作时校验注册表单的必填字段，执行登录操作时仅校验登录表单的必填字段。以下是我的代码片段：

<body> 
  <form name="register" action="FrontController" method="POST" style="border:1px solid #ccc"> 
    <div class="container"> 
      <h1>Sign Up</h1> 
      <p>Please fill in this form to create an account.</p> 
      <hr> 
      <label for="email"><b>Email</b></label> 
      <input type="text" placeholder="Enter Email" name="email" required> 
      <label for="postnummer"><b>Postnummer</b></label> 
      <input type="text" placeholder="Skriv dit postnummer" name="postnummer" required> 
      <label for="postnummer"><b>Postnummer</b></label> <!-- 重复的label id，建议修正 -->
      <input type="text" placeholder="Skriv dit postnummer" name="postnummer" required> 
      <label for="adresse"><b>Adresse</b></label> 
      <input type="text" placeholder="Skriv din adresse" name="adresse" required> 
      <label for="phonenr"><b>Telefonnummer</b></label> 
      <input type="text" placeholder="Skriv dit telefonnummer" name="phonenr" required> 
      <label for="psw"><b>Password</b></label> 
      <input type="password" placeholder="Enter Password" name="psw" required> 
      <label for="psw-repeat"><b>Repeat Password</b></label> 
      <input type="password" placeholder="Repeat Password" name="psw-repeat" required> 
      <label> 
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me 
      </label> 
      <div class="container"> 
        <h1>Login</h1> 
        <hr> 
        <label for="email"><b>Email</b></label> 
        <input type="text" placeholder="Enter Email" name="email" required> 
        <label for="psw"><b>Password</b></label> 
        <input type="password" placeholder="Enter Password" name="psw" required> 
        <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p> 
        <div class="clearfix"> 
          <button type="submit" class="loginbtn" value="Submit">Login</button> 
          <button type="submit" class="signupbtn" value ="Submit">Login</button> <!-- 按钮文字错误，应为Sign Up -->
        </div> 
      </div>
    </div>
  </form>
</body>

请问是否可以实现该需求？

当然可以实现！你的核心问题在于当前HTML结构里注册表单和登录表单是嵌套在一起的，浏览器会把所有required字段都归为同一个表单的内容，导致提交时会触发所有字段的校验。只需要调整结构，把两个表单拆分成独立的实体，就能让浏览器的默认校验只针对当前提交的表单生效。

下面是具体的解决方案：

1. 拆分独立表单 #

把注册和登录内容分别放在各自的<form>标签里，不要嵌套。每个表单拥有自己的提交按钮，这样点击提交时，浏览器只会校验当前表单内的required字段。

2. 区分表单操作（可选但推荐） #

给每个表单添加隐藏字段，让后端明确知道当前是注册还是登录请求，方便后续业务处理。

修改后的完整代码示例 #

<body>
  <!-- 注册表单 -->
  <form name="register" action="FrontController" method="POST" style="border:1px solid #ccc; margin-bottom: 20px;">
    <div class="container">
      <h1>Sign Up</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>
      <label for="reg-email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" id="reg-email" required>
      
      <label for="reg-postnummer"><b>Postnummer</b></label>
      <input type="text" placeholder="Skriv dit postnummer" name="postnummer" id="reg-postnummer" required>
      
      <label for="reg-adresse"><b>Adresse</b></label>
      <input type="text" placeholder="Skriv din adresse" name="adresse" id="reg-adresse" required>
      
      <label for="reg-phonenr"><b>Telefonnummer</b></label>
      <input type="text" placeholder="Skriv dit telefonnummer" name="phonenr" id="reg-phonenr" required>
      
      <label for="reg-psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" id="reg-psw" required>
      
      <label for="reg-psw-repeat"><b>Repeat Password</b></label>
      <input type="password" placeholder="Repeat Password" name="psw-repeat" id="reg-psw-repeat" required>
      
      <label>
        <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
      </label>
      
      <!-- 隐藏字段：告诉后端这是注册请求 -->
      <input type="hidden" name="action" value="register">
      
      <div class="clearfix">
        <button type="submit" class="signupbtn">Sign Up</button>
      </div>
    </div>
  </form>

  <!-- 登录表单 -->
  <form name="login" action="FrontController" method="POST" style="border:1px solid #ccc">
    <div class="container">
      <h1>Login</h1>
      <hr>
      <label for="login-email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" id="login-email" required>
      
      <label for="login-psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" id="login-psw" required>
      
      <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
      
      <!-- 隐藏字段：告诉后端这是登录请求 -->
      <input type="hidden" name="action" value="login">
      
      <div class="clearfix">
        <button type="submit" class="loginbtn">Login</button>
      </div>
    </div>
  </form>
</body>

关键说明 #

• 表单独立性：两个表单完全分离后，点击注册按钮只会触发注册表单的required校验，点击登录按钮只会校验登录表单的字段，浏览器默认行为就会帮你完成这个逻辑，不需要额外JS（如果需要自定义校验逻辑，也可以基于此扩展）。
• ID修正：原代码里多个字段用了相同的id（比如多个email），这不符合HTML规范，我给每个表单的字段加了前缀（reg-、login-）来避免冲突。
• 按钮文字修正：原代码里注册按钮的文字是Login，已经改成了Sign Up，符合功能逻辑。

这样调整后，你的需求就完美实现了！

内容的提问来源于stack exchange，提问作者kristheman