1、获取表单内容
var input_text = document.getElementById('asd');//根据id获取输入框节点
input_text.value;//输出输入框中的内容
上面是获取输入框内容的方法。
var boy_radio = getElementById('boy');//获取单选框的各个选项的节点
var girl_radio = getElementById('girl');
boy_radio.checked();//通过checked方法来获取选项是否被选中的信息
girl_radio.checked();
上面是单选框选项是否被选中的获取方法,多选框获取方法与此相同
2、提交表单内容
在form的属性method中添加post之后就可以成功的将表单中含有name属性的输入框提交到action属性中的指定位置中。注意,为了能够完成提交,我们需要将button的类型设置为submit才能够完成内容的提交。
3、表单内容加密
我们之前操作的时候,如果我们从后台中获取提交数据,可以清楚的显示出我们提交的用户名和密码。
而我们去一些网站登录验证的时候,会发现自己的密码受到了隐藏加密保护,那么怎么实现对密码的加密呢?
我们只需要在获取该值之前更改值的内容就可以达到这种目的了,一般情况下采用的都是MD5加密方式,服务器端存储的也是加密后的串,如果我们提交的加密内容和服务器端存储的加密串一致,就说明我们输入的是正确的密码,就可以完成登录操作。代码实现如下:
function cc() {
var un = document.getElementById('un');
var pw = document.getElementById('pw');
console.log(pw)
pw.value = md5(pw.value);
}
最后得到的效果就是这样的:
还有一种高级一点的加密方法,就是再添加一个类型为hidden的input表单,将显示出来的表单的name删除,添加给hidden类型的input表单,得到输入值后赋值给hidden再提交,这样更加降低了风险,增加了安全性,实现代码如下:
function cc() {
var un = document.getElementById('un');
var pws = document.getElementById('pws');
var pwreal = document.getElementById('pwreal');
pwreal.value = md5(pws.value);
}
结果与上图类似。