纯 JavaScript/jQuery/HTML 验证码

Question

有人可以给我发一个链接，或者给我提供一个纯 Javascript/jQuery 验证码的示例吗？因为我可以看到很多 PHP/C# 后端的示例。但我只需要 Javascript 。

谢谢 ！！

Answer 1

查看：
http://www.google.com/recaptcha/intro/

此处演示：
http://www.google.com/recaptcha/api2/demo
或者
http://www.finalwebsites.com/demos/custom-captcha-image-脚本/

=============================简而言之=============== =====

将代码片段添加到页面以使验证码发生：

<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="YOUR_KEY_1"></div>

每当用户完成挑战时，就会填充一个名为 g-recaptcha-response 的文本区域，其中包含值，您将收集该值并发送以下请求以验证它：
https://www.google.com/recaptcha /api/siteverify?secret=YOUR_KEY_2&response=TOKEN&remoteip=IPADDRESS

使用js获取IP可能比较麻烦：
http://www.ipify.org/

Answer 2

我现在正在研究替代验证码。如果您只使用它的客户端部分，假设您只想在浏览器中显示某些内容，那么您将拥有您想要的内容。它不完全是纯 javascript，因为它仍然使用 api 来获取图片，并且看起来足够酷：D

http://photocaptcha.cu .cc

这将涉及在您这边包含一个脚本，但如果您不验证答案，则没有多大意义；）

Answer 3

这里有一个关于带有验证码的 jQuery 教程； http://www.tutorialcadet.com/jquery-advanced-ajax-验证码验证/

Answer 4

你好，AlexC，你可以在客户端验证你的谷歌验证码 100%工作对我来说验证你的谷歌验证码只需看下面的代码

这段代码位于 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" />

这段代码放在调用 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; 
    }
}

Answer 5

我写了一篇关于使用 PHP 和 jQuery 制作简单数学验证码的教程，因此无论启用或不启用 Javascript 都可以使用。这应该很容易集成到您自己的脚本中，或者您可以按原样使用它。您可以下载该项目，解压 zip 文件，然后它就可以开箱即用。我希望你觉得这很有用。

使用 jQuery 和 PHP 制作简单的数学验证码
http://www.sinawiwebdesign.com/博客/主题/编程/jquery-and-php-and-catcha-tutorial/

Answer 6

您是否只是因为听起来很怪异就想添加验证码？
除非确实需要，否则不要使用它。

Answer 7

我认为这不是一个好主意，因为如果在客户端（js）中进行验证，有人可以编写脚本来读取正确的答案。

---

编辑

无论如何，如果你想要一个无用的验证码，你可以使用这个：

参见jsfiddle。

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

$(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");
        }
    });
});

---

编辑2：

我的“验证码”黑客：

// captcha hack
$(document).ready(function() {
     $("#b").val(eval($("#a").val()));
});

参见jsfiddle.

Answer 8

这没有道理……如果没有后端检查，验证码就没用了。无论如何，机器人不使用 JavaScript。你要做的就是惹恼你的用户。