使用JS(不是服务器端)创建CAPTCHA验证表单

时间:2016-07-13 08:12:25

标签: javascript jquery html css captcha

我想创建一个用于阻止垃圾邮件发送者的验证码,但是没有使用php和MySql来创建服务器端验证的技巧。 任何帮助将不胜感激......

3 个答案:

答案 0 :(得分:1)

我建议对使用静态的“ dummy.html”,因为简单的垃圾邮件发送者将解析此内容并发送HTTP发布请求,从而绕过验证码验证。 对于严重的垃圾邮件发送者,客户端解决方案将永远无法满足要求。 这是我的意思的基本实现: https://jsfiddle.net/goyqdv7z/1/

<html>
<!--                            action="invalid_captcha.html" IMPORTANT! SEE BELOW.! -->
<form method="post" id="idForm" action="invalid_captcha.html">
Form text goes here...<br/>
<div id="idCaptcha"/></div>
<input type="submit" value="Go!">
</form>
    // 1. add a <div id="idCaptcha" into your <form action="invalid_caption.html" />
    // 2. Replace the ULR
    function CreateCaptcha() {
        var a = Math.ceil(Math.random() * 9)+ '';
        var b = Math.ceil(Math.random() * 9)+ '';       
        var c = Math.ceil(Math.random() * 9)+ '';  
        var d = Math.ceil(Math.random() * 9)+ '';  
        var captchaCode = a + ' ' + b + ' ' + ' ' + c + ' ' + d ;
        document.getElementById("idCaptcha").innerHTML =
        '<div >Please type the following figures: '+a+', '+b+', number '+c+' and number '+d+'</div>'
        +'<input type="text" id="txtInputCaptcha" onkeyup="onChangeCaptcha();">'
        +'<input type="hidden" id="idCaptchaHidden" value="'+captchaCode+'">'
        ;
    }
    CreateCaptcha();
    function ValidCaptcha() { // valida los numeros ingresados
        var str1 = removeSpaces(document.getElementById('idCaptchaHidden').value);
        var str2 = removeSpaces(document.getElementById('txtInputCaptcha').value);
        return (str1 == str2);
    }
    function removeSpaces(string) { 
        return string.split(' ').join('').split(',').join('');
    } 

    function onChangeCaptcha(){
        if(ValidCaptcha()){
            var form = document.getElementById("idForm");
            form.action = form.action.replace("invalid_captcha.html", "mailform.php");
            form.style="background-color:#cfc;";
            document.getElementById("idCaptcha").style='display:none;';
        }
    }
</html>

答案 1 :(得分:0)

ReCaptcha等验证码有许多自动第三方解决方案。但是here你可以找到关于这种技术如何实际运作的解释

答案 2 :(得分:0)

HTML:

<!DOCTYPE html>
<html>
<head><title>JS Captcha by Ian L. of Jafty.com</title>
<style>
body{
background-color: #430000;
}
</style>
</head>
<body>
<form name="review" ACTION="newpg.html" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000">Enter Code ></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit"/>
</form>

使用Javascript:

function checkform(theform){
var why = "";

if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}

//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';

var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;

// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}

// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}

这只是一个没有样式的简单,但它工作正常。