提交表单 md5加密密码 表单优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://blog-static.cnblogs.com/files/7qin/md5.js" ></script>
</head>
<body>
<!--
表单提交事件
onsubmi= 绑定一个提交检测的函数，true false
将这个结果返回给表单，使用onsubmit提交！
使用onsubmit提交可以再JavaScript中使用函数过滤表单内容
-->
<form method="post" onsubmit="return aaa()">
<p>
<span>用户名： </span><input type="text" id="username" name="username">
</p>
<p>
<span>密码： </span><input type="password" id="input-password">
</p>
<input type="hidden" id="password" name="password"> <!--这里我们使用了隐藏域提交，上面额input-password仅仅是提供用户输入-->
<!--绑定事件 onclick 被点击-->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
var uname = document.getElementById('username');
var input_pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('password');
console.log(uname.value);
//MD5算法
md5pwd.value = hex_md5(input_pwd.value);
console.log(pwd.value);
//可以接受判断表单内容
return true;
}
</script>
</body>
</html>
以上代码可以看出，在提交表单时我们不使用来提交表单数据，而在form标签中使用onsubmit属性来提交表单，这样我们就可以再表单提交时通过绑定一个函数来过滤表单内容，并且我们对表单进行了隐藏域的优化，使用户输入的密码框只承担传递值的作用，我们在提交表单时时使用隐藏域提交的，这既提高了网站的安全性，同时也在表单提交时防止密码框中内容的瞬间变长，避免导致网站实现细节的暴露。