表单提交时检测空链接并弹出alert的实现及问题排查

嘿，我来帮你排查问题并搞定这个输入检查的需求～

你的代码大概率踩了这些常见坑 #

• 没阻止表单默认提交行为：如果按钮是表单的submit类型，点击后页面会直接刷新，alert可能刚要显示就被刷新覆盖了
• 输入值判断没处理空格：用户输入全空格时，直接判断val()是否为空会失效，因为空格也算字符
• 事件绑定时机不对：如果JS代码写在页面加载完成前，DOM元素还没渲染出来，绑定事件会失败
• 选择器写错了：没正确选中链接输入框，导致获取不到值做判断

正确实现的完整代码示例 #

结合你引入的jQuery，给你写一个可直接运行的版本：

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <!-- 假设你的表单结构如下 -->
    <form id="linkSubmitForm">
        <div class="form-group">
            <label for="linkInput">请输入链接</label>
            <input type="text" class="form-control" id="linkInput" placeholder="输入链接地址">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>

    <script>
        // 等页面DOM完全加载后再执行代码
        $(document).ready(function() {
            // 绑定表单的submit事件（比绑定按钮click更可靠，能覆盖回车提交的场景）
            $('#linkSubmitForm').on('submit', function(e) {
                // 阻止表单默认提交刷新行为，这是核心关键点！
                e.preventDefault();
                
                // 获取输入框值并去除首尾空格
                const inputValue = $('#linkInput').val().trim();
                
                // 判断输入是否为空
                if (!inputValue) {
                    alert('链接输入框不能为空哦！');
                    // 让输入框自动获取焦点，提升用户体验
                    $('#linkInput').focus();
                    return false;
                }
                
                // 输入有效时的后续逻辑，比如AJAX提交或页面跳转
                alert('输入有效，即将处理！');
            });
        });
    </script>
</body>
</html>

关键代码解释 #

• $(document).ready()：确保DOM元素都渲染完成后再绑定事件，避免找不到元素的问题
• e.preventDefault()：彻底阻止表单默认的刷新提交行为，让alert能正常显示
• .trim()：过滤输入内容的首尾空格，避免用户用空字符绕过检查
• 绑定表单submit事件：覆盖所有表单提交场景，包括用户按回车提交的情况

你可以对照自己的原有代码，检查上面提到的几个错误点，应该就能快速定位问题啦～

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