表单密码MD5加密处理

最新推荐文章于 2024-06-24 16:52:56 发布

Smilve

最新推荐文章于 2024-06-24 16:52:56 发布

阅读量614

点赞数

分类专栏：前端文章标签： md5 javascript

本文链接：https://blog.csdn.net/sakura0ff/article/details/111461813

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表单密码加密，提升网站安全性

问题
直接设置pwd.value=md5(pwd.value);会造成密码回显，用户体验不行
解决方案
直接添加个hidden标签，设置mpwd.value=md5(pwd.value);，提交表单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script>
      var d1 = document.getElementById('d1'); 
      var father = document.getElementById('father');
    
    </script> -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  </head>
  <body>
    <div>
      <form action="" onsubmit="return check()">
        <div><span>用户名：</span>
          <input type="text" name="name" id="name">
        </div>
        <div>
          <span>密码：</span>
          <!-- 不设置密码框的name，提交表单拿到hidden中加密的数据 -->
          <input type="password" id="pwd">
          <input type="hidden" name="pwd" id="md5-pwd">
        </div>
        <div>
          <input type="submit"></input>
        </div>
      </form>
    </div>
    
    <script>
      function check(){
        var pwd=document.getElementById('pwd');
        var mpwd=document.getElementById('md5-pwd');
        //md5加密
        mpwd.value=md5(pwd.value);
        //pwd.value=md5(pwd.value);
        //onsubmit里面校验，true为通过提交，false就是阻止提交
        return true;
      }
    </script>
  </body>
</html>

Smilve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
表单密码MD5加密处理

直接设置pwd.value为加密的value会造成用户体验不好，直接设置个hidden来提交加密密码。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&
复制链接

扫一扫

专栏目录