jQuery验证插件-仅刷新一次验证码工作 [英] jQuery Validation Plugin - refresh captcha work only once

问题描述

我正在将自定义验证码与 jQuery验证插件

I'm using custom captcha with 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，然后将调用此函数:

What this code do is verify if there are 6 characters, then sends these 6 characters to captcha-check.php. If everything is ok captcha-check.php will return true, else it will return false and this function is called then:

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

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

On false, message function will update new src of image #captchaimage. Everything works, but only for the first time. I guess that remote response message is cached.

如果我在远程远程响应消息中输出Math.random()，它也不会更新，也许有问题.

Also if i output Math.random() in remote remote response message, it will not update and there perhaps maybe is problem.

推荐答案

您的代码:

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()并发送他们希望的任何数字.

I suggest that you convert your Math.random() function to PHP and into your server side script, rather than having +"?r=" + Math.random() in your JavaScript, which is not secure. After all, nothing is preventing somebody from over-riding Math.random() and sending any number they wish.

并且由于messages选项仅用于生成自定义消息，因此您应该改为根据remote方法的success响应来触发新的验证码图像.

And since the messages option is only meant for generating custom messages, you should trigger the new captcha image upon the success response from the remote method instead.

更多类似的东西...

Something a lot more like this...

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")
                }
            }
        }
    }
},

根据remote方法的文档:

As per the documentation for the remote method:

[服务器]响应被评估为JSON，对于有效元素，必须为true， 对于无效元素，可以是任何false，undefined或null 默认消息； 或字符串，例如该名称已被使用，请尝试 改为显示"peter123"作为错误消息.

The [server] response is evaluated as JSON and must be true for valid elements, and can be any false, undefined or null for invalid elements, using the default message; or a string, eg. "That name is already taken, try peter123 instead" to display as the error message.

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

You could also leverage this to generate custom messages on your server side. In fact, since you need to call remote on this field anyway, all validation rules (minlength, maxlength, etc.) for your contactform_captcha field could be done server-side. Whatever string is returned from the server will automatically become the error message.

重要提示:

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

I would disable onkeyup validation for the contactform_captcha field, otherwise, you're going to call the remote method on every keystroke thereby checking the captcha code before the user finishes entering the full captcha code. This will be a major issue since it's impossible for the user to match a captcha that changes on every keystroke.

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

这篇关于jQuery验证插件-仅刷新一次验证码工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！