asp.net表单提交时防重复提交并执行前台的JS验证

近期，我在项目开发中遇到了一种常见的问题：用户重复提交表单。这种情况的出现，不能简单归咎于用户操作失误，很多时候是由于.NET框架或服务器响应缓慢导致的体验不佳。对于这个问题，我在网络上寻找了许多解决方案，并发现了一些有用的教程和示例代码。

在深入研究后，我意识到，要想解决这个问题，同时保证良好的用户体验，我们需要对现有的方法进行一些改进。有些网站采用的方法是在前台执行JS或Jquery验证，然而这种方法在某些情况下会导致重复提交的问题依然存在，或者会使前台的JS验证失效。

我决定自己开发一个解决方案。这个方案可以在阻止用户重复提交的确保前台的JS验证依然有效。这个方案的核心思想是利用一个遮罩层覆盖在提交按钮上，以阻止用户的重复提交操作。当用户在短时间内多次点击提交按钮时，这个遮罩层会立刻出现，显示一个加载动画，例如一个打转的图片，同时阻止进一步的点击操作。

以下是实现这个方案的部分代码：

我们需要为按钮添加点击事件，并创建一个遮罩层。这个遮罩层会跟随按钮的位置移动，并显示一个加载动画。如果JS验证失败，我们会将ControlRegPostResult设置为false，这样遮罩层就会保持显示，阻止用户的重复提交操作。

```javascript

var ItSelfButton;

var ControlRegPostResult = true;

function AddInputClick() {

$("input[type='submit']").click(function () {

ItSelfButton = $(this);

if (ItSelfButton.attr("repeat") == null) {

// 创建遮罩层并显示加载动画

// ...

// 判断JS验证结果，如果验证失败则保持遮罩层显示

if (!ControlRegPostResult) {

// 保持遮罩层显示

} else {

setTimeout(MaskTimeOutRemove, 200); // 200毫秒后移除遮罩层

}

}

});

}

$(function () {

AddInputClick(); // 初始化函数

});

// 当窗口大小改变时，调整遮罩层的位置

$(window).resize(function () {

if (ItSelfButton != null) {

// 调整遮罩层的位置

}

});

// 移除遮罩层的函数

function MaskRemove() {

$("Mask_BTN").remove();

}

// 定时移除遮罩层，如果JS验证失败则不移除

function MaskTimeOutRemove() {

if (!ControlRegPostResult) {

return; // 如果验证失败，则不执行移除操作

}

MaskRemove(); // 移除遮罩层

}

```

这个方案可以大大提高用户体验，特别是在服务器响应缓慢的情况下。遮罩层不仅可以阻止用户的重复提交操作，还可以显示一个加载动画，告诉用户表单正在处理中，从而避免用户的焦虑情绪。希望这个方案能对你有所帮助！