表单数据是否被修改检测
程序员文章站
2022-07-09 18:32:57
记录生活，每天一点点 原因： 博主工作上一需求，是检查表单是否被修改。如果确定被修改了 才做某些操作。项目呢是一个有些年历史的老项目了，基本上JQ在操作DOM，考虑到如果更换react或者angularjs 想想还是算了吧 换了事情更多了。就自己写了一勉强能满足当前业务需要的一小段JS。没有什么技术 ......
记录生活，每天一点点
原因：
博主工作上一需求，是检查表单是否被修改。如果确定被修改了 才做某些操作。项目呢是一个有些年历史的老项目了，基本上JQ在操作DOM，考虑到如果更换react或者angularjs 想想还是算了吧 换了事情更多了。就自己写了一勉强能满足当前业务需要的一小段JS。没有什么技术含量，只能满足比较局限的应用场景。好了 不多说 直接贴代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <style type="text/css">
5 input{
6 border: 1px solid #e1e1e8;
7 margin-top:5px;
8 margin-left:5px;
9 }
10 #check{
11 margin-top:5px;
12 margin-left:5px;
13 width:30px;
14 z-index: 10;
15 display: block;
16 padding: 5px 8px;
17 font-size: 12px;
18 color: #767676;
19 cursor: pointer;
20 background-color: #fff;
21 border: 1px solid #e1e1e8;
22 border-radius: 0 4px 0 4px;}
23 #tip{
24 color:#FBB6A7;
25 margin-top:5px;
26 margin-left:5px;
27 height:28px;
28 width:150px;
29 display: block;
30 padding: 5px 8px;
31 font-size: 12px;
32 color: #767676;
33 cursor: pointer;
34 background-color: #fff;
35 border: 1px solid #e1e1e8;
36 border-radius: 0 4px 0 4px;
37 }
38 </style>
39 </head>
40
41 <body>
42 <form id="form">
43 <label>input1:</label><input type="text" value="input1" name = "input1"/><br/>
44 <label>input2:</label><input type="text" value="input2" name = "input2"/><br/>
45 <label>input3:</label><input type="text" value="input3" name = "input3"/><br/>
46 <label>input4:</label><input type="text" value="input4" name = "input4"/><br/>
47 <label>input5:</label><input type="text" value="input5" name = "input5"/><br/>
48 <label>input6:</label><input type="text" value="input6" name = "input6"/><br/>
49 <label>input7:</label><input type="text" value="input7" name = "input7"/><br/>
50 <label>input8:</label><input type="text" value="input8" name = "input8"/><br/>
51 <a id="check" style="">check</a><span id="tip"></span>
52 </form>
53 </body>
54 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
55 <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>
56 <script>
57 var fromData;
58 $(function(){
59 //绑定触发
60 $("#check").on("click",function(){
61 checkChange();
62 })
63 //读取原始数据MD5值
64 if(fromData==null || 'undefined' == fromData){
65 fromData = md5($("#form").serialize());
66 }
67 console.log(fromData);// 07d27f01a0a5842c12d9007d7857564a
68 })
69 //触发执行方法
70 function checkChange(){
71 var toData = md5($("#form").serialize());
72 // console.log(toData);
73 if (toData == fromData) {
74 _showTip(null,"no change to submit");
75 } else {
76 _showTip(null,"submiting");
77 }
78 }
79 //提示
80 function _showTip(ele,showContent){
81 ele = ele || $("#tip");
82 ele.text(showContent);
83 }
84 </script>
85 </html>
思路解释：其实就是很简单的两个数值之间的比对。因为没有涉及虚拟DOM 我们直接采用JQ操作
1.页面加载完成之后 把表单内的值序列化成为字符串并且取MD5值保存到内存中
2.我这里是用点击事件触发的，其实也可以用其他的失去焦点或者得到焦点来做 而且可以把粒度控制在字段级。 不多说：触发后再拿修改之后的值和之前的值做比较 然后就直接操作了
对了：这里说下JavaScript cdn的事情，我这里jquery是用的度娘的cdn ,md5是用的bootsdn
上一篇： 用javascript实现简易留言板
下一篇： 测试GeoGebra的使用