JavaScript验证码示例

article/2025/11/6 1:15:57

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验证码很容易理解，但是如果您遇到任何问题，请在下面评论。