JavaScript 操作表单(获取数据及MD5加密)
1 获取和设置表单的值
实现步骤：
step1: 对应的< input >添加id属性。
step2: document.getElementById()
step3: .value
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名：</span><input type="text" id = "username">
</p>
</form>
<script>
//获取用户名输入框的值
var input_id = document.getElementById('username');
</script>
</body>
</html>
控制台中输入：
input_id.value
//也可以直接赋值进行修改 input_id.value = '123'
测试结果：
2 表单提交验证及前端密码MD5加密
此处先展示一个简易的表单，通过js在控制台显示提交的表单值，并截取提交的表单值
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名：</span> <input type="text" id = "username" name="username" required>
</p>
<p>
<span>密码：</span> <input type="password" id="password" name="password" required>
</p>
<!--绑定事件onclick被点击-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa() {
var uname = document.getElementById("username");
var pwd = document.getElementById("password");
console.log(uname.value);
console.log(pwd.value);
}
</script>
</body>
</html>
测试结果：
通过Network抓取数据显示如下：（重点看Form Data中语句：）
现使用MD5对其加密!
MD5工具类：https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js
使用script导入：<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
更改上述代码中的function如下：（核心语句：pwd.value = md5(pwd.value);）
function aaa() {
var uname = document.getElementById("username");
var pwd = document.getElementById("password");
console.log(uname.value);
//MD5算法
pwd.value = md5(pwd.value);
console.log(pwd.value);
}
测试结果：
对上述代码进行优化：
- 对提交功能优化，上述代码采用button绑定触发事件，现直接使用表单的
onsubmit=""进行绑定。 - 在上述代码提交的瞬间，密码会变长，这是md5加密的结果。降低用户体验，以下代码中采用
input-password、md5-password两种密码（一个显性、一个隐形），可以局部优化！ - 以下代码中利用
onsubmit="return ..."，并在触发函数的结尾设置return true/false;关卡，控制表单是否可以提交。
优化后的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span> <input type="text" id = "username" name="username" required>
</p>
<p>
<!--这是用户输入的密码，但是没有赋name属性，network无法截获，起到隐藏的作用-->
<span>密码：</span> <input type="password" id="input-password">
</p>
<!--此处赋name属性，会被network截获，但是截获的是md5加密后的密码，实现可关注aaa()中代码-->
<input type="hidden" id="md5-password" name="password">
<button type="submit">提交</button>
</form>
<script>
function aaa() {
var uname = document.getElementById("username");
var pwd = document.getElementById("input-password");
var md5pwd = document.getElementById("md5-password");
//MD5算法加密
md5pwd.value = md5(pwd.value);
return true;
}
</script>
</body>
</html>
测试结果：
写在最后
年轻人，
你的职责是平整土地，
而非焦虑时光。
你做三四月的事，
在八九月自有答案。
——《时间之书》
To Demut and Dottie!