首页 > 其他分享> > 2021-08-05 表单加密及优化

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

2021-08-05 21:01:11 作者：互联网

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

<!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>

加密的方法

使用 post 提交
使用密码框
给密码赋一个固定值，打印固定值（很初级的方法）
使用 MD5 工具类加密，打印加密后的值
优化解决提交时密码变长的问题（新建隐藏的文本框，用于存放加密后变长的值）

请添加图片描述

【注意】

如果表单的提交方式 method 填写错误，都会默认 get 方式提交！输入内容会在URL中暴露！

不写方式
写 post 写错

onsubmit 和 onclick

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。

在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。

但是onclick比onsubmit更早的被触发。

提交过程

1、用户点击按钮 —->

2、触发onclick事件 —->

3、onclick返回true或未处理onclick —->

4、触发onsubmit事件 —->

5、onsubmit未处理或返回true ——>

6、提交表单

标签：onsubmit,加密,提交,05,08,表单,密码,2021,onclick
来源： https://blog.csdn.net/chenafa/article/details/119426909