如何使用jQuery实现表单恶意输入拦截：禁用按钮并清空输入

我来帮你搞定这个表单功能，核心就是实时监控输入内容，一旦检测到恶意词汇就限制提交并清空输入。下面是完整的实现代码和细节说明：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>恶意词汇检测表单</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(function() {
            // 定义需要检测的恶意词汇列表
            const badWords = ['垃圾', '骗子', '脏话'];
            
            // 监听输入框的输入事件（覆盖键盘输入、粘贴等所有输入场景）
            $("#txt").on('input', function() {
                const inputVal = $(this).val().trim();
                const submitBtn = $("#btn");
                
                // 检查输入内容是否包含恶意词汇
                const hasBadWord = badWords.some(word => inputVal.includes(word));
                
                if (hasBadWord) {
                    // 检测到恶意词汇：禁用按钮，清空输入框
                    submitBtn.attr('disabled', true);
                    $(this).val('');
                    // 可选：添加提示告知用户
                    // alert('请输入合规内容！');
                } else if (inputVal) {
                    // 输入合规且有内容：启用按钮
                    submitBtn.removeAttr('disabled');
                } else {
                    // 输入为空：保持按钮禁用
                    submitBtn.attr('disabled', true);
                }
            });
            
            // 额外防护：表单提交时再做一次检测，防止前端被绕过
            $("#form").submit(function(e) {
                const inputVal = $("#txt").val().trim();
                const hasBadWord = badWords.some(word => inputVal.includes(word));
                if (hasBadWord) {
                    e.preventDefault();
                    $("#txt").val('');
                    alert('请输入合规内容！');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form">
        <input type="text" id="txt" placeholder="请输入内容...">
        <button type="submit" id="btn" disabled>提交</button>
    </form>
</body>
</html>

关键细节说明 #

• 事件选择：用input事件代替keyup，能覆盖鼠标粘贴、输入法联想等所有输入场景，不会漏掉任何检测时机。
• 恶意词汇检测：用Array.some()方法快速判断输入内容是否包含任意一个恶意词汇，写法简洁且高效。
• 按钮状态逻辑：默认按钮处于禁用状态，只有输入合规且不为空时才启用；一旦检测到恶意词汇，立刻禁用按钮并清空输入内容。
• 安全提示：前端验证只是用户体验层面的辅助，一定要在后端也做同样的恶意词汇检测，避免恶意内容绕过前端提交到服务器。

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