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

时间:2015-10-10 15:24:11

标签: jquery jquery-validate customvalidator

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

<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-*属性中移动规则定义,但我无法理解如何编写代码来动态传递返回$('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">

我要把什么放在属性值???

修改

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

<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();
}, '...');

1 个答案:

答案 0 :(得分:6)

  

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

$("#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"声明该规则。