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

Question

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

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

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

Answer 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>