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>