关于html表单实现md5加密,input框长度变化的问题。
问题描述:
今天在写html页面的时候,想实现一个登陆表单,考虑到表单提交数据的时候会以 name = value 的形式发送数据。
所以提交账号密码会存在一定的风险,所以想使用md5来进行密码加密,当然这不是传统的加密方式,在这里就简单一下。
在开发过程中我用jquery代码获得密码框内容,然后调用js的md5库加密,把密文写回到密码框,这是我们会发现密码框的长度会变长。
如下图:
md5加密后:
这是因为以下代码:
function login(){
var password = $("#password").val() ; // 密码加密
$("#password").val($.md5(password)); // 密码重赋值
return true ;
}
我原来的想法就是,将加密后的md5密码赋值给原来的password框,然后随post请求发往服务器。但是这种会出现很多问题。
问题:
- 当我们重复登陆的时候,会发现密码错误。现在的浏览器都有记住密码的功能,如果我们把md5密文写入password框,将会造成记住密码登陆不上的情况。
- 不符合我们实际情况,我们平时登陆的时候密码长度不会发生改变。
解决方案:
先亮代码,再说原理
html代码
<div class="col-sm-5">
<input type="password" class="form-control" id="password" placeholder="请输入密码" >
<input type="hidden" name="password_md5" id="password_md5">
</div>
function login(){
var password = $("#password").val() ;
$("#password_md5").val($.md5(password));
return true ;
}
原理解析:
在html中吗,我们在密码框下额外定义了一个hidden类型的input框,这个框是不会显示在前端页面上的。所以我们用它来保存我们的加密后的密码。在js中,我们获得了密码原文进行加密后,将密文赋值给这个未显示的组件,这样就避免了这个问题。
服务器收到的请求信息:
感谢阅读!欢迎指教!