使用 javascript 在 php 中进行验证码验证答案

【问题标题】：captcha validation in php using javascript使用 javascript 在 php 中进行验证码验证
【发布时间】：2013-10-25 22:49:08
【问题描述】：

我有一个 cmets 表单，它使用 ajax 使用弹出菜单显示 cmets 框，并且在提交评论时，评论会注册到相应的帖子（无需任何页面刷新）。我想在此表单中添加验证码。

我尝试实现以下生成一个小的随机数验证码的 javascript 代码。

<p>

      <label for="code">Write code below > <span id="txtCaptchaDiv" style="color:#F00"></span><!-- this is where the script will place the generated code -->

      <input type="hidden" id="txtCaptcha" /></label><!-- this is where the script will place a copy of the code for validation: this is a hidden field -->

      <input type="text" name="txtInput" id="txtInput" size="30" />

</p>

上面的html用于显示生成的验证码和一个文本输入，供用户输入代码。

以下是生成代码的javascript代码 -

<script type="text/javascript">
//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;  
</script>

下一个 javascript 代码用于验证验证码 -

<script type="text/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;
    }
}

// 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('');
}

</script>

此代码在不与 cmets 表单结合使用时可以正常工作。与 cmets 表单结合时，验证未完成。

对于基于 ajax 的 cmets 表单，提交按钮在提交评论时传递一个隐藏的输入变量，该变量将其与相应的帖子相关联。这是我的 cmets 部分的提交按钮代码 -

<button type="submit" class="comment-submit btn submit" id="submitted" name="submitted" value="submitted"><?php _e( 'Submit', APP_TD ); ?></button>

<input  type='hidden' name='comment_post_ID' value='<?php echo $post->ID; ?>' id='comment_post_ID' />

所以基本上我希望我的代码首先在评论表单的提交按钮上检查验证码值，如果正确，我只想使用 ajax 功能提交评论。

【问题讨论】：

您当前创建和验证 CAPTCHA 的策略是个坏主意，请参阅例如here - 为了让您的验证码有任何保护网页的意义，您必须在服务器端生成它，而不是与客户端共享解决方案。通过将 txtCaptcha 中的值复制到 txtInput 中，您的密码很容易被破解。
哦，原来如此，所以我想我已经使用 php 本身建立了一个更安全的验证码。
在 PHP 中将验证码分配给会话，以便您检查输入和实际验证码文本...如果您想要它 ajax，只需在生成验证码的 ajax 调用上放置一个链接..
还可以考虑使用reCAPTCHA 而不是自己滚动 - 它的文档非常完善且安全。 Here is their PHP documentation
嗨，Froxz，感谢您的评论，您能解释一下我将如何在 ajax 调用上放置链接吗？

标签： javascript php jquery html ajax

【解决方案1】：

仅将 Javascript 用于验证码并不是一个好主意。因为您的安全性仅在客户端完成。

您的解决方案是使用一种方法停止您的表单提交，并且仅当您的验证码函数返回 true 时，然后提交表单数据。这可以通过不同的方式完成，例如 jquery：

$('.comment-submit').click(function(e){
  e.preventDefault();
  if (ValidCaptcha()) {
    yourFormElement.submit();
  }
});

【讨论】：