直接上代码
1.HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript使用md5验证登录加密</title>
<!--引入md5加密库-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="Check.js"></script>
</head>
<body>
<!--
表单级提交绑定事件
onsubmit = 绑定一个提交检测的函数,return true||false
将这个结果再 return 给表单,使用onsubmit接收
-->
<form action="https://www.baidu.com/" method="post" οnsubmit="return CheckForm()">
<!--这里一定是return CheckForm() 不能缺少return否则无法拦截 -->
<p>
<span>用户名:</span><input type="text" id="#user" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="#pwd" name="password">
<!--可将name="password "置空，然后将md5加密后的md5password改成password迷惑-->
</p>
<input type="hidden" id="#md5pwd" name="md5password"><!-- md5隐藏加密文本框-->
<!--
绑定事件 onclick 被点击
代替表单的on submit<button type="submit" οnclick="CheckForm()">登录</button>
按钮级绑定，但无法拦截，用哪个级别，哪里调用check form函数
-->
<button type="submit" >登录</button>
</form>
</body>
</html>
2.JS部分
'use strict';
function CheckForm() {
var user=document.getElementById('#user');//用户名表单节点
var pwd=document.getElementById('#pwd');//密码表单节点
var md5pwd=document.getElementById('#md5pwd');//md5加密节点
//此处校验表单内容是否符合
if(pwd.value.length<6){//简单验证,密码长度少于6位
alert("密码格式错误,请重新输入");
return false;
}else {
md5pwd.value= md5(pwd.value);//结果返回32位小写的十六进制值的加密字符串
return true;
}
}
3.操作流程
1.输入用户名，密码格式不正确(不满6位)未通过验证情况：
2.密码格式正确，t跳转百度主页
3.Network查看表单数据,可以看到原密码和md5加密后的密码
注:(network页面中的表单数据第一次输入可能看不到，返回在输入一次用户名，密码就可以在www.baidu.com那一栏header看到具体表单信息）
4.只看到用户名和md5加密后的16位：将用户输入的密码框中name="password "置空，然后将md5加密后获取的name="md5password"改成name="password"迷惑
