使用控制台$0修改禁用的表单项和按钮点击

.box{width:100%;高度：100%；框大小：边框框；填充：36px;}问题描述在我们的开发中，对于表单来说，经常会有查看表单的操作。有时为了省事，我们直接给表单的el-input或el-radio或el-select和el-button加一个disabled属性。这种情况下无法进行编辑操作，也无法点击保存。但这样做并不安全。按钮最好不要渲染，按钮点击回调函数最好加上js逻辑检查控件。我们先来看样图。假设我们有这样一个只能查看不能修改的表单。这里虽然有按钮，但是是禁用的，不能点击。看似安全，实则不然！但是接下来，我们使用浏览器自带的$0来修改禁用的表单和按钮。什么是0？$0是当前在浏览器开发者工具中选择的元素。Step1，我们F12打开开发者工具Step2，我们在元素面板中随机选择一个元素，查看元素末尾的$0。第三步，我们在Console控制台中输入这个$0，回车得到dom元素。能拿到dom元素，自然就可以修改dom元素了。通过以上案例，我们发现$0确实是：浏览器开发者工具当前选中的元素。另外还有$1、$2、$3、$4，分别代表之前选中的元素。不过一般用的比较少。我不会在这里详细介绍如何更改禁用的表单项和按钮。我们从上图可以看出，原始数据值为：姓名：孙悟空，性别：男，籍贯：花果山水帘洞。我们将其修改为：姓名：骨精，性别：女，家乡：白虎岭白骨洞故乡是一个下拉框，改一下，选择另一个下拉框即可。我们还是用$0来操作dom，只是把它的disabled属性改成false就可以了。然后它被禁用，你可以输入并填写值。把disabled输入框改成review元素，在输入框里找到$0把disabled属性改成false也可以$0.value='BoneEssence'但是这样，页面的数据会发生变化，但是会单击保存按钮时不会改变，它仍然是原始数据。可以通过js框架开发工具查看。更改禁用的单选框和下拉框的原因，需要在输入框中手动更改后才会生效，这里不再赘述。留给读者自己用$0试试吧...改变禁用按钮上面我们用$0改变了输入框的值，单选框的值，下拉框的值.最后我们将disabled按钮禁用掉，这样就可以点击保存进入界面，这样就修改了不能修改的数据。哈哈。看下图：通过一波$0操作，发现表单数据已经被我们修改了，按钮也可以点击了。这对数据安全造成了一定的风险！那么该怎么办？所以建议：1.保存按钮要么渲染要么不渲染。最好不要禁用它。2.如果在某些特定场景下，必须渲染保存按钮，必须使用disabled属性，那么在保存按钮点击的回调中，添加符合业务场景的js验证逻辑3.最好这样做后端是符合业务场景的逻辑控制，只有符合相应的业务场景才将数据写入数据库。4.增加操作日志功能。能够掌握源头，保证可以通过日志找出问题数据是谁做的，或者进行精细化排查5.本文，测试同学不要看到，否则...$0操作，在some可以在网页上起到很好的效果。大家可以多试试^_^代码附上这段代码也可以，不过为了大家方便，还是用$0来调试吧。还是附上吧。反正dom怎么玩，$0怎么玩一样.box{width:100%;高度：100%；框大小：边框框；填充：36px;}