表单编辑，关闭对话框 提醒用户是否保存数据

最新推荐文章于 2023-12-07 16:26:08 发布
原创 最新推荐文章于 2023-12-07 16:26:08 发布 · 2.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #element

本文介绍如何在对话框中填写表单时，利用sessionStorage保存数据防止用户误操作导致数据丢失，同时讨论了如何正确判断用户是否修改了表单内容，以及通过before-close事件避免重复调用关闭事件。

 在对话框中填写表单，防止未提交的数据用户误操作，点击关闭造成填写的大量数据信息清空，需要重新操作一遍，因此关闭的时候对填写有数据的表单，进行提醒。

点击打开对话框的时候，将数据保存在sessionStorage，不能保存在data中定义的一个对象中，这样子修改表单的值会对开始点击打开对话框时候保存的值进行修改，从而无法判断用户是否修改了表单。

同时，el-dialog显示右上角的关闭按钮那么使用before-close防止重复调用closeDialog关闭事件

16、Android开发中的对话框、输入验证与数据存储
hill8的博客
07-21 62
本文详细介绍了Android开发中对话框的使用、输入验证的方法以及数据存储的多种方式。内容涵盖了Alert对话框和自定义对话框的创建，输入验证的常见技术（如EditText.setError()、TextWatcher等），以及包括SharedPreferences、内部存储、SQLite数据库等在内的多种数据存储方案。通过合理运用这些技术，可以提升用户体验和应用程序质量。
16、Android开发：对话框、输入验证与数据存储全解析
最新发布
7z8x2c4v6b9的博客
07-21 73
本文深入解析了Android开发中的关键主题，包括对话框的创建与使用、输入验证的常用方法、多种数据存储方式的选择与实现，以及SQLite数据库和内容提供者的具体操作。通过详细示例和流程图，帮助开发者提升应用程序的用户体验和数据管理能力。
vue实现表单未编辑或未保存离开弹窗提示功能
Haines
10-20 2996
说明 UI组件是使用Quasar Framework。 最近做一个表单弹出框，表单保存提交，但是，产品提出，用户不保存，而关闭弹出框时，要给出一个弹窗提示。这个功能，可以用watch监听表单数据。当数据表单发生变化，用户点击了关闭按钮，则根据监听结果来判断用户输入或编辑了数据，进而出现弹窗提示，让用户选择是否离开；当数据没发生变化，则不必提示。 确认离开提示框 实现效果 先实现一个确认离开提示框，效果如下： 实现代码： 1 2 3 4 5 ..
页面离开，及其表单页面的值进行修改时，提示进行保存。
sqh1232008的专栏
09-29 610
<script> // 验证当前表单的内容是否进行修改 //有2点注意 //1，表单元素都有默认值属性，比如element.defaultValue ， element.defaultChecked  ，element.options[j].defaultSelected   //2，select元素的type类型是：""select-one"或者"select-multip...
easyui tabs切换之前提醒保存修改的信息
捣蛋的博客
07-25 1026
当存在多个tabs,相互切换时提醒保存修改的信息： 这里用的鼠标mousedown事件 var tabs = $('#tabsId').tabs().tabs('tabs');     for(var item=0; item<tabs.length; item++){         tabs[item].panel('options').tab.unbind().bind('mous...
[系统操作][MS Office]Excel在无任何操作的前提下关闭文档却询问是否保存
火云的专栏
10-14 3602
起因 之前朋友写了一个EXCEL插件，希望我能够帮他解决一下里面的一个问题。此事过去几天后，无意中发现在没有进行任何操作的情况下，EXCEL对于文档进行关闭时询问是否保存。然后发现，对于一个新创建的文档，打开之后立马关闭，依然会询问是否保存。既然要求保存，那么必然是发生了修改。怕以后编辑EXCEL文档会存在错误，故打算一一进行排查。 解决过程 因为前几天安装过插件，而这台计算机有好几个月没有对EXCEL的设置进行改动了，故首先怀疑是插件的问题。打开如下界面： 在最下方的“管理”处选择“COM加载项”，然后
js设置用户当input、textarea值改变没有保存时关闭或离开页面则提醒用户保存信息(onbeforeunload)
趙小二啊
03-22 673
var dirty = false;//是否有输入的内容未保存标志，初始值为false $(document).on("change","input,textarea,select",function(){ dirty = true; }); $("#id").on("click", function() { dirty = false; }); window.onbeforeunload = function(event){ .
离开页面时检测表单元素是否被修改,提示保存的js代码
10-28
当用户在表单上进行编辑后试图离开页面时，系统会弹出一个提示，询问他们是否确认离开，这样可以防止用户错失保存修改的机会。 首先，我们需要理解JavaScript的`window.onbeforeunload`事件。这是一个在浏览器窗口...
允许在存在无效数据时关闭表格的实现方案
但问题在于：当验证失败、存在无效数据的情况下，是否应当允许用户关闭整个表格或弹窗？这一问题直接关系到系统的灵活性、容错能力以及整体用户体验。 标题“存在无效数据时允许关闭表格”所表达的核心知识点正是...
页面关闭之前 or 路由跳转 or 刷新页面时提示用户当前页面数据是否需要保存
德拉的分享
04-30 719
重载页面需求二三事
html页面关闭前提示信息,【转】表单提交及关闭当前页面并刷新数据
weixin_31720909的博客
06-03 1205
在DWZ文档中，对于DWZ框架Ajax无刷新表单提交处理流程描述如下：1. ajax表单提交给服务器2. 服务器返回一个固定格式json结构3. js会调函数根据这个json数据做相应的处理注意：DWZ框架默认的ajax表单提交都是返回json数据，告诉客户端操作是否成功，成功或失败提示信息，以及成功后的处理方式(刷新某个navTab或关闭某个navTab或na...
el-form自定义表单验证 +离开页面前判断数据是否改动并提示
EnidChann的博客
11-11 2616
实现原理: 1.判断页面是否有数据改动, 可以在watch方法中深度监听form这个对象是否有改动. (这里要注意, isDataChangeCount之所以用Number来判断变化次数, 是因为页面加载完时, form会出现一次数据变化, 因此只用true和false来判断是不准确的) 2.在beforeRouteLeave方法里进行对isDataChangeCount的判断,进而实现对应的提示和操作 一个常规的表单验证 export default { data () { // 在这里声.
在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息
m0_73310692的博客
12-07 1157
点击确定触发校验后 再次打开弹框检验信息依然存在 ele对话框有个事件closed（Dialog 关闭动画结束时的回调）加上表单的clearValidate属性 代码：
如何在模态框填写信息后未保存关闭弹出提示框
sinat_36810495的博客
07-25 615
有时我们会在填写完信息后忘记保存而直接关闭，这种状况在word等办公软件中经常出现，但是软件都会友好地提示 现在我们就在模态框中实现这种功能 <div class="modal-footer"> <button type="button" class="btn btn-default" onclick="studentMessagUnSave()" >关闭...
使用vue+elementui，当点击编辑时并没有点击提交，关闭编辑弹窗后，页面信息也随着改变但是后台数据没发生改变
weixin_45749079的博客
11-11 888
这个问题让我学到了JSON.parse()函数，这个函数的主要意思是：服务端接收的是数组的JSON数据，则JSON.parse()会将其转换为JavaScript数组，但是必须要注意的是这个方法只有在后台数据为json数据时才会生效，其他数据类型不生效。当我们在页面点击编辑后，由于v-model是数据双向绑定，当数据发生改变时页面数据发生变化，这时需要修改编辑函数：如下。点击编辑按钮时会调用弹框，还有一个单击事件函数modify(scope,row),点进去看这个函数的具体方法。
vue3复杂表单列表，根据表单内容是否改变判断是否弹出离开前保存提示（用户修改后又改回原来的数据不触发保存提示）
qq_45840993的博客
03-09 1302
vue3复杂表单列表，根据表单内容是否改变判断是否弹出离开前保存提示（用户修改后又改回原来的数据不触发保存提示）
Jeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tab
风雨断肠人——博客
02-01 7665
最近在使用Jeecg-Boot框架，在使用前端ant-design-vue-jeecg，由于编辑页面比较复杂，弹框用起来不是很顺手，便将整个编辑页面放到一个Tab中，如图： 但是在点击保存完成时想关闭本Tab比较困难，经过对代码结构研究，写了一个解决方案。 tab是在TabLayout下对RouteView中，在TabLayout组建中定义方法closeTab(key)；在closeTab...
vue项目中，多个页面做离开页面未保存的提醒（离开/关闭/刷新页面提示未保存）
梨城毒妃的博客
02-24 4332
​ 一、多个页面需要，考虑用mixins混入 src/mixins/index.js： export const beforeRouteLeave = require('./beforeRouteLeave').default src/mixins/beforeRouteLeave.js： ​export default { data() { return { oldRuleForm: {}, // 旧数据 ifNextStepFlag: false // 下一步，组件页面中，下一步的事件函数中要加上t
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值