JS点击图片后显示验证码 如何实现?

JavaScript015

JS点击图片后显示验证码 如何实现?,第1张

最简单的方法你把图一的显示验证码也弄成一个图片,比如叫code.png,上面你的代码就能换成

<img src="code.png" onclick="this.src ={$maccms.path_tpl}picture/captcha.png"

你也真敢想。

网页验证码一般是在后台生成一个验证码在后台生成好图片返回给网页显示,用户输入的信息与后端保存的信息再进行验证。

如果后端的信息返回到前端是已文字的形式,就起不到安全的作用了。

你的这个功能可以这样设计,但作用不大。我来说说我的思路吧

首先后端返回一个数字类型的验证码,前端获取数字行的验证用js+css组织实现特效。你在上图的黑色部分设定一个挡扳的html元素(这个元素距离左边的三角形滑动块的距离就是后端返回的数字),左边滑块滑动多少距离达这个隐藏区块,获取这个数值,保存下来。

这个不能使用js来做,js属于客户端脚本,手机验证码不能通过任何方式显示到前端,所以js不能来做校验

实现方案是,点击获取验证码,发送手机号到服务端,服务端通过短信平台网关接口发送验证码;用户接收到验证码,输入验证码,然后将手机号和验证码同时提交到服务端,由服务端进行验证,并返回是否验证通过

整个过程中验证码并未出现在前端