【问题标题】:Captcha with jQuery Validation plugin带有 jQ​​uery 验证插件的验证码
【发布时间】:2022-05-09 21:01:55
【问题描述】:

我正在使用著名的jQuery Validation plugin,我想实现验证码控制。在演示部分的page 上有that 但似乎有一个问题:当您单击图像刷新时,它不会刷新!这是一个著名的插件,所以我没有发布代码,因为有很多 php 文件,也许你们中的许多人已经知道解决方案。如果需要,我会尝试发布它们。谢谢

编辑

// 索引

<?php

// Make the page validate
ini_set('session.use_trans_sid', '0');

// Include the random string file
require 'js/captcha/rand.php';

// Begin the session
session_start();

// Set the session contents
$_SESSION['captcha_id'] = $str;

?>
<form id="form">
             <div id="captchaimage">
                <a href="" id="refreshimg" title="Click to refresh image">
                    <img src="js/captcha/images/image.php?<?php echo time(); ?>" width="132" height="46" alt="Captcha image" />
                </a>
             </div>
             <label for="captcha">insert captcha:</label>
             <input type="text" maxlength="6" name="captcha" id="captcha" />

// newsession.php

<?php

// Include the random string file
require 'js/captcha/rand.php';

// Begin a new session
session_start();

// Set the session contents
$_SESSION['captcha_id'] = $str;

?>

// process.php

<?php

// Begin the session
session_start();

// To avoid case conflicts, make the input uppercase and check against the session value
// If it's correct, echo '1' as a string
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
    echo 'true';
// Else echo '0' as a string
else
    echo 'false';

?>

// rand.php

<?php

// Create a random string, leaving out 'o' to avoid confusion with '0'
$char = strtoupper(substr(str_shuffle('abcdefghjkmnpqrstuvwxyz'), 0, 4));

// Concatenate the random string onto the random numbers
// The font 'Anorexia' doesn't have a character for '8', so the numbers will only go up to 7
// '0' is left out to avoid confusion with 'O'
$str = rand(1, 7) . rand(1, 7) . $char;

?>

//验证

$("#form").validate({  
    rules: {

        'captcha':{
            required: true,
            remote: "js/captcha/process.php"
        }
    },

    messages: {
        'captcha': "error"  
    },

    onkeyup: false
});   

// 脚本刷新验证码

$(function(){
    $("#refreshimg").click(function(){
        $.post('js/captcha/newsession.php');
        $("#captchaimage").load('js/captcha/image_req.php');
        return false;
    });
});

// image_req.php

<?php

// Echo the image - timestamp appended to prevent caching
echo '<a href="" onclick="refreshimg(); return false;" title="Click to refresh image">
        <img src="js/captcha/images/image.php?' . time() . '" width="132" height="46" alt="Captcha image" />
      </a>';

?>

【问题讨论】:

  • 您的问题是什么?演示中的示例不起作用,或者在您自己的网站上对您不起作用?
  • 你可以把这个图片的链接。 会刷新
  • @ben:它在我自己的网站上不起作用,就像在演示中不起作用一样!
  • @croios:使用您的解决方案,它会刷新但会重新生成相同的图像!如果我再次点击刷新它重新加载整个页面!
  • 我在发布的代码和 #captchaimage 中都看不到 ID 为 #refreshimg 的任何元素

标签: php jquery jquery-validate captcha


【解决方案1】:
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.good {color: green;}
.bad {color: red;}
#captcha {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
</style>
<?php
function background($length = 6) {
$characters = "ABCDEF0123456789";
$string = "#";
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters) - 1)];}
return $string;
}
$f = background();
function signs($length = 6) {
$characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnoprstuvwxyz";
$string = "";
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters) - 1)];}
return $string;
}
$a = signs();
?>
<script>
$(function() {       //run when the document's ready, elements are loaded
$("#refresh").click(function() { 
$("#captcha").load(location.href + " #captcha");               
});
});   
</script>
<script>
$(function() {  
$("#send").click(function(evt) {
if ($('#check').val() === $('#verify').val()) {
$("#result").html("<h3 class='good'>Correct</h3>");
evt.preventDefault();
} else {
$("#result").html("<h3 class='bad'>Incorrect</h3>");
evt.preventDefault();
}
});
});   
</script>
<head>
<h1>Captcha all in one</h1>
<hr />
</head>
<body>
<div id="captcha" style="height: 50px; width: 125px; background-color: <?php echo        $f;   ?>"><font face="OCRB" style="font-size: xx-large;" color="<?php echo $a;  ?>">
<p id="secimage"><?php echo $a; ?></p></font><input type="text" id="check" value="<?php echo $a; ?>" style="display: none;"/></div>
<button id="refresh">&uarr;&darr;</button>
<input id="verify" type="text" placeholder="Enter code" />
<button id="send">Check</button>
<div id="result"></div>
</body>
</html>

【讨论】:

  • 与第三方工具一样,最好提供代码示例。另请注意,这些答案旨在生存多年并且仍然有用。恐怕免费文件共享网站尤其可能会随着时间的推移而腐烂。
猜你喜欢
  • 1970-01-01
  • 2015-06-16
  • 1970-01-01
  • 2018-06-20
  • 2013-05-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多