我正在开发一个 asp.net MVC 项目。在一页上,它具有许多控件和功能。当用户单击“提交”按钮时,它将在控制器中对输入进行许多验证。如果出现问题,它会在页面上显示错误。否则,将数据库中的数据以 Guid 保存,并转到下一页。
问题是:验证需要一些时间,用户可能会不小心多次单击提交按钮,导致将数据保存到具有相同 Guid 的数据库中,这会引发错误,因为每个数据的 Guid 必须是唯一的。
有没有办法防止用户多次点击?我们不能简单地在点击后禁用按钮。如果验证有问题,则用户无法再次提交,因为按钮被禁用。
答案 0 :(得分:0)
您可以禁用提交按钮,直到所有验证完成。当表单的该部分的验证完成时,为每个返回 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>