表单数据是否被修改检测
记录生活，每天一点点
原因：
博主工作上一需求，是检查表单是否被修改。如果确定被修改了 才做某些操作。项目呢是一个有些年历史的老项目了，基本上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
