1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 8 </head> 9 <body> 14 <form action="#" method="post" > 15 <p> 16 17 <span>用戶名:</span><input type="text" id="username" name="username"> 18 </p> 19 <!-- type="password" 輸入的內容看不到 --> 20 <p> 21 <span>密碼:</span><input type="password" id="password" name="password"> 22 </p> 23 <!--綁定事件 onclick 被點擊 --> 24 <button type="submit" onclick="aaa()">提交</button> 25 </form> 26 27 <script> 28 function aaa() { 29 var uname = document.getElementById("username"); 30 var pwd = document.getElementById("password"); 31 console.log(uname.value); 32 // console.log(pwd.value); 33 // 上面這種方法直接把密碼暴露出來了，怎樣可以進行加密 34 // MD5算法 35 pwd.value = md5(pwd); 36 console.log(pwd.value); 37 38 } 39 </script> 40 41 42 </body> 43 </html>
加強版：建議工作中使用這個版本
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- MD5工具類--> 7 <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> 8 </head> 9 <body> 10 <!--表單綁定提交事件 11 onsubmit= 綁定一個提交檢測的函數，true false 12 將這個結果返回給表單 使用onsubmit接收 13 --> 14 <form action="www.baidu.com" method="post" onsubmit=" return aaa()"> 15 <p> 16 17 <span>用戶名:</span><input type="text" id="username" name="username"> 18 </p> 19 <!-- type="password" 輸入的內容看不到 --> 20 <p> 21 <span>密碼:</span><input type="password" id="input_password" > 22 </p> 23 <input type="hidden" id="md5_password" name="password"> 24 <!--綁定事件 onclick 被點擊 --> 25 <button type="submit" onclick="aaa()">提交</button> 26 </form> 27 28 <script> 29 function aaa() { 30 var uname = document.getElementById("username"); 31 var pwd = document.getElementById("input_password"); 32 var md5pwd = document.getElementById("md5_password"); 33 md5pwd.value = md5(pwd.value); 34 35 // 可以校驗表單內容，true就是通過提交，false就是阻止提交 36 return true; 37 38 } 39 </script> 40 41 42 </body>