前端密码md5加密后在传入后台

最新推荐文章于 2024-08-22 15:29:00 发布

原创最新推荐文章于 2024-08-22 15:29:00 发布 · 置顶 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了一种在前端使用MD5进行密码加密的方法，通过在提交表单前使用MD5算法加密用户输入的密码，增加了用户账户的安全性。示例代码展示了如何在HTML中引入MD5库，并在表单提交时将明文密码转换为MD5哈希值。

部署运行你感兴趣的模型镜像

首先前端引入md5

<script type="text/javascript" src="js/md5.js" ></script>

然后在提交时,将密码加密

<script type="text/javascript" src="js/md5.js" ></script>
    <form method="get" onsubmit="return checkInput()" class="layui-form" action="xxxxx" >
            <input type="text" id="username" name="username" placeholder="请输入用户名/手机号"  lay-verify="required">
            <hr class="hr15">
            <input type="password" id="pwd" lay-verify="required" placeholder="请输入密码" >
            <input type="hidden" id="password_md5" name="password">
            <hr class="hr15">
            <div class="row">
                <div class="checkbox i-checks pull-left" style="margin-left:-5px;">
                    <label><input type="checkbox" value="">记住用户名和密码</label>
                </div>
                <div class="pull-right" style="margin:10px 15px 0 0"><a href="javascript:void(0)" id="xxxx" class="text-info">忘记密码</a></div>
            </div>
            <hr class="hr15">
            <input value="登录" id="login-btn" lay-submit lay-filter="login" style="width:100%;" type="submit">
            <hr class="hr20" >
        </form>



	<script>
     function checkInput() {
   			 var password_input = document.getElementById('pwd');
   			 var password_md5 = document.getElementById('password_md5');
   			 password_md5.value =  hex_md5(password_input.value);
   			 return true;
		}
    </script>