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!