前端页面进行MD5加密

最新推荐文章于 2024-10-10 19:55:17 发布

大地Orooz

最新推荐文章于 2024-10-10 19:55:17 发布

阅读量668

点赞数

分类专栏：笔记文章标签： md5

本文链接：https://blog.csdn.net/weixin_45902973/article/details/115144507

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

form表单，有一个监听提交的事件，onsubmit事件，可用于校验表单，如果输入正确或者用户名密码正确，就可以提交，否则无法提交，
return true 可以提交，return false不可以提交，注意有两个return，一个在函数结尾处，一个在函数的调用处。

MD5加密CDN
https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js"></script>
</head>
<body>
<form action="#" method="get" onsubmit="return sub()">
    <p>用户名：<input type="text" placeholder="请输入用户名" name="username" id="usr" required></p>
    <p>密码：<input type="text" placeholder="请输入密码"  id="inpwd" required></p>
    //设置一个隐藏的密码框用于隐藏密码
    <p><input type="hidden" id="hidpwd" name="password"></p>
    <p><input type="submit"></p>
</form>
</body>
<script>
    function sub() {
        var user = document.getElementById("usr");
        var inpwd = document.getElementById("inpwd");
        
        var hidpwd = document.getElementById("hidpwd");
      // 调用MD5加密函数对原文进行加密
        hidpwd.value  = md5(inpwd.value);// 加密后：698d51a19d8a121ce581499d7b701668

        return true;
    }
</script>
</html>