jQuery Validation Plugin - 只刷新验证码一次

时间:2013-12-07 12:31:07

标签: jquery jquery-validate captcha

我正在使用自定义验证码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,消息功能将更新图片src的新#captchaimage。一切正常,但只是第一次。我想远程响应消息是缓存的。

此外,如果我在远程远程响应消息中输出Math.random(),它将不会更新,也许可能存在问题。

1 个答案:

答案 0 :(得分:0)

您的代码:

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选项仅用于生成自定义消息,因此您应该在success方法的remote响应时触发新的验证码图像。

更像这样......

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,   并且可以使用任何falseundefinednull作为无效元素   默认消息; 或字符串,例如。 “这个名字已经被拿走了,试试吧   peter123而不是“显示为错误消息。

您还可以利用此功能在服务器端生成自定义消息。实际上,由于您无论如何都需要在此字段上调用remote,因此您的minlength字段的所有验证规则(maxlengthcontactform_captcha等)都可以在服务器上完成 - 侧。从服务器返回的任何字符串都将自动成为错误消息。

重要提示:

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

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