表单提交验证及前端密码MD5加密

 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>