频道导航

5分钟教你3种实现验证码功能

2019-03-02 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了5分钟教你3种实现验证码功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

摘要：后台系统的登录验证的时候。难免会用到验证码功能，来辅助进行验证，提高安全性，在我们日常生活中，验证方式无处不在，最多的是短信验证码的方式，通过点击发送验证码，然后手机接收短信，填写验证码才能登陆成功，但是也有一些其他验证码功能也在使用，所以，我就想着来集中记录一下，希望对大家有所帮助...

一.数字短信验证码

获取验证码按钮，文本框用来输入手机号和获取到的验证码，按钮负责点击和记录倒计时；

后台提供短信获取验证的接口，我们把手机号作为参数上传，后台获取到后给该手机号下发验证码；

效果图展示：

效果图

代码展示：

 

获取验证码"

css


 counts = 60<span style="color: #0000ff">function<span style="color: #000000"> settime(val) {

<span style="color: #0000ff">if(counts == 0<span style="color: #000000">) {

val.removeAttribute("disabled"<span style="color: #000000">);

val.value = "获取验证码"<span style="color: #000000">;

counts = 60<span style="color: #000000">;

<span style="color: #0000ff">return <span style="color: #0000ff">false<span style="color: #000000">;

} <span style="color: #0000ff">else<span style="color: #000000"> {

val.setAttribute("disabled",<span style="color: #0000ff">true<span style="color: #000000">);

val.value = "重新发送（" + counts + "）"<span style="color: #000000">;

counts--<span style="color: #000000">;

}

setTimeout(<span style="color: #0000ff">function<span style="color: #000000">() {

settime(val);

},1000<span style="color: #000000">);

}

Ajax接口代码js

$(获取验证码 $("#verCodeBtn").click( userinfo ="UserPhoneNum": '86//' + $("input[name='phone']"

    $.ajax({
        url: </span>"https://www.xxxxx.cn/user/sendcode/"<span style="color: #000000"&gt;,data: userinfo,type: </span>"get"<span style="color: #000000"&gt;,success: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;(data) {</span>
            <span style="color: #0000ff"&gt;if</span>(JSON.parse(data).state === <a href="/tag/404/" target="_blank" class="keywords">404</a> || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//'<span style="color: #000000"&gt;) {
                alert(</span>"验证码发送失败"<span style="color: #000000"&gt;)
            } </span><span style="color: #0000ff"&gt;else</span><span style="color: #000000"&gt; {
                alert(</span>"验证码发送成功，请耐心等待"<span style="color: #000000"&gt;)
            }
        },error: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() {
            alert(</span>"发送失败"<span style="color: #000000"&gt;);
        }
    });

});

})

二.图形验证码

后台生成的验证码图片返回给前端的，那样的话就比较简单，因为复杂的都让后台解决了，我在这里主要说的是另一种，就是不调用后台接口，通过canvas画布来解决图形验证码。

标签来显示图形验证码+一个提交按钮；

错误进行相应的提示；

生成并渲染出验证码图形，并且得到随机的颜色值；

效果图展示：图片展示