如何在用户未输入内容点击继续时用SweetAlert2抛出错误

要实现输入框必填校验，用户未输入内容点击确认时弹窗显示错误提示，我们可以利用SweetAlert2内置的inputValidator配置项来完成，同时优化原代码中的逻辑问题，以下是修改后的完整代码：

<!DOCTYPE html>    
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.1/dist/sweetalert2.min.css" rel="stylesheet" />
    <!-- 先加载SweetAlert2脚本，确保Swal对象可用 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.1/dist/sweetalert2.all.min.js"></script> 
</head>
<body onload="check()">
    <script>
        // 初始化管理员名称数组
        let adminName = JSON.parse(localStorage.getItem("adminDetails")) || [];
        
        // 定义check函数
        function check() {
            // 仅当localStorage中无adminDetails时才弹窗
            if (!localStorage.adminDetails) {
                Swal.fire({
                    title: 'What\'s Your Name',
                    input: "text",
                    allowOutsideClick: false,
                    inputAttributes: {
                        autocapitalize: "on",
                        placeholder: '请输入您的姓名'
                    },
                    showCancelButton: false,
                    confirmButtonText: "Save changes",
                    // 输入验证逻辑
                    inputValidator: (value) => {
                        if (!value.trim()) {
                            return '请输入您的姓名，不能为空！';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // 显示成功提示
                        Swal.fire("Good job!", `Welcome ${result.value}`, "success");
                        
                        // 存储管理员信息到localStorage
                        const theAdminName = {
                            adminFName: result.value.trim()
                        };
                        adminName.push(theAdminName);
                        localStorage.setItem("adminDetails", JSON.stringify(adminName));
                        // 设置当前管理员索引为最后一个
                        localStorage.setItem("currentAdminIndex", adminName.length - 1);
                    }
                });
            }
        }
    </script>
</body>
</html>

关键修改说明 #

• 输入验证：通过inputValidator回调函数实现必填校验，用户输入为空或全空格时，返回错误提示文本，弹窗会自动显示错误并阻止关闭，直到用户输入有效内容。
• 脚本顺序调整：将SweetAlert2的脚本移到自定义脚本之前，避免调用Swal.fire时出现未定义错误。
• localStorage逻辑优化：简化了数组初始化逻辑，直接用JSON.parse(...) || []处理空值；存储管理员索引时直接取数组长度减一，替代原冗余的map遍历。
• 输入处理：对用户输入做了trim()处理，避免存储空字符串或全空格的无效内容。

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