解决页面内两个表单之间数据相互影响问题

最新推荐文章于 2023-08-08 17:44:36 发布
最新推荐文章于 2023-08-08 17:44:36 发布
阅读量6k 收藏 1
点赞数
文章标签： 表单 数据影响 两个 拷贝 stringify
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangxhblog/article/details/81145321
版权

  • 需求：页面先展示不可编辑状态的表单信息，点击编辑按钮，表单信息变为可编辑状态，编辑的内容时，和不可编辑状态的表单之间相互不影响。

  • 解决办法：使用stringify和parse的方法。

  • 问题本质：对象是通过地址指向来获得引用的，所以单纯的用一个新对象指向源对象就是浅拷贝。所以如果使用简单的赋值语句处理后台传过来的值时，两个表单绑定的还是同一个对象，所以相互会有影响。 JSON.stringify()将对象序列化为JSON字符串。JSON.parse()：将JSON数据解析为js原生值。

liangxhblog
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant design pro 一个页面两个表单，提交会相互影响，需将表单写为自定义组件
你好！刘斩仙
01-24 1万+
描述：在页面（组件）中，只能有一个@Form.create()，意味着this.props.form唯一，如果一个页面有两个表单，提交其中一个，另一个也会提交，然而你只想提交一个。 解决方法： 1.如果表单多且复杂，请单独自定义一个页面（组件），我这是偷懒直接在页面自定义一个Search 组件（不推荐） 不完整代码（不必要的我删了）： import React, { PureComponent, ...
解决两个表单切换 表单验证发生冲突的问题
Zhoulizhen_的博客
09-02 1247
转载至：https://blog.csdn.net/liangxhblog/article/details/81144860
两个form之间传递数据
weixin_34343689的博客
05-10 210
PassingDataBetweenForms FormData.dpr --------------------------------------------------------- program FormData;uses Forms, IWMain, ServerController in 'ServerController.pas' {IWServer...
使用antd Modal组件时数据污染问题解决方案
x先生的博客
03-12 7021
问题再现： 现在有新增和编辑两个弹窗需求。由于内容一致，所以使用一个Modal组件即可。 问题随之而来。 点击编辑，Modal弹出并呈现出数据，编辑后点保存或关闭，再打开新增，弹窗内还是刚才的数据，即使在新增窗口打开前置空state也无效。头疼。。。。。 解决方案1： 设置Modal 的key属性，使其每次打开都是新的窗口。（貌似用处不大） modalKey: Date.par...
阿里巴巴集团统一表单解决方案——支持React/Vue2/Vue3
06-08
两个范式可以相互转换。 :sports_medal: 副作用是独立管理的，使表单数据链接比以往任何时候都容易。 :burrito: 覆盖最复杂的表单布局用例。 网站 2.0 https://v2.formilyjs.org 1.0 https://formilyjs.org 社区 ...
JavaWeb表单注册界面的实现方法
08-29
3. 在使用JavaWeb的经典架构Servlet—Service—Dao时，需要注意每个层次的职责和相互调用关系。 JavaWeb表单注册界面的实现方法需要考虑多个方面，包括页面实现、表单校验、提交注册等，并需要使用多种技术架构和...
JQuery笔记(表单验证).
03-01
JQuery 是一个流行的JavaScript库，它极大地简化了网页的交互和动态化操作。在Web开发中，表单验证是必不可少的一环，确保用户输入的数据符合预期格式和规则。`jQuery Validate` 插件就是用于此类任务的一个强大工具...
形式：阿里巴巴集团统一表格解决方案
02-05
为了解决此问题，我们已经对每个表单域的状态进行了管理，从而显着提高了表单操作的性能。 同时，我们深入集成了JSON Schema协议，以帮助您快速解决后端驱动的表单呈现问题。产品特点 :rocket: 高性能，字段是独立...
javascript和C#相互调用.docx
06-09
在IT领域，JavaScript和C#是两种广泛应用的编程语言，分别在前端和后端发挥着重要作用。在某些场景下，如Web开发，它们需要进行交互以实现复杂的业务逻辑。本文将详细介绍JavaScript调用C#以及C#调用JavaScript的...
ant.d中一个页面中两个表单
weixin_43443341的博客
02-25 3870
首次使用antd介绍Form--校验Form--Radio 介绍 从零开始搭建react项目，结合antd库进行开发，在还未了解其原理的情况下只照着官网的案例进行开发，难免会遇到很多问题，下面对遇到的问题做个总结，希望后期能深入对react和antd原理的理解和熟练，不再依赖各种百度寻找答案。 Form–校验 import React, { Component } from 'react' imp...
antd多个表单元素相互验证
JudyC的博客
12-03 4156
遇到表单相互验证的地方比较少, 一般就是密码, 二次输入密码. 这种验证是以第二个表单元素为主, 提示错误也只在第二个表单下提示. 那么有两个及以上的表单元素需要相互验证并且都有自己的判断条件及提示信息该怎么做呢? 场景: 最大值: 需大于最小值和中间值 最小值: 需小于最大值和中间值 中间值: 需介于最小值最大值之间 代码: 1.render中表单元素 <FormItem label="最...
React 项目中使用AntDesign框架时处理同一个页面使用多个Form表单的问题
热门推荐
前端小小白的爬坑之路
04-01 2万+
React 项目中同一个页面使用多个Form表单，如果直接在Render中使用多个Forn，在提交某一个表单时会同时触发其他表单的提交事件，因此可以使用函数式的方法return出Form组件，然后再Render中引用，从而使页面上的Form相互独立 代码如下： import React, { Component } from 'react'; import { Form, Button,...
el-form多个表单共用一个ref，引发的校验问题及解决方案
最新发布
qq_36761520的博客
08-08 828
代码当中有多个tab，会循环渲染多个Form（底层是用elment-plus的Form二次封装的），多个Form共用一个ref，这样导致的问题是tab切换时，上一个tab的表单项还会校验，需求是只校验当前tab的表单项。
Vue——表单修改数据相互影响深拷贝处理
每天一个前端小知识~
01-07 2057
问题 Vue父子组件传递数据的时候，浅拷贝会出现修改数据相互影响的情况。比如修改失败，前端的页面表单的数据还是改变了 解决方案 使用深拷贝代替浅拷贝 this.addForm = JSON.parse(JSON.stringify(memberInfo)) 因为增加和修改共用一个表单，所以每次打开表单时增加要给表单赋空值 效果图 会员名是不可以修改的，disabled 会员组件页代码 <template> <div> <!-- 面包屑导航区域 -->
（vue+element）解决两个表单通过if判断切换 表单验证发生冲突的问题
weixin_39277183的博客
07-29 2199
（vue+element）解决两个表单通过if判断切换 表单验证发生冲突的问题 需求：根据不同的类型进行form切换，以及要实现表单校验 失败尝试：再每个不一样的form里每个子元素加了key不行（错误示范） 可能造成的原因：即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能.
vue中使用UI框架，表格的数据和修改操作的表单之间相互影响如何解决
lanseguhui的博客
03-06 2958
在管理系统中我们经常会遇到需要会表格中某一行数据进行修改，在点击修改操作时，一般我们会将这行表格的数据直接赋值给表单，进行操作，当我们对表单的内容进行修改时，对应的表格中数据也会被修改，尽管这个时候我们还没有点击确定按钮。在没有点击确定之前表格中的内容是不应该改变的。 这是因为我们赋值给表单的数据来自表格行的数据，他们对应的是同一块内存地址，所以在修改表单时，表格的数据也会发生变化。 我们...
关于 form表单 嵌套问题的解决方案
weixin_30855761的博客
04-25 728
我们经常是这样嵌套的： 1 <form id="formId1" action="" method="post"> //表单1 2 <form id="formId2" action="" method="get"> //表单2 3 <input id="but1" type="button" value="提交"> 4 ...
做一个用户注册和登录的页面的代码，注册和登录可以相互切换
04-07
以下是一个简单的用户注册和登录页面的代码，使用了HTML、CSS和JavaScript： ```html <!DOCTYPE html> <html> <head> <title>User Registration and Login</title> <style> .container { display: flex; flex-direction: column; align-items: center; } form { display: flex; flex-direction: column; align-items: center; border: 1px solid #ccc; padding: 10px; width: 300px; margin-top: 20px; } input[type=text], input[type=password] { width: 100%; padding: 10px; margin: 5px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } .switch { display: block; text-align: center; margin-top: 10px; color: #999; font-size: 12px; cursor: pointer; } .switch:hover { color: #666; } </style> </head> <body> <div class="container"> <h1>User Registration and Login</h1> <form id="register-form"> <h2>Registration</h2> <label for="username">Username</label> <input type="text" id="username" name="username" required> <label for="password">Password</label> <input type="password" id="password" name="password" required> <button type="submit">Register</button> </form> <form id="login-form" style="display:none"> <h2>Login</h2> <label for="login-username">Username</label> <input type="text" id="login-username" name="username" required> <label for="login-password">Password</label> <input type="password" id="login-password" name="password" required> <button type="submit">Login</button> </form> <div class="switch" onclick="toggleForm()">Switch to Login</div> </div> <script> function toggleForm() { var registerForm = document.getElementById("register-form"); var loginForm = document.getElementById("login-form"); var switchText = document.querySelector(".switch"); if (registerForm.style.display === "none") { registerForm.style.display = "block"; loginForm.style.display = "none"; switchText.textContent = "Switch to Login" } else { registerForm.style.display = "none"; loginForm.style.display = "block"; switchText.textContent = "Switch to Registration" } } document.getElementById("register-form").addEventListener("submit", function(event) { event.preventDefault(); var username = document.getElementById("username").value; var password = document.getElementById("password").value; console.log("Registration successful with username: " + username + " and password: " + password); this.reset(); }); document.getElementById("login-form").addEventListener("submit", function(event) { event.preventDefault(); var username = document.getElementById("login-username").value; var password = document.getElementById("login-password").value; console.log("Login successful with username: " + username + " and password: " + password); this.reset(); }); </script> </body> </html> ``` 这个代码包含了两个表单，一个用于用户注册，一个用于用户登录。在页面上方，有一个切换按钮可以在注册和登录之间切换。切换按钮使用JavaScript编写了一个事件监听器，根据当前显示的表单来切换。 在表单提交时，JavaScript也编写了事件监听器。当用户在注册表单中提交时，JavaScript会获取用户名和密码，将其打印到控制台，并重置表单。当用户在登录表单中提交时，JavaScript也会获取用户名和密码，将其打印到控制台，并重置表单。 需要注意的是，这个代码仅为演示用途，未进行任何安全性检查和验证。在实际应用中，需要对用户输入进行验证和加密，以确保用户数据的安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值