仿造一个支付密码的验证
我们在项目里日常用到的密码框大多数是<input type="password">,它大概是这样的:
而我们在手机上的微信支付密码则是这样的:
这样一个6个格子,每个格子只能输入一位数的6位密码。
那么我们先来说一下样式组成;
整体大概是这样,不难看出是6个input,我们给他6个相同的样式,做出一个正方形的格子,后面的oninput="inputnumMM2(this)"是一个方法,限制输入的是数字的,同时也是触发输入的方法,下面来看一下;原理就是通过oninput获取每次输入,我们在刚刚打开支付密码界面的时候,给第一个密码框获取焦点,然后当第一个输入后,我们就通过焦点去输入第二个,以此类推,我们这里是根据长度去推算输入的,第一个本身是一个输入密码框,本身可以输入很多位数,但是我们通过oninput去获取它的输入,当长度等于1时,也就是输入的密码位数为1时,去触发第一个密码框的失焦和第二个的获焦,后面都是这样的;我们看下代码;
当第6个密码框输入完成后,我们需要做的就是组装密码,如下
我们通过拼接来组装了这个支付密码,输出结果如下:
最后我们就得到了一个6位数的密码;如何拿去和数据库作比较;
这个是限制输入只能是数字及小数点后两位的验证;