JavaScript表单操作和加密

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 action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" name="username" id="un">
    </p>
    <p>
        <span>密码：</span><input type="password" name="password" id="pw">
    </p>
    <button type="submit" >提交</button>
</form>

　　在form的属性method中添加post之后就可以成功的将表单中含有name属性的输入框提交到action属性中的指定位置中。注意，为了能够完成提交，我们需要将button的类型设置为submit才能够完成内容的提交。

3、表单内容加密

我们之前操作的时候，如果我们从后台中获取提交数据，可以清楚的显示出我们提交的用户名和密码。

而我们去一些网站登录验证的时候，会发现自己的密码受到了隐藏加密保护，那么怎么实现对密码的加密呢？
我们只需要在获取该值之前更改值的内容就可以达到这种目的了，一般情况下采用的都是MD5加密方式，服务器端存储的也是加密后的串，如果我们提交的加密内容和服务器端存储的加密串一致，就说明我们输入的是正确的密码，就可以完成登录操作。代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS演示</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" name="username" id="un">
    </p>
    <p>
        <span>密码：</span><input type="password" name="password" id="pw">
    </p>
    <button type="submit" onclick="cc()">提交</button>
</form>
<script>
    function cc() {
        var un = document.getElementById('un');
        var pw = document.getElementById('pw');
         console.log(pw)
         pw.value = md5(pw.value);
    }
</script>
</body>
</html>

最后得到的效果就是这样的：

还有一种高级一点的加密方法，就是再添加一个类型为hidden的input表单，将显示出来的表单的name删除，添加给hidden类型的input表单，得到输入值后赋值给hidden再提交，这样更加降低了风险，增加了安全性，实现代码如下：
<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" name="username" id="un">
    </p>
    <p>
        <span>密码：</span><input type="password" id="pws">
    </p>
    <input type="hidden" name="password" id="pwreal">
    <button type="submit" onclick="cc()">提交</button>
</form>
<script>
    function cc() {
        var un = document.getElementById('un');
        var pws = document.getElementById('pws');
        var pwreal = document.getElementById('pwreal');
        pwreal.value = md5(pws.value);
    }
</script>

　　结果与上图类似。

posted on 2021-08-14 12:12  我真不会编程啊  阅读(645)  评论(0)    收藏  举报