.NET6环境下添加表单验证后_alert提示失效的问题求助

环境 #

.NET6

初始正常代码 #

最初的按钮点击事件中，_alert可以正常工作：

function UpdateButton_onClick(srcElement) {
    _alert('ConfirmUpdate');
}

新增的验证函数 #

为确保用户输入符合规则，添加了以下验证函数：

function Valid() {
    var result = false;
    var NM = $('#NM').val();
    var regExp = /^[\d|a-zA-Z|\-.]+$/;
    
    if (regExp.test(NM)) {
        result = true;  
    } else {
        result = false; 
    }
    
    if (result == false) {
        _AddJsErrMessage(//resource name//);
        return false;
    } 
     else {
            return true;
    }
}

修改后的问题代码 #

修改按钮点击事件加入验证逻辑后，_alert('ConfirmUpdate')无法正常触发：

function UpdateButton_onClick() {
    AddAttrRequired();  // 必填字段验证前置处理
    var Result = _FormValidation(); 
    
    if (Result) {
        if (Valid()) {            
            $.blockUI({ message: '' });            
            $('#ExecAction').val(_ActionTypeUpdate);
            _alert('ConfirmUpdate'); // 无法正常工作
            _formElement.submit();
            return true;
        } else {           
            _ShowJsErrMessageBox();
            return false;
        }
    } else {
        return false;
    }  
}

解决方案 #

核心原因 #

表单提交语句_formElement.submit()会立即触发页面跳转或刷新，导致_alert弹窗还没来得及渲染显示就被中断；另外$.blockUI的遮罩可能会覆盖弹窗，造成“无法工作”的视觉假象。

具体修复方式 #

1. 弹窗确认后再提交表单
   如果_alert是支持回调的自定义确认弹窗，调整代码顺序，在用户确认后再执行提交：

   if (Valid()) {            
       $('#ExecAction').val(_ActionTypeUpdate);
       // 把表单提交放在_alert的确认回调里
       _alert('ConfirmUpdate', function() {
           $.blockUI({ message: '' });
           _formElement.submit();
       });
       return true;
   }
   

2. 调整遮罩与弹窗的执行顺序
   如果_alert是同步弹窗（比如原生confirm的封装），先触发弹窗，确认后再启用遮罩并提交：

   if (Valid()) {            
       $('#ExecAction').val(_ActionTypeUpdate);
       // 先弹出确认框，用户确认后再处理遮罩和提交
       if (_alert('ConfirmUpdate')) {
           $.blockUI({ message: '' });
           _formElement.submit();
       }
       return true;
   }
   

3. 检查_alert函数的实现
   确认_alert是否存在异步渲染逻辑，或者DOM层级问题导致弹窗被遮挡。可以临时注释$.blockUI代码，测试弹窗是否能正常显示，以此排除遮罩干扰。

内容的提问来源于stack exchange，提问作者鍾佩妤