400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】Js实现验证码功能

【Web前端基础知识】Js实现验证码功能

  • 发布: 优就业it培训
  • 来源:优就业
  • 2021-06-18 17:16:52
  • 阅读()
  • 分享
  • 手机端入口

在平时我们登录或者注册时,都会见到要输入验证码的功能,当输入正确时才可以进行登录或者注册,那我们如何使用js来实现一个输入验证码的进行验证的功能呢。

验证码生成的内容都是随机的,所以需要先获取一个随机数,根据这个随机数再去获取一个随机的数字或字母,最后将获取到的四位随机数字或字母组合到一起,就生成了一个随机的验证码。

首先我们先声明一个字符串,内容为0-9、a-z、A-Z,再完成一个获取随机数的函数封装,利用数学对象的获取随机数方法Math.random(),取一个从0到该字符串长度的随机数字。

获取随机数

根据思路我们先完成一个获取随机数的函数封装,利用数学对象的获取随机数方法Math.random(),得到一个最大值到最小值之间的数字,最后进行一下取整。

  1. // 获取最大值到最小值之间的随机数 
  2. function getRandom(min, max) { 
  3.     return Math.floor( Math.random() * ( max - min + 1 ) + min ); 

获取验证码

声明一个字符串str,内容为0-9、a-z、A-Z,因为接下来验证码字符的取值就是在这些字符中进行的取值。调用获取随机数的函数,获得一个范围在0到str.length - 1的随机数字,以该数字为下标从字符串str中取出一个字符。假如现在要生成一个四位的随机验证码,我们就通过for循环来生成四位随机字符,随后把这四位随机字符拼接在一起。把该过程封装成为一个函数,将验证码作为函数的返回值return出去。

  1. // 获取随机验证码 
  2. function getCode() { 
  3.     var str = '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
  4. var code = ''; //验证码 
  5. // 循环生成四位的随机字符 
  6. for ( var i = 0; i < 4; i++ ) { 
  7. // 获取一个 
  8.         var n = getRandom(0, str.length - 1); 
  9.         var s = str[n]; 
  10.         code += s; 
  11.     } 
  12.     return code; 

在页面中使用

Html代码为:

  1. <input type="text" > 
  2. <span></span> 
  3. <em></em><br> 
  4. <button>验证</button> 

在页面中进行使用时,首次打开页面时调用获取验证码的函数,将返回的随机验证码赋值给标签,点击标签时刷新验证码,即点击时再次调用getCode函数,给验证码标签赋值。

点击验证按钮时比较验证码标签和输入框的内容,不一致时提示输入错误。

js的代码为:

  1. window.onload = function () {  
  2. // 获取标签 
  3. var oInp = document.getElementsByTagName('input')[0]; 
  4. var oSpan = document.getElementsByTagName('span')[0]; 
  5. var oBtn = document.getElementsByTagName('button')[0]; 
  6. var oMsg = document.getElementsByTagName('em')[0]; 
  7. // 初始页面验证码的内容 
  8. oSpan.innerHTML = getCode(); 
  9. // 点击重新生成新的验证码 
  10. oSpan.onclick = function() { 
  11.     oSpan.innerHTML = getCode(); 
  12. // 点击验证按钮进行验证 
  13. oBtn.onclick = function() { 
  14. // 比较输入框的内容和验证码标签的内容     
  15. if ( oInp.value == oSpan.innerHTML ) { 
  16.         oMsg.innerHTML = ''
  17.     } else { 
  18.         // 提示错误信息 
  19.         oMsg.innerHTML = '验证码输入错误'
  20.     } 
  21.  

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道