避免用户多次点击提交按钮？答案

【问题标题】：Avoid user click submit button more than once?避免用户多次点击提交按钮？
【发布时间】：2021-08-02 07:21:02
【问题描述】：

我正在开发一个 asp.net MVC 项目。在一页上，它具有许多控件和功能。当用户单击“提交”按钮时，它将在控制器中对输入进行许多验证。如果有什么不对，它会在页面上显示错误。否则，将使用 Guid 将数据保存在数据库中，然后转到下一页。

问题是：验证需要一些时间，用户可能会不小心多次单击提交按钮，这会导致使用相同的 Guid 将数据保存到数据库中，这会引发错误，因为 Guid 对于每个数据都必须是唯一的。

有没有办法防止用户点击多次？我们不能简单地在单击后禁用按钮。如果验证有问题，则用户无法再次提交，因为该按钮已禁用。

【问题讨论】：

是的，您可以简单地禁用该按钮。控制器返回一个错误，您可以重新启用该按钮。我假设控制器在页面更改之前就像一个 API 控制器，即在出现错误时返回 JSON 或类似的。如果没有代码，我只能根据您的描述进行假设，这只是当时的猜测。
这是一篇不错的文章，它提供了几种不同的方法来实现您的要求：morioh.com/p/4c24b6c911cd

【解决方案1】：

在完成所有验证之前，您可以禁用提交按钮。跟踪当表单的该部分的验证完成时返回 true 的每个条件的变量，然后在最后检查每个变量以确保每个变量都为 true。如果它们都是 true，则将 submit.disabled 设置为 false。

注意：您也可以对每个输入执行此操作，禁用每个输入，直到前一个输入得到正确验证。

下面是这个逻辑的一个非常基本的例子。

const submit = document.getElementById('submit')
const fname = document.getElementById('fname')
const lname = document.getElementById('lname')
const email = document.getElementById('email')
const inputs = document.querySelectorAll('.input')

function emailIsValid(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
}

function nameIsValid(name) {
  return name.match(/^[A-Za-z]+$/)
}

function validate(fname, lname, email, submit) {
  // the validation variables to check at end to set submit.disabled to false
  let fnameCheck = false,
    lnameCheck = false,
    emailCheck = false;
    
  // check first name field
  if (fname.value !== '' && fname.value.length > 1 && nameIsValid(fname.value)) {
    fname.style.background = 'lightgreen'
    fname.previousSibling.previousSibling.style.background = 'green'
    fnameCheck = true
  } else {
    // JIC they delete reset to false
    fnameCheck = false
    fname.style.background = 'pink'
  }

  if (lname.value !== '' && lname.value.length > 2 && nameIsValid(fname.value)) {
    lnameCheck = true
    lname.style.background = 'lightgreen'
  } else {
    lnameCheck = false
    lname.style.background = 'pink'
  }

  if (emailIsValid(email.value)) {
    emailCheck = true
    email.style.background = 'lightgreen'
  } else {
    emailCheck = false
    email.style.background = 'pink'
  }
  // log for visual inspection of check-variable values
  console.log(lnameCheck, fnameCheck, emailCheck)
  // make sure all check-variables are set to true
  if (fnameCheck === true && lnameCheck === true && emailCheck === true) {
    submit.disabled = false
  }
}

// event listener for each input on input field run the validate function 
// and pass in our inputs and submit button for manipulation.
inputs.forEach(input => 
    input.addEventListener('input', () => validate(fname, lname, email, submit))
  )

<form action="#">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" class="input"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" class="input"><br>
  <label for="email">email:</label><br>
  <input type="text" id="email" name="email" class="input"><br>

  <input type="submit" id="submit" value="Submit" disabled>
</form>

【讨论】：