記錄生活，每天一點點
原因：
博主工作上一需求，是檢查表單是否被修改。如果確定被修改了 才做某些操作。項目呢是一個有些年歷史的老項目了，基本上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