JavaScript 表单操作与MD5加密

本文链接：https://blog.csdn.net/Huuc6/article/details/116884804

定义表单

<form action="#" method="post">
    <!--表单内容-->
</form>

表单以form为关键词定义，其中，action为提交后跳转地址，

请求方式post可选post get 等方式。

例，action中填写http://www.baidu.com，则在提交表单请求后，可以跳转到百度。

定义输入框并读取表单值

<form action="post">
    <span>用户名：</span> <input type="text" id="username">
</form>

<script>
    let input_text = document.getElementById('username')
        value = input_text.value // 获取输入框中的值
        input_text.value = '456456' // 修改输入框中的值
</script>

定义单选框并读取表单值

<form action="#" method="post">
    <p>
        <!--单选框的值，就是定义好的value的值-->
        <span>性别：</span>
        <input type="radio" id="male" name="gender" value="male">男
        <input type="radio" name="gender" id="female" value="female">女
    </p>
</form>

<script>
    let male_radio = document.getElementById('male')
    let female_radio = document.getElementById('female')
        // 返回值：true / false
    // 设置选中性别
    male_radio.checked=true;
    female_radio.checked=true;
    // 判断性别
    if(male_radio.checked===true){
        console.log('男');
    }
</script>

提交表单与验证

提交表单

在前端进行表单提交验证，可以减轻服务器压力，避免大多数的错误提交。

在html中可以实现简单的初级验证，例如：

<form action="#" method="post">
  <span>用户名：</span>
  <input type="text" required placeholder="输入邮箱或手机号">
  <input type="submit">
</form>

在input中添加required属性，可以设置必填项。

添加placeholder属性，可以设置提示输入文本。

如图为点击提交后的提示

即使html自带判断，但是判断大都是简单的判断，存在较大问题，不安全

<form action="#" method="post">
  <p>
    <span>用户名：</span>
    <input type="text" id="username" name="username" required placeholder="输入邮箱或手机号">
  </p>
  <p>
    <span>密码：</span>
    <input type="password" id="password" name="password" required placeholder="输入密码">
  </p>
  <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
  function aaa(){
    let uname = document.getElementById('username')
    let pwd = document.getElementById('password')
      console.log(uname.value)
      console.log(pwd.value)
  }
</script>

带有简单验证与提示的表单内容获取功能

表单中username与password必须有name属性，否则控制台抓不到他们的值。
aaa()事件，除了可以绑定在button上，也可以绑定在表单提交上，实现提交检测

表单提交绑定事件

表单提交绑定事件具体操作为：给form添加一个onsubmit属性，onsubmit可以读取，其内容返回的值。如获取到true，则正常提交表单，如获取到false，则终止提交操作。

例如，删去button中的onclick属性，在onsubmit中填入return aaa()，并在aaa()中添加return false，此时submit提交表单时，表单首先运行aaa()，获取其返回值，获取到false后，终止提交操作，此时在浏览器后台看不到提交请求。但如果aaa()返回true，则表单可以正常发出提交请求。

<form action="#" method="post" onsubmit="return aaa()">
<p>
  <span>用户名：</span>
  <input type="text" id="username" name="username" required placeholder="输入邮箱或手机号">
</p>
<p>
  <span>密码：</span>
  <input type="password" id="password" name="password" required placeholder="输入密码">
</p>
<button type="submit">提交</button>
</form>

<script>
function aaa(){
  let uname = document.getElementById('username')
  let pwd = document.getElementById('password')
    console.log(uname.value)
    console.log(pwd.value)
    return false
}
</script>

综上，可以通过控制submit中函数的返回值(true / false)来控制提交请求。

表单内容的MD5加密

输入"12312333"与"332211"后，在浏览器后台抓包可以看到，浏览器提交了这样的请求：

密码在提交过程中以明文传递，带来了一定的安全隐患，下面进入到表单加密。

在head部分加入以下代码，可以向html中引入MD5加密工具类：

<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>

一样的html代码，对script部分进行修改，加入md5()函数：

<script>
  function aaa(){
    let uname = document.getElementById('username')
    let pwd = document.getElementById('password')
    // MD5加密
    pwd.value = md5(pwd.value)
  }
</script>

此时到浏览器后台抓包，可以看到，提交的password为经过MD5加密后的密文。

进阶的加密逻辑

在上述表单的提交过程中，存在一定的问题，比如在用户端输入完密码，点击提交后，密码突然变成很长一串，暴露了MD5加密的过程。

出现这个细节问题的原因是，读取、加密等操作始终都在同一个密码变量pwd上进行，要避免出现这样的情况，需要对代码进行一定的改写：

<form action="#" method="post">
  <p>
    <span>用户名：</span>
    <input type="text" id="username" name="username" required placeholder="输入邮箱或手机号">
  </p>
  <p>
    <span>密码：</span>
    <input type="password" id="input-password" required placeholder="输入密码">
  </p>
  <input type="hidden" id="md5-password" name="password">
  <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
  function aaa(){
    let uname = document.getElementById('username')
    let pwd = document.getElementById('input-password') // 修改
    let md5pwd = document.getElementById('md5-password') // 修改
    // MD5加密
    md5pwd.value = md5(pwd.value) // 修改
  }
</script>