jQuery 验证数据属性中的自定义规则

jQuery validate custom rule in data attributes

我有一个已经有一些验证规则的输入文本

<input type="text" value="" placeholder="Write the code here" 
       name="myCode" id="myCode" data-rule-required="true" 
       data-msg-required="Required field" class="form-control" 
       aria-required="true">

并创建了自定义规则来验证代码的语法

$("#myCode").rules("add", { checkCode: 
    function () { 
        return $('input[name=codeText]').val(); 
    } 
});

使用此方法,我定义 myCode 也应使用 checkCode 方法进行验证,该方法又在输入中接收 codeText.

的值

这真的很好用。但是,为了保持代码干净,我想将规则定义移动到 data-* 属性中,但我不明白如何编写代码来动态传递 return $('input[name=codeText]').val() 的等价物。请看下面的问号。

<input type="text" value="" placeholder="Write the code here" 
       name="myCode" id="myCode" 
       data-rule-required="true" data-msg-required="Required field" 
       data-rule-checkCode="????" data-msg-checkCode="Invalid code" 
       class="form-control" aria-required="true">

我必须在属性值中输入什么???

编辑

根据,我最终将所有选择器都放在属性上。像这样:

<input type="text" value="" placeholder="Write the code here" 
   [...]
   data-rule-checkCode="input[name=codeText]" 
   [...]>

并在我的方法中像这样使用它

$.validator.addMethod("checkCode", function(value, element, param) {
    return $(param).val();
}, '...');

and have created a custom rule to validate the syntax of the code

$("#myCode").rules("add", { checkCode: 
    function () { 
        return $('input[name=codeText]').val(); 
    } 
});

.rules() 方法不是 创建 自定义规则的方法。这只是您如何声明 特定输入的现有规则。

的。 .addMethod() 方法是您 创建 自定义规则的方式。

jQuery.validator.addMethod("checkCode", function(value, element) {
    return $('input[name=codeText]').val();
}, 'Please enter a valid email address.');

然后您可以使用.rules('add')将其分配给您的字段...

$('input[name="myCode"]').rules('add', {
    checkCode: true
});

参见http://jqueryvalidation.org/jQuery.validator.addMethod/


或者,您可以通过将 name 作为参数传递来使该方法通用...

jQuery.validator.addMethod("checkCode", function(value, element, param) {
    return $('input[name=' + param + ']').val();
}, 'Please enter a valid email address.');

然后分配它到你的领域...

$('input[name="myCode"]').rules('add', {
    checkCode: "codeText"
});

就使用数据属性而言,不清楚为什么在动态使用 .rules() 方法时需要这样做。

也许在您正确创建 checkCode 规则后,您可以简单地使用 data-rule-checkCode="true"data-rule-checkCode="codeText".

声明它