如何使用 jquery.dirtyforms？答案

【问题标题】：How to use jquery.dirtyforms?如何使用 jquery.dirtyforms？
【发布时间】：2026-01-20 12:00:02
【问题描述】：

我对如何使用 jquery.dirtyforms 感到困惑。

我正在尝试创建一个带有文本框和提交按钮的简单表单。如果用户在保存结果之前修改了文本框并尝试刷新页面或单击页面内的链接，Dirty Forms 插件应该提醒用户。但没有任何效果。

下面是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms({ 
        dialog: { title: 'Wait!' }, 
        message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
    });
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

这段代码有什么问题以及如何使用这个插件？

【问题讨论】：

它确实有效，但 message 和 title 属性无效。此外，如果您在 html 文件中在您的 PC 上运行它，链接 //cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js 不起作用。它还会尝试从您的电脑而不是 http/https 加载它

标签： javascript jquery jquery-dirtyforms

【解决方案1】：

如果您从dirtyforms 调用中删除标题和消息，您的代码将起作用。根据文档：

// Customize the title and message.
// Note that title is not supported by browser dialogs, so you should 
// only set it if you are using a custom dialog or dialog module.
$('form').dirtyForms({ 
    dialog: { title: 'Wait!' }, 
    message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
});

因为您正在尝试使用默认浏览器对话框，所以这些额外的属性会导致脏表单代码中断。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms();
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

【讨论】：

感谢你和我一起工作，但我用dirtyform src链接进行了简单的修改，我在cdn之前添加了http://

【解决方案2】：

虽然@Joffutt 提出了一个可行的解决方案，但他忽略了这种行为的解释。问题是您在这里设置了一个对话框模块：

dialog: { title: 'Wait!' },

这告诉脏表单不使用默认浏览器对话框并使用您的自定义对话框模块。但是，您没有完成其余的自定义对话框模块注册as per the documentation（即您没有定义打开方法），因此您的配置无效。

如果您不想要自定义对话框模块，则不应在配置中定义 dialog:。

【讨论】：