jQuery Validation Plugin - 刷新验证码只工作一次答案

【问题标题】：jQuery Validation Plugin - refresh captcha work only oncejQuery Validation Plugin - 刷新验证码只工作一次
【发布时间】：2013-12-07 12:31:06
【问题描述】：

我正在使用带有jQuery Validation Plugin的自定义验证码

我的配置如下：

$('#contactform').validate({
        onkeyup: function(element, event) {
            $(element).valid();
        },
        errorElement: 'span',
        rules: {
            contactform_captcha: {
                minlength: 6,
                maxlength: 6,
                required: true,
                remote: /path/to/captcha-check.php
            },
        },
        messages: {
            contactform_captcha: {
                required: "No code, no email",
                minlength: function () {
                    return [
                    'Enter at least ' + (6 - parseInt($('#contactform_captcha').val().length)) +
                    ' more character(s) to go.'];
                },
                remote: function () {
                    $("#captchaimage").attr("src", /path/to/new/captcha.php+"?r=" + Math.random());
                    return ['Wrong code, therefore try again'];
                }
            },
        },
        success: function(label) {
            label.addClass("valid").text("Well done!")
        },
        submitHandler: function(form) {

            //submit form

        }    
    });
    $('span[class^="error"]:not(.valid)').remove();

此代码的作用是验证是否有 6 个字符，然后将这 6 个字符发送到 captcha-check.php。如果一切正常，captcha-check.php 将返回 true，否则将返回 false，然后调用此函数：

remote: function () {
    $("#captchaimage").attr("src", /path/to/new/captcha.php+"?r=" + Math.random());
    return ['Wrong code, therefore try again'];
}

在false 上，消息功能将更新图像#captchaimage 的新src。一切正常，但只是第一次。我猜远程响应消息被缓存了。

另外，如果我在远程远程响应消息中输出Math.random()，它不会更新，可能有问题。

【问题讨论】：

如前所述，您的 remote 方法在每次击键时都会被调用，因此，您尝试在每次击键时更改验证码图像。在这种情况下，用户不可能输入正确的验证码。

标签： jquery jquery-validate captcha

【解决方案1】：

您的代码：

messages: {
    contactform_captcha: {
        ....
        remote: function () {
            $("#captchaimage").attr("src", /path/to/new/captcha.php+"?r=" + Math.random());
            return ['Wrong code, therefore try again'];
        }
    }       
}

我建议您将 Math.random() 函数转换为 PHP 并转换为服务器端脚本，而不是在 JavaScript 中使用 +"?r=" + Math.random()，这不安全。毕竟，没有什么能阻止某人覆盖Math.random() 并发送他们想要的任何号码。

由于messages 选项仅用于生成自定义消息，因此您应该在remote 方法的success 响应上触发新的验证码图像。

更像这样的东西......

rules: {
    contactform_captcha: {
        // minlength: 6,   // <-- handle this in your PHP for remote
        // maxlength: 6,   // <-- handle this in your PHP for remote
        // rangelength: [6,6],  // <-- same as two rules above
        required: true,
        remote: {
            url: '/path/to/captcha-check.php',
            success: function (response) {
                if (response != true) {
                   // trigger a new captcha code from here
                   $("#captchaimage").attr("src", "/path/to/new/captcha.php")
                }
            }
        }
    }
},

As per the documentation for the remote method:

[server] 响应被评估为 JSON，并且对于有效元素必须为 true，对于无效元素，可以是任何false、undefined 或null，使用默认消息； 或字符串，例如。 “这个名字已经被占用了，试试 peter123 而不是”以显示为错误消息。

您还可以利用它在服务器端生成自定义消息。事实上，由于您无论如何都需要在该字段上调用remote，因此您的contactform_captcha 字段的所有验证规则（minlength、maxlength 等）都可以在服务器端完成。无论服务器返回什么字符串，都会自动成为错误信息。

重要提示：

我将禁用contactform_captcha 字段的onkeyup 验证，否则，您将在每次击键时调用remote 方法，从而在用户完成输入完整验证码之前检查验证码。这将是一个主要问题，因为用户不可能匹配每次击键都会更改的验证码。

onkeyup: function(element, event) {
    if ($(element).attr('name') != 'contactform_captcha') {
        $(element).valid();
    }
},

【讨论】：