如何创建简单的 javascript/jquery 客户端验证码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3196335/
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
How to create simple javascript/jquery client side captcha?
提问by Vlad Omelyanchuk
How to create simple javascript/jquery client side captcha?
如何创建简单的 javascript/jquery 客户端验证码？
回答by 3rgo
回答by Victor Machado
It can be done with HTML and a simple JavaScript code. Have a look at this:
它可以用 HTML 和一个简单的 JavaScript 代码来完成。看看这个：
function Captcha(){
var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'0','1','2','3','4','5','6','7','8','9');
var i;
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("mainCaptcha").innerHTML = code
document.getElementById("mainCaptcha").value = code
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
return true;
}else{
return false;
}
}
function removeSpaces(string){
return string.split(' ').join('');
}.capt{
background-color:grey;
width: 300px;
height:100px;
}
#mainCaptcha{
position: relative;
left : 60px;
top: 5px;
}
#refresh{
position:relative;
left:230px;
width:30px;
height:30px;
bottom:45px;
background-image: url(rpt.jpg);
}
#txtInput, #Button1{
position: relative;
left:40px;
bottom: 40px;
}<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="script.js"></script>
<body onload="Captcha();">
<div class="capt">
<h2 type="text" id="mainCaptcha"></h2>
<p><input type="button" id="refresh" onclick="Captcha();"/></p> <input type="text" id="txtInput"/>
<input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
</div>
</body>回答by Jan Willem B
here you are ;)
这个给你 ;）
var captchaText;
$(function() {
var pre = $('#captcha');
captchaText = pre.text();
pre.text('');
var lines = ['', '', '', '', '']
for (var ixLetter = 0; ixLetter < captchaText.length; ixLetter++) {
var letter = captchaText.substr(ixLetter, 1);
var letterLines = letters[letter];
for (var ix = 0; ix < 5; ix++) {
lines[ix] = lines[ix] + ' ' + letterLines[ix];
}
}
for (var ix = 0; ix < 5; ix++) {
pre.append(lines[ix] + '\n');
}
});
function check() {
if ($('#captchaCheck').val() == captchaText) {
alert('you are probably human');
} else {
alert('you probably made a mistake. Don\'t worry. To err is also human.');
}
}
var letters = {
h: [
'HH HH',
'HH HH',
'HHHHHH',
'HH HH',
'HH HH'
],
i: [
'II',
'II',
'II',
'II',
'II'
]
// etc
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="captcha">hi</pre> Please type what you see: <input id="captchaCheck" /> <input type="button" value="Check" onclick="check()" />回答by chiborg
Client-Side captchas do not provide the protection a server-generated captcha would because the server can not check if the solved captcha is solved correctly.
客户端验证码不提供服务器生成的验证码所提供的保护，因为服务器无法检查解决的验证码是否正确解决。
回答by Guffa
That is not possible.
这是不可能的。
You could create something that looks like a CAPTCHA, but it would only run when it's not needed, i.e. when the page is shown in a browser. When it's needed it won't run, as the program trying to break in won't run the client side script.
您可以创建一些看起来像 CAPTCHA 的东西，但它只会在不需要时运行，即当页面显示在浏览器中时。当需要它时它不会运行，因为试图闯入的程序不会运行客户端脚本。
回答by ptim
I agree with all the comments that client side captcha is fundamentally flawed, and I don't know know tough the hurdles have to be to mitigate any amount of spam...
我同意所有关于客户端验证码从根本上存在缺陷的评论，我不知道减轻任何数量的垃圾邮件的障碍必须是艰难的......
To get an impression of what you're up against, though, check xRumer and GSA in action: YouTube: xEvil vs GSA Captcha Breaker
不过，要了解您所面临的问题，请查看 xRumer 和 GSA 的实际效果：YouTube：xEvil 与 GSA Captcha Breaker
The software is also able to gather and decipher artificial intelligence such as security questions (i.e. what is 2+2?) often used by forums upon registration. Since the latest version of XRumer, the software is capable of collecting such security questions from multiple sources and is much more effective in defeating them.
该软件还能够收集和破译人工智能，例如论坛注册时经常使用的安全问题（即什么是 2+2？）。自 XRumer 的最新版本以来，该软件能够从多个来源收集此类安全问题，并且在击败它们方面更加有效。
References:
参考：
- How do spambots work? - Webmasters Stack Exchange (2010!)
- BotDetect: Pure JavaScript CAPTCHA Validation Problems
So, caveats aside, here's a trivial alternative using HTML5 validation that's probably as ineffective as the other posts here! Presumably spambots would just add formnovalidatebefore submission, and would identify a honeypot field.
所以，抛开警告不谈，这里有一个使用 HTML5 验证的微不足道的替代方法，它可能与此处的其他帖子一样无效！据推测，垃圾邮件机器人会formnovalidate在提交之前添加，并会识别蜜罐字段。
<form class="input">
<label for="number" class="title">
What is three plus four?
</label>
<br>
<input
name="number"
required="required"
pattern="(7|seven)"
oninvalid="this.setCustomValidity('Sorry, please enter the correct answer')"
oninput="this.setCustomValidity('')"
>
<!-- Bonus honeypot field, hidden from the user. The server should discard this response if it contains any input -->
<input name="decoy" style="display: none;" />
<input type="submit">
</form>回答by user11136783
function Captcha(){
var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'0','1','2','3','4','5','6','7','8','9');
var i;
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("mainCaptcha").innerHTML = code
document.getElementById("mainCaptcha").value = code
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
return true;
}else{
return false;
}
}
function removeSpaces(string){
return string.split(' ').join('');
}
<h1 This works pretty well. </h1>
回答by Scott Evernden
if your purpose is to simply deflect most bots, you might be able to get away with a simple script that chooses 2 numbers at random and asks user to add them.
如果您的目的是简单地偏转大多数机器人，您可以使用一个简单的脚本来随机选择 2 个数字并要求用户添加它们。
回答by user2808979
please try this
请试试这个
<script type="text/javascript">
$('#submitcapt').click(function(){
var captval = "This will not do nothing";
$.ajax({
type : "POST",
url : "externals/reCaptcha/ajaxaction.php",
data : {loadval:captval},
success : function( msg ) {
if(msg=="1"){
}else{
}
}
})
});
</script>
In ajaxaction.php please put the following code
在ajaxaction.php中请放入以下代码
<?php
session_start();
$val=$_POST['loadval'];
$message= $_SESSION['random_number'];
if($val==$message) {
echo "1";
}else{
echo "2";
}
?>
回答by user3743957
$(document).ready(function() {
DrawCaptcha();
});
function refreshCap() {
DrawCaptcha();
}
function DrawCaptcha() {
var a = Math.ceil(Math.random() * 10) + '';
var b = Math.ceil(Math.random() * 10) + '';
var c = Math.ceil(Math.random() * 10) + '';
var d = Math.ceil(Math.random() * 10) + '';
var e = Math.ceil(Math.random() * 10) + '';
var f = Math.ceil(Math.random() * 10) + '';
var g = Math.ceil(Math.random() * 10) + '';
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' ' + f + ' ' + g;
var test = document.getElementById("ContentPlaceHolder1_txtCapcha").value = code;
alert(test);
}
function ValidCaptcha() {
var str1 = removeSpaces(document.getElementById('ContentPlaceHolder1_txtCapcha').value);
var str2 = removeSpaces(document.getElementById('ContentPlaceHolder1_txtinputCapcha').value);
if (str1 != str2) {
alert("Properly enter the Security code.");
document.getElementById('ContentPlaceHolder1_txtinputCapcha').focus() return false;
}
}
function removeSpaces(string) {
return string.split(' ').join('');
}
