Question

我正在使用验证器插件向站点添加各种密码字段，每个密码字段在输入成功密码后发布相关下载链接。问题是，当输入正确的密码时，将显示所有下载链接，而不仅仅是相关链接。所有字段都将使用相同的密码，随着时间的推移会添加更多文件，我只想弄清楚如何仅显示相关的下载链接而不是所有这些链接。
这是一个jsfiddle（密码是'密码'）：http://jsfiddle.net/rqGWK/

jQuery的：

jQuery(document).ready(function(){

jQuery(".article-form").hide();
jQuery(".download-file").hide();

jQuery('.article-link').click(function() {
        jQuery(this).siblings('.article-form').fadeIn();
    });


    jQuery.validator.addMethod("pw_check", function (value) {
        return (value == 'password');
    }, "Invalid password");


    jQuery(".article-form").validate({
        rules: {
            password: {
                required: true,
                pw_check: true
            }
        },
        submitHandler: function (form) {
            jQuery(".article-form").hide();
            jQuery(".download-file").fadeIn("slow");
        }
    }); 

});

Answer 1

我不建议使用jQuery或任何客户端代码作为保护内容的工具。这不是真正的安全。

但要回答您的问题，请在.download-file中查找.parent()并打包您的.validate()函数，以便验证每个表单。

DEMO 已更新。

jQuery('.article-link').click(function () {
    if(jQuery(this).siblings('.download-file').css('display')=='none')
       jQuery(this).siblings('.article-form').fadeIn();
});

jQuery(".article-form").each(function () {
    jQuery(this).validate({
        rules: {
            password: {
                required: true,
                pw_check: true
            }
        },
        submitHandler: function (form) {
            jQuery(form).hide();
            jQuery(form).siblings(".download-file").fadeIn("slow");
        }
    });
});

Answer 2

这样的东西？

DEMO VIEW

jQuery(document).ready(function(){

 jQuery(".article-form").hide();
 jQuery(".download-file").hide();

var actual;
var validates = [];

 jQuery('.article-link').click(function() {
    actual = $(this).closest('.article-download');
if(!validates[actual.index()]){
    $(".article-form").hide()
    $(".article-form").eq(actual.index()).fadeIn();
}
});


jQuery.validator.addMethod("pw_check", function (value) {
    return (value == 'password');
}, "Invalid password");


jQuery(".article-form").validate({
    rules: {
        password: {
            required: true,
            pw_check: true
        }
    },
    submitHandler: function (form) {
        validates[actual.index()] = true;
        jQuery(".article-form").hide();
        jQuery(".download-file").eq(actual.index()).fadeIn("slow");
    }
 }); 

});

PS：客户端是可绕过的，记得做服务器端控制

jQuery验证器显示相关的下载链接

2 个答案: