jQuery在元数据标记和消息中验证具有多个参数的自定义验证器

Question

我想使用jQuery Validate在元数据标记中验证年龄介于两年之间,并将年份指定为参数.

我遇到的问题是我无法将参数作为对象传递,因此我不知道如何在错误消息中访问它们(并且无法在其上找到任何文档).

HTML

<input type="text" name="dob" id="dob" validAge="[17,66]" />

JavaScript的

jQuery.validator.addMethod('validAge', function (value, element, params) {
        value = eLifeViewModel.age();
        if (value === '') {
            return false;
        }
        var range = JSON.parse(params);
        return value > range[0] && value < range[1];
    }, $.format('Applicants must be older than {0} and younger than {1} years of age'));

{0}的输出是我的参数字符串,{1}是HTTPInputElement.

我现在已经编写了一个minAge和maxAge函数来解决这个问题,但我仍然希望得到一个解决方案.

Answer 1

这确实有效,至少在最新的jQuery/Validate中是这样.这是一个显示一些自定义验证器的小提琴,其中3个带有一系列参数:http://jsfiddle.net/jbubriski/YQgEq/120/

以下是采用字符串参数的示例之一.而不是说data-rule-customname="true",你指定参数data-rule-customname='["string",1,2,3]'.

(注意引号的翻转...使用单引号表示字符串似乎不起作用.使用双引号)

标记:

<div>
    Custom 3 (Requires 'pig' or 'mouse'): <input type="text" id="custom3" name="custom3" data-rule-required="true" data-rule-customv3='["pig","mouse"]' data-msg-customv3="Enter a cool animal name!" />
</div>

JS:

jQuery.validator.addMethod("customv3", function(value, element, params) {
    if (this.optional(element))
        return true;

    for (var i = 0; i < params.length; i++)
        if (value == params[i])
            return true

    return false;
}, jQuery.validator.format("Please enter one of the following values: {0} {1}"));

以上示例的唯一问题是,如果您期望n参数,我不确定是否有动态生成错误消息的方法.当前代码工作正常,但假定2个参数.

我还有一篇博文,详细介绍了使用基于属性的验证的其他方面:http://johnnycode.com/2014/03/27/using-jquery-validate-plugin-html5-data-attribute-rules/

Answer 2

你找不到文档，因为你做不到。

使用 jQuery Validation 插件和自定义方法，validAge当您需要传递参数时，无法内联声明规则。

<input type="text" name="dob" id="dob" validAge="[17,66]" />

只有某些可以用布尔值声明的规则（可以声明为class名称），或者同时也是 HTML5 验证属性的规则可以声明为内联。

对于带有参数的自定义方法，它必须（可以）在方法内声明.validate()...

$('#myform').validate({
    // your options, rules, etc,
    rules: {
        dob: {
            validAge: [17,66]
        }
    }
});

编辑：

正如@John Bubriski 所指出的，这应该有效。OP 没有在他的自定义方法中正确访问参数。

OP正在使用JSON.parse...

var range = JSON.parse(params);

这会在控制台中出现语法错误，因为它无法识别params为有效的 JSON 字符串。params不需要解析变量。

参数以 、 等形式传递到函数中，因此params可以直接访问它们。params[0]params[1]

jQuery.validator.addMethod('validAge', function (value, element, params) {
    value = eLifeViewModel.age();
    if (value === '') {  // <- You do NOT need this! 
    /* Use the "required" rule instead of this conditional */
        return false;
    }
    return value > params[0] && value < params[1];
}, $.format('Applicants must be older than {0} and younger than {1} years of age'));