表单密码加密,提升网站安全性
- 问题
直接设置pwd.value=md5(pwd.value);
会造成密码回显,用户体验不行 - 解决方案
直接添加个hidden标签,设置mpwd.value=md5(pwd.value);
,提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- <script>
var d1 = document.getElementById('d1');
var father = document.getElementById('father');
</script> -->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<div>
<form action="" onsubmit="return check()">
<div><span>用户名:</span>
<input type="text" name="name" id="name">
</div>
<div>
<span>密码:</span>
<!-- 不设置密码框的name,提交表单拿到hidden中加密的数据 -->
<input type="password" id="pwd">
<input type="hidden" name="pwd" id="md5-pwd">
</div>
<div>
<input type="submit"></input>
</div>
</form>
</div>
<script>
function check(){
var pwd=document.getElementById('pwd');
var mpwd=document.getElementById('md5-pwd');
mpwd.value=md5(pwd.value);
return true;
}
</script>
</body>
</html>