表單提交驗證及前端密碼MD5加密
阿新 • • 發佈：2022-03-30
提交表單，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>