Question

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

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

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

Answer 1

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

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

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

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>

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

1 个答案: