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

提交表单，md5加密密码，表单优化

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    MD5工具类-->
 7     <script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
 8 
 9 <!--  表单绑定提交事件  onsubmit=绑定一个提交检测的函数
10     将这个结果返回表单，使用onsubmit接收
11 -->
12 </head>
13 <body>
14 
15 <form action="https://www.baidu.com/" method="post" onsubmit="return aa()">
16     <p>
17         <span>用户名</span><input type="text" id="username" name="username" required placeholder="请填写用户名">
18 
19     </p>
20 <!--    多选框的值，就是定义好的value值-->
21     <p>
22         <span>密码</span><input type="password"  id="input-password">
23 
24     </p>
25     <input type="hidden" id="md5-password" name="password">
26 <!--    绑定事件  onclick被点击事件-->
27     <button type="submit">提交</button>
28 <!--    <button type="submit" onclick="aa()">提交</button>-->
29 <!--    <input type="submit">-->
30 </form>
31 <script>
32     function aa() {
33         // alert(1);
34         var uname = document.getElementById('username');
35         var pwd = document.getElementById('input-password');
36         var md5pwd = document.getElementById('md5-password');
37         md5pwd.value = md5(pwd.value);
38         // console.log(uname.value);
39         // console.log(pwd.value);
40 
41         //MD5算法
42         // pwd.value = md5(pwd.value);
43         // console.log(pwd.value);
44         // pwd.value='****';
45         //可以校验判断表单内容，true通过提交 false阻止提交
46         return true;
47     }
48 </script>
49 </body>
50 </html>