2021-08-05 表单加密及优化

最新推荐文章于 2022-04-24 08:47:15 发布

kasua

最新推荐文章于 2022-04-24 08:47:15 发布

阅读量146

点赞数

本文链接：https://blog.csdn.net/chenafa/article/details/119426909

版权

密码加密 MD5 隐藏输入表单优化数据安全

关键词由CSDN通过智能技术生成

提交表单（重点）密码加密表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类   【是好是坏？无法加载源映射，在线链接不行，下载本地也不行】【或许可以尝试别的加密工具】-->
    <!--<script src="lib/md5.js"></script>-->
</head>
<body>

<!--抓取不到是因为post 写成了poat 吗？经验证，不是
【表单绑定事件】
1、aaa()函数的结果返回给 onsubmit 没有用，要返回给 form
2、所以 submit 用于接收返回的信息 true/false，所以加了 return
3、手动设置：return true 表示总是通过，return false 表示总是拒绝
-->
<form action="#" method="post" onsubmit="return aaa()">

    <!--【问题】无法抓取，【原因】没有 name 属性-->
    <p>
        <span>用户名：</span><input type="text" id="username" required name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-password" required>
    </p>

    <!--上面用户输入的密码 input-password，由于没有 name 属性，现在已经无法抓取到
    有一个输入密码提交一瞬间看到密码变长的现象，通过新建一个隐藏的文本框来解决
    -->
    <input type="hidden" id="md5-password" name="password">

    <!--【按钮绑定事件】提交按钮和打印表单信息关联
    【普通按钮】和【带提交功能的按钮】
    表单级别关联了函数事件，但按钮这里必须得是submit才可以提交表单
    -->
    <!--<button type="button" οnclick="aaa()">提交</button>-->
    <!--<button type="submit" οnclick="aaa()">提交</button>-->
    <!--<button type="submit">提交</button>-->
    <button type="submit">提交</button>
</form>

<script>
    var uname = document.getElementById('username');
    var pwd = document.getElementById('password');
    var md5pwd = document.getElementById('md5-password');

    function aaa(){
        alert('111');
        //创建了一个新的隐藏的文本框，把输入的密码加密后赋值给此文本框，而不是原来输入密码的框，所以避免了输入密码点提交瞬间变长的现象
        md5pwd.value = md5(pwd.value);
        console.log(pwd.value);
        //此处应该有一个判断，而不总是返回true或者总是返回false
        //用户输入的内容和数据库中的信息进行对比，匹配成功返回 true，否则返回 false
        return false;
    }
</script>

</body>
</html>