In this tutorial you will get JavaScript captcha example.

在本教程中,您将获得JavaScript验证码示例。

Captcha is used to determine whether or not the user that is filling and submitting a web form is human. While developing web projects we often require to add captcha feature.

验证码用于确定填写和提交Web表单的用户是否是人类。 在开发Web项目时,我们经常需要添加验证码功能。

So here I have shared the simplest way to create captcha in JavaScript. It will look like as shown in below image.

因此,在这里,我分享了使用JavaScript创建验证码的最简单方法。 如下图所示。

Note: Don’t use this method in live web projects because this implementation is already readable by attacker and he/she can manipulate it. Everything should be processed on server side. You can just use this captcha generation method in your school or college projects.

注意:不要在实时Web项目中使用此方法,因为攻击者已经可以读取此实现,并且他/她可以对其进行操作。 一切都应在服务器端进行处理。 您可以在学校或学院的项目中使用这种验证码生成方法。

JavaScript验证码示例 (JavaScript Captcha Example)

The below code generates a 4 digits captcha in JavaScript.

以下代码在JavaScript中生成4位数字的验证码。

<html>
<head><title>JavaScript Captcha Example</title></head>
<body onload="generateCaptcha()"><script>
var captcha;function generateCaptcha() {var a = Math.floor((Math.random() * 10));var b = Math.floor((Math.random() * 10));var c = Math.floor((Math.random() * 10));var d = Math.floor((Math.random() * 10));captcha=a.toString()+b.toString()+c.toString()+d.toString();document.getElementById("captcha").value = captcha;
}function check(){var input=document.getElementById("inputText").value;if(input==captcha){alert("Equal");}else{alert("Not Equal");}
}
</script><input type="text" id="captcha" disabled/><br/><br/>
<input type="text" id="inputText"/><br/><br/>
<button onclick="generateCaptcha()">Refresh</button>
<button onclick="check()">Submit</button></body>
</html>

Explanation

说明

In above script the generateCaptcha() function is used to generate the captcha as the page loads. This is done by the onload attribute in body tag. Inside generateCaptcha() we have used Math.floor((Math.random() * 10)) to generate a random number between 1 (included) and 10 (excluded). In this way we generate four random numbers and then join them to form a string. The toString() method is used to convert number to string. Now we set this string as value of captcha textbox.

在上面的脚本中,当页面加载时, generateCaptcha()函数用于生成验证码。 这是通过body标签中的onload属性完成的。 在generateCaptcha()内部,我们使用了Math.floor((Math.random()* 10))来生成一个介于1(包括)和10(排除)之间的随机数。 通过这种方式,我们生成四个随机数,然后将它们连接起来以形成一个字符串。 toString()方法用于将数字转换为字符串。 现在,我们将此字符串设置为验证文本框的值。

When Submit button is clicked the check() function is called that checks whether the entered captcha matches with original captcha or not. If they match, “Equal” alert is displayed otherwise “Not Equal” alert is displayed.

单击“ 提交”按钮时,将调用check()函数,该函数检查输入的验证码是否与原始验证码匹配。 如果它们匹配,则显示“等于”警报,否则显示“不等于”警报。

The Refresh button is used to regenerate the captcha.

刷新按钮用于重新生成验证码。

The above JavaScript captcha code is easy to understand, still if you are facing any problem then comment below.

上面JavaScript验证码很容易理解,但是如果您遇到任何问题,请在下面评论。

翻译自: https://www.thecrazyprogrammer.com/2016/03/javascript-captcha-example.html

JavaScript验证码示例相关推荐

  1. JavaScript 验证码示例

    在本教程中,您将获得 JavaScript 验证码示例. Captcha 用于确定填写和提交 Web 表单的用户是否为人类.在开发 Web 项目时,我们经常需要添加验证码功能. 所以在这里我分享了在 ...

  2. 2022年10月15号之JavaScript验证码

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.验证码页面 二.验证码逻辑 1.引入库 总结 前言 javaScript验证码 一.生成验证码 <div&g ...

  3. python验证码生成_Python 生成验证码示例

    对python这个高级语言感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编两巴掌来看看吧! 在web开发中经常用到验证码,为了防止机器人注册或者恶意登陆和查询等,作用不容小觑 但是验证码其实 ...

  4. JavaScript定时器示例

    JavaScript定时器示例 在前端,我们有很多功能需要用到定时器(Timing).譬如轮询,譬如定时关闭弹框,譬如实现秒表,譬如一段时间后跳转页面等等.因此,我们需要掌握定时器的用法. windo ...

  5. 微信小程序 获取手机号 JavaScript解密示例代码详解

    刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被 ...

  6. ASP.NET 2.0 HttpHandler实现生成图片验证码(示例代码下载)

    学习整理了一下 (一).功能 用HttpHandler实现图片验证码 (二).代码如下 1. 处理程序文件 ValidateImageHandler.ashx代码如下  1 <%@ WebHan ...

  7. springboot使用TemplateEngine修改邮箱后发送验证码示例

    文章目录 实体类 controller: 前端页面(Vue) 生成校验验证码service: ftl模板: 真正发送邮箱的EmailConfigService 实体类 验证码pojo @Data @A ...

  8. Tabulator 交互式数据表格 javascript 库示例

    ​在本JavaScript 教程中,我们将看到如何使用tabulator js.在这个tabulator js 示例或tabulator js 教程中,我们将看到如何使用 tabulator js 立 ...

  9. Javascript验证码绘制下载

    1. 网页标签为图片格式 1.1 先观察以下网页启信宝, 此网页有多种验证方式随机变化, 这里只考虑下面的情况的验证码: 1.2 这里使用js创建画布, 并根据页面验证码标签信息进行原样绘制, 具体方 ...

最新文章

  1. 浅谈 UC 国际信息流推荐
  2. 视野逐渐变暗之跳转场景
  3. Linux I/O多路复用
  4. Influxdb1.2.2安装
  5. Windows自动启动程序的十大藏身之所
  6. 我的春招求职经验分享(已拿阿里京东网易等 5 个 offer)
  7. Go并发编程中的那些事[译]
  8. CNZZ数据专家使用方法?
  9. hdu 4907(并查集)
  10. TCMalloc内存分配器如何减少内存碎片?
  11. NSIS学习笔记(转)
  12. 诡异奇怪的“虚拟硬盘可用空间不足”告警
  13. Linux下的socket网络编程
  14. phpwind9.0 read.php 修改,phpwind 9.0后台执行任意php代码
  15. 计算机应用能力考试湖南成绩查询,湖南计算机等级考试成绩查询入口
  16. 计算机显示用户不存在,电脑出现未知设备提示驱动安装类无效或不存在如何解决...
  17. IE浏览器卸载命令行
  18. RTP(实时传输协议)
  19. 独秀日记:给我介绍一份工作
  20. The file “XXX.app” couldn’t be opened because you don’t have permission to view it.

热门文章

  1. 浏览器页面通知之notify
  2. 中国制造业经济继续处于增长周期 未来还需观察
  3. OpenToonz:使高端动画软件可访问
  4. Android使用APT编译时注解生成代码
  5. 再次加入OpenAI,特斯拉前AI总监Andrej Karpathy刚刚官宣!
  6. C++设计模式——组合模式(composite pattern)
  7. 华为云IoT智慧物流案例01 | 背景介绍与环境搭建
  8. 震荡上行,盯紧日线淘金线!
  9. PHPExcel 导出excel(xls)
  10. 以下不属于python特点的是什么_以下哪一个不属于python语言的特点-Python语言的特点有哪些...