纯 JavaScript/jQuery/HTML 验证码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3614467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure JavaScript/jQuery/HTML captcha
提问by AlexC
can somebody sent me a link, or to provide me an example with pure Javascript/jQuery captcha. Because I can see a lots of examples with PHP/C# ... back end. But I need just Javascript .
有人可以给我发一个链接，或者给我提供一个纯 Javascript/jQuery 验证码的例子。因为我可以看到很多 PHP/C# 的例子......后端。但我只需要 Javascript 。
Thanks !!
谢谢 ！！
回答by Topera
I think this is not a good idea, because if validation is made in client (js), somebody can make a script to read the correct answer.
我认为这不是一个好主意，因为如果在客户端（js）中进行验证，有人可以制作一个脚本来读取正确的答案。
EDIT
编辑
Anyway, if you want a useless captcha, you can play with this:
无论如何，如果你想要一个无用的验证码，你可以玩这个：
See in jsfiddle.
请参阅jsfiddle。
HTML
HTML
Pseudo-Human check.
<br/>How much is: <input type="text" id="a"/>
<br/>Answer:<input type="text" id="b"/>
<br/>
<input type="button" id="c" value="Go!"/>
JS
JS
$(document).ready(function() {
var n1 = Math.round(Math.random() * 10 + 1);
var n2 = Math.round(Math.random() * 10 + 1);
$("#a").val(n1 + " + " + n2);
$("#c").click(function() {
if (eval($("#a").val()) == $("#b").val()) {
alert("Ok! You are human!");
} else {
alert("error");
}
});
});
EDIT 2:
编辑 2：
My "captcha" hack:
我的“验证码”黑客：
// captcha hack
$(document).ready(function() {
$("#b").val(eval($("#a").val()));
});
See in jsfiddle.
请参阅jsfiddle。
回答by DGM
That doesn't make sense... without a backend check, the captcha is useless. bots don't use javascript anyway. All you'd be accomplishing is to annoy your users.
那没有意义……没有后端检查，验证码就没有用了。机器人无论如何都不使用 javascript。你要做的就是惹恼你的用户。
回答by HoaPhan
Check out: http://www.google.com/recaptcha/intro/
查看：http: //www.google.com/recaptcha/intro/
Demo here: http://www.google.com/recaptcha/api2/demoOR http://www.finalwebsites.com/demos/custom-captcha-image-script/
演示在这里：http: //www.google.com/recaptcha/api2/demo或 http://www.finalwebsites.com/demos/custom-captcha-image-script/
===========================IN SHORT====================
============================ 简短内容==================
Add the code snippet to the page for the captcha to occur:
将代码片段添加到页面以进行验证码：
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_KEY_1"></div>whenever user complete the challenge, a textArea named g-recaptcha-response with value is populated, you will collect that value and send below request to validate it: https://www.google.com/recaptcha/api/siteverify?secret=YOUR_KEY_2&response=TOKEN&remoteip=IPADDRESS
每当用户完成挑战时，就会填充一个名为 g-recaptcha-response 的带有值的 textArea，您将收集该值并发送以下请求以对其进行验证：https: //www.google.com/recaptcha/api/siteverify?secret = YOUR_KEY_2&response=TOKEN&remoteip=IPADDRESS
Getting the IP using js may be troublesome: http://www.ipify.org/
使用js获取IP可能比较麻烦：http: //www.ipify.org/
回答by patryk
I'm working on an alternative captcha right now. If you'll use only client-side part of it, you'll have what you want assuming you want something just to show in the browser. It's not exactly pure javascript, since it still uses api to get a picture, and looks cool enough :D
我现在正在研究替代验证码。如果您只使用它的客户端部分，那么假设您只想在浏览器中显示某些内容，您将拥有所需的内容。它并不完全是纯 javascript，因为它仍然使用 api 来获取图片，而且看起来很酷：D
It would involve including one script on your side, but it doesn't make much much sense if you don't validate the answers ;)
这将涉及在您身边包含一个脚本，但如果您不验证答案，则没有多大意义；)
回答by Pravin Sharma
Hi AlexC you can validate your google recaptcha at client side also100% workfor me to verify your google recaptcha just see below code
This code at the html body:
嗨，AlexC，您可以在客户端验证您的 google recaptcha，也可以100%为我验证您的 google recaptcha，只需查看下面的代码
html 正文中的此代码：
<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div>
<span id="captcha" style="margin-left:100px;color:red" />
This code put at head section on call get_action(this) method form button:
此代码放在调用 get_action(this) 方法表单按钮的 head 部分：
function get_action(form) {
var v = grecaptcha.getResponse();
if(v.length == 0)
{
document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty";
return false;
}
if(v.length != 0)
{
document.getElementById('captcha').innerHTML="Captcha completed";
return true;
}
}
回答by cocacola09
There is a tutorial on jQuery with captcha located here; http://www.tutorialcadet.com/jquery-advanced-ajax-validation-with-captcha/
有一个关于 jQuery 的教程，这里有一个验证码；http://www.tutorialcadet.com/jquery-advanced-ajax-validation-with-captcha/
回答by Laith
I wrote a tutorial on making a simple math captcha using PHP and jQuery, so it works with or without Javascript enabled. This should be very easy to integrate into your own scripts, or you can use it as is. You can download the project, extract the zip file, and it works out of the box. I hope you find this useful.
我写了一个关于使用 PHP 和 jQuery 制作简单数学验证码的教程，因此它可以在启用或不启用 Javascript 的情况下工作。这应该很容易集成到您自己的脚本中，或者您可以按原样使用它。您可以下载该项目，解压缩 zip 文件，它开箱即用。希望这个对你有帮助。
Making a Simple Math Captcha using both jQuery and PHP http://www.sinawiwebdesign.com/blog/topics/programming/jquery-and-php-and-catcha-tutorial/
使用 jQuery 和 PHP 制作简单的数学验证码 http://www.sinawiwebdesign.com/blog/topics/programming/jquery-and-php-and-catcha-tutorial/
回答by Ashit Vora
Do you want to add CAPTCHA just because it sounds geeky? Don't use it unless it is really needed.
你想添加验证码只是因为它听起来很怪异吗？除非真的需要，否则不要使用它。
