JavaScript使用md5验证登录加密

最新推荐文章于 2024-09-13 22:14:14 发布

CP3圣保罗

最新推荐文章于 2024-09-13 22:14:14 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： javascript md5 加密解密

本文链接：https://blog.csdn.net/qq_42837890/article/details/104429435

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

直接上代码

1.HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript使用md5验证登录加密</title>
    <!--引入md5加密库-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="Check.js"></script>
</head>

<body>
<!--
表单级提交绑定事件
onsubmit = 绑定一个提交检测的函数,return true||false
将这个结果再 return 给表单,使用onsubmit接收
-->

<form action="https://www.baidu.com/" method="post" οnsubmit="return CheckForm()">
    <!--这里一定是return CheckForm() 不能缺少return否则无法拦截 -->
    <p>
        <span>用户名:</span><input type="text" id="#user" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="#pwd" name="password">
        <!--可将name="password "置空，然后将md5加密后的md5password改成password迷惑-->
    </p>

    <input type="hidden" id="#md5pwd" name="md5password"><!-- md5隐藏加密文本框-->
    <!--
    绑定事件 onclick 被点击
    代替表单的on submit<button type="submit" οnclick="CheckForm()">登录</button>
    按钮级绑定，但无法拦截，用哪个级别，哪里调用check form函数
    -->
    <button type="submit" >登录</button>

</form>


</body>
</html>

2.JS部分

'use strict';
function CheckForm() {
    var user=document.getElementById('#user');//用户名表单节点
    var pwd=document.getElementById('#pwd');//密码表单节点
    var md5pwd=document.getElementById('#md5pwd');//md5加密节点
    //此处校验表单内容是否符合
    if(pwd.value.length<6){//简单验证,密码长度少于6位
        alert("密码格式错误,请重新输入");
        return false;
    }else {
        md5pwd.value= md5(pwd.value);//结果返回32位小写的十六进制值的加密字符串
        return true;
    }
}