JavaScript 验证码示例-蒲公英云

JavaScript 验证码示例

#

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

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

所以在这里我分享了在 JavaScript 中创建验证码的最简单方法。它看起来如下图所示。

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

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>

解释

在上面的脚本中，generateCaptcha() 函数用于在页面加载时生成验证码。这是由body标签中的onload属性完成的。在 generateCaptcha() 中，我们使用 Math.floor((Math.random() * 10))来生成 1（包含）和 10（不包含）之间的随机数。这样我们就生成了四个随机数，然后将它们连接起来形成一个字符串。所述的toString（）方法被用于数字转换为字符串。现在我们将此字符串设置为验证码文本框的值。

当提交按钮被点击的检查（）函数被调用的是检查是否与验证码原来还是不输入验证码匹配。如果它们匹配，则显示“相等”警报，否则显示“不相等”警报。

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