生成验证码

开发工具与关键技术: VS,layui
作者:卢惠圳
撰写时间:2019年5月14日
在看到网页上的验证码会以为是一张张图片,但其实不是这里引用了一个插件就可以达到效果,首先创建HTML样式将验证码的大小、位置设置好,然后引入layui插件就可以开始写JS代码和控制器代码了,HTML代码如下图:
生成验证码
接下来是JS代码,每点击一下验证码就可以换一张验证码,也就是每点击一下验证码就将验证码中的IMG标签中的SRC路径更换掉,JS代码如下图:
生成验证码
接下来就是控制器的代码了,先生成一段长度为5的随机的验证码字符串然后根据随机生成的验证码字符串去生成验证码图片,之后将验证码字符串存入session中再把图片返回到视图的JS代码中即可,控制器代码如下图:
生成验证码
最后再去写上根据随机生成的验证码字符串判断是否与输入框中输入的内容一致,这样一个登录的随机验证码就可以了,实际效果图如下:
生成验证码