如何使用 JavaScript 覆盖表单验证答案

【问题标题】：How to override form validation using JavaScript如何使用 JavaScript 覆盖表单验证
【发布时间】：2021-11-01 06:27:54
【问题描述】：

当用户点击返回按钮时，如何编写一个覆盖表单验证的函数？

如果用户没有填写表单并点击提交，它会告诉节目“请填写此字段” 然后我添加了一个后退按钮，以防用户不想填写表格并想返回但是onClick它显示“请填写此字段”

当用户点击返回时如何覆盖它？

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

function goBack() {
  window.history.back()
}

<div class="form-div">
  <form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post" required>
    <button onclick="goBack()">Go Back</button>
    <div class="container">
      <h1>Register</h1>
      <p>Please fill in this form to create an account.</p>
      <hr>
      <label for="name"><b>FullName</b></label>
      <i class="fa fa-user icon"></i>
      <input type="text" placeholder="Enter Name" name="fullName" id="name" required>
      <label for="email"><b>Email</b></label>
      <i class="fa fa-envelope icon"></i>
      <input type="text" placeholder="Enter Email" name="email" id="email" required>
      <label for="psw"><b>Password</b></label>
      <i class="fa fa-key icon"></i>
      <input type="password" placeholder="Password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
      <label for="psw-repeat"><b>Repeat Password</b></label>
      <i class="fa fa-key icon"></i>
      <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
      <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
      <button type="submit" class="registerbtn">Register</button>
    </div>
    <div class="container signin">
      <p>Already have an account? <a href="#">Sign in</a>.</p>
    </div>
  </form>
</div>

【问题讨论】：

<button onclick="goBack()">Go Back</button> 也是一个提交按钮。使其 type="button" 或将其移到表单外
我把它移到表单外，它停止响应 onClick 它什么也没做
这不太可能

标签： javascript html forms validation

【解决方案1】：

我认为从表单标签中删除“必需”属性应该很好，即使您在输入中保留此“必需”属性。

【讨论】：

【解决方案2】：

发生这种情况是因为您在 <form> 中添加了按钮，导致它充当提交按钮
看到这个：How to prevent buttons from submitting forms

所以基本上你可以返回false，但是删除<form>之外的按钮要容易得多

仅供参考
您应该始终检查自己购买的输入值，因为熟悉 devTools 的每个人都可以删除 required 属性，然后将空值发送到您的服务器

另一个仅供参考
您还必须检查服务器中的值，因为您可以通过多种方式覆盖客户端检查（您仅针对 UX 进行客户端检查）

【讨论】：

后者怎么做？检查