仿造一个微信的支付密码的验证

仿造一个支付密码的验证

我们在项目里日常用到的密码框大多数是<input type="password">，它大概是这样的：

而我们在手机上的微信支付密码则是这样的：

这样一个6个格子，每个格子只能输入一位数的6位密码。

那么我们先来说一下样式组成；

整体大概是这样，不难看出是6个input，我们给他6个相同的样式，做出一个正方形的格子，后面的oninput="inputnumMM2(this)"是一个方法，限制输入的是数字的，同时也是触发输入的方法，下面来看一下；原理就是通过oninput获取每次输入，我们在刚刚打开支付密码界面的时候，给第一个密码框获取焦点，然后当第一个输入后，我们就通过焦点去输入第二个，以此类推，我们这里是根据长度去推算输入的，第一个本身是一个输入密码框，本身可以输入很多位数，但是我们通过oninput去获取它的输入，当长度等于1时，也就是输入的密码位数为1时，去触发第一个密码框的失焦和第二个的获焦，后面都是这样的；我们看下代码；

当第6个密码框输入完成后，我们需要做的就是组装密码，如下

我们通过拼接来组装了这个支付密码，输出结果如下：

 

最后我们就得到了一个6位数的密码；如何拿去和数据库作比较；

这个是限制输入只能是数字及小数点后两位的验证；