求助：SweetAlert(t4t5)调用showValidationError出现Promise类型错误

看起来你遇到的问题是因为混用了旧版SweetAlert的API和SweetAlert2（t4t5维护的版本）的用法，导致swal.showValidationError不存在，同时Promise处理也有疏漏。我来帮你一步步修正：

核心问题分析 #

1. API不兼容：swal.showValidationError是旧版SweetAlert的方法，SweetAlert2已经弃用了这种验证错误展示方式。
2. 参数过时：你用到的buttons数组、closeOnConfirm都是旧版配置项，SweetAlert2有对应的新参数规范。
3. Promise处理不当：preConfirm需要返回一个Promise（尤其是异步操作比如axios请求），否则会触发未捕获的Promise错误。

修正后的代码示例 #

swal({
  text: 'Not visited',
  // 替换原content配置，使用SweetAlert2标准的input参数
  input: 'text',
  inputPlaceholder: 'State reason',
  icon: 'info',
  // 替换buttons数组为明确的按钮文本参数
  cancelButtonText: '@lang('global.app.cancel')',
  confirmButtonText: '@lang('global.app.ok')',
  // 替代closeOnConfirm，防止用户点击外部关闭弹窗
  allowOutsideClick: false,
  animation: 'slide-from-top',
  preConfirm: (inputValue) => {
    // 修正验证逻辑：判断输入是否为空（去除首尾空格）
    if (!inputValue.trim()) {
      // SweetAlert2中直接抛出错误，会自动展示为弹窗内的验证提示
      throw new Error('Please enter a reason for not visiting');
    }

    // 发送axios请求，必须返回这个Promise，否则会触发Promise错误
    return axios.post('setstatus', {
      order_id: $(this).attr('data-id'),
      // 补充你需要传递的其他参数
    }).catch(error => {
      // 请求失败时抛出错误，让SweetAlert2自动展示错误信息
      throw new Error(error.response?.data?.message || 'Failed to update order status');
    });
  }
}).then((result) => {
  // 确认成功后的后续操作
  if (result.isConfirmed) {
    swal('Success!', 'Order status has been updated', 'success');
    // 这里可以添加刷新页面、更新DOM等逻辑
  }
});

关键修改点说明 #

• 验证错误展示：不再调用swal.showValidationError，而是在preConfirm中直接throw new Error('错误信息')，SweetAlert2会自动将其显示为弹窗内的验证提示。
• 配置参数更新：
  • 用input和inputPlaceholder替代原来的content.element配置，更符合SweetAlert2的API规范。
  • 用confirmButtonText和cancelButtonText替代buttons数组，配置逻辑更清晰。
  • 用allowOutsideClick: false替代closeOnConfirm，确保用户必须完成操作才能关闭弹窗。
• Promise处理：preConfirm必须返回一个Promise（axios请求本身就是Promise），这样SweetAlert2才能正确处理异步流程，避免出现未捕获的Promise错误。
• 逻辑修正：原代码中的if (!inputValue === '')逻辑有误，改为if (!inputValue.trim())可以准确判断输入是否为空（包括全空格的无效输入）。

内容的提问来源于stack exchange，提问作者C. Gellings