【学习笔记】操作表单
获得表单信息
-
输入框
<body> <form action="post"> <p> <span>用户名：</span><input type="text" id="username"> </p> </form> <script> var username = document.getElementById("username"); //获得表单输入框的值 username.value; //修改表单输入框的值 username.value = 'nihao'; </script> </body>
-
单选/多选框
<body> <form action="post"> <p> <span> <input type="radio" name="sex" value="man" id="man">男 <input type="radio" name="sex" value="woman" id="woman">女 </span> </p> </form> <script> var man_radio = document.getElementById('man'); var woan_radio = document.getElementById('woman'); </script>对于表单的单选框或多选框来说，man_radio.value只能获取到该选项的value，而不能去判断当前选中按钮的value。
所以我们要使用man.checked 来判断该按钮是否被选中，选中则返回true，没有选中返回false
可以通过对checked赋值，来操作单选框的选中情况。
提交表单
提交表单时，可以进行一些验证，就是用onsubmit来绑定提交检测的函数，通过这个函数的返回值来判断是要提交表单还是要拦截表单。
< form onsubmit = "return aaa()" > < /form>
<body>
<form action="#" method="post" onsubmit="return check()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="password" name="password">
</p>
<button type="submit">提交</button>
</form>
<script>
function check() {
var username = document.getElementById('username');
//如果用户输入的用户名长度小于4，就拦截表单
if (username.value.length<4){
alert("用户名长度小于4");
return false;
}
return true;
}
</script>
</body>
MD5密码加密
如果我们没有给密码加密，那么在提交表单时，在请求中可以看到用户输入的密码，如下图：
我们可以用MD5工具类给密码加密
<body>
<form action="#" method="post" onsubmit="return check()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="password" name="password">
</p>
<button type="submit">提交</button>
</form>
<script>
function check() {
var username = document.getElementById('username');
var password = document.getElementById('password');
password.value = md5(password.value);
return true;
}
</script>
</body>使用这种方法还有一个弊端就是，当你提交表单的一瞬间，密码框中会把加密的密码长度暴露出来，如下：
所以我们可以把要提交的密码框给隐藏起来，显示出来的密码框作为中间的媒介，这时提交的密码就是我们隐藏的密码框。
<form action="#" method="post" onsubmit="return check()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="password">
<!--把name给隐藏的密码框-->
<input type="hidden" id="md5password" name="password">
</p>
<button type="submit">提交</button>
</form>
<script>
function check() {
var username = document.getElementById('username');
var password = document.getElementById('password');
var md5password = document.getElementById('md5password');
//把加密后的密码赋值给隐藏的密码框
md5password.value = md5(password.value);
return true;
}
</script>
MD5加密的js
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>