如何在表单必填文本框为空点击提交时触发Sweet Alert错误弹窗

没问题！这事儿超简单，咱们一步步来把原生JS提示换成SweetAlert的漂亮弹窗：

1. 先引入SweetAlert资源 #

首先得确保页面里加载了SweetAlert的脚本和样式，你可以下载官方文件后，在页面中引入本地资源：

<!-- 引入SweetAlert2的本地CSS文件 -->
<link rel="stylesheet" href="你的文件路径/sweetalert2.min.css">
<!-- 引入SweetAlert2的本地JS文件 -->
<script src="你的文件路径/sweetalert2.all.min.js"></script>

2. 编写表单HTML结构 #

咱们先写出包含必填文本框和提交按钮的表单：

<form id="myForm">
  <label for="requiredInput">必填字段：</label>
  <input type="text" id="requiredInput" name="requiredInput">
  <button type="submit">提交表单</button>
</form>

3. 编写验证逻辑 #

接下来写JavaScript代码，监听表单的提交事件，检查文本框是否为空，为空就弹出SweetAlert的危险提示：

// 获取表单和文本框元素
const form = document.getElementById('myForm');
const requiredInput = document.getElementById('requiredInput');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 先阻止表单默认提交行为
  e.preventDefault();
  
  // 检查文本框是否为空（trim()去掉前后空格，避免用户只输入空格）
  if (!requiredInput.value.trim()) {
    // 弹出SweetAlert危险提示
    Swal.fire({
      icon: 'error',
      title: '必填项为空',
      html: '<strong>%This TextBox Is Required%</strong>', // 支持HTML标签显示加粗文本
      confirmButtonText: '知道了'
    });
    return; // 终止后续流程，不提交表单
  }
  
  // 如果验证通过，再正常提交表单
  form.submit();
});

关键细节说明 #

• 用trim()是为了避免用户只输入空格就提交，确保文本框确实有有效内容
• 通过html选项传入带<strong>标签的文本，能让SweetAlert解析并显示加粗样式
• 这里用的是目前主流的SweetAlert2版本，样式和交互都比旧版更美观实用

这样一来，当用户没填必填文本框就点提交时，就会弹出一个样式精致的危险弹窗，完美替代原生的JS提示啦！

内容的提问来源于stack exchange，提问作者John_Cartor