JS验证码功能的三种实现

摘要：

当我们对后台系统进行登录验证时。使用验证码功能辅助验证，提高安全性是必然的。在我们的日常生活中，验证方法无处不在，最常见的方法就是短信验证码。点击发送验证码后，手机收到短信并填写验证码成功登录。但是，也使用了一些其他的验证码功能。因此，我只想专注于此，希望对大家有所帮助。

1.数字短信验证码

思考：

A.两个文本框中的一个是获取验证码的按钮，文本框用于输入手机号码和获取的验证码，按钮负责点击并记录倒计时；

B.js写定时器setTimeout，记录验证码的过期时间60秒；

C.后台提供了短信获取和验证的接口。我们上传手机号作为参数，后台获取后给手机号下发验证码；

效果图显示：

示例1.0:单击按钮发送验证码渲染

示例2.0:短信接收截图

代码演示：

超文本标记语言

输入类型=' text ' name=' phone ' id=' phone ' value=' placeholder='请输入电话号码' maxlength=' 11 '/Input type=' name=' vercode ' id=' vercode ' value=' placeholder='请输入验证码' maxlength=' 6 '/Input type=' button ' name=' id=' vercodebtn ' value='获取验证码' onclick=' settime(this)；/css

-博主偷了点懒，省略了，不懂就关注我-

倒计时js

//验证码var计数=60；函数settime(val){ if(counts==0){ val . remove attribute(' disabled ')；Val.value='获取验证码'；计数=60；返回false} else { val . SetAttribute(' disabled '，true)；Val.value=“重新发送(计数)”；计数-；} setTimeout(function(){ settime(val)；}, 1000);}Ajax接口代码js

$(function(){ //获取验证码$ ('# vercodebtn ')。click(function(){ var user info={ ' user phonenum ' : ' 86/' $(' input[name=' phone ']')。val ()} $。埃阿斯