【问题标题】:jquery-validate - addMethod - how to apply custom rule referencing two text boxes?jquery-validate - addMethod - 如何应用引用两个文本框的自定义规则?
【发布时间】:2011-11-24 23:43:05
【问题描述】:

我正在使用jQuery validation plugin,并且我想使用一种自定义方法,该方法在确定情况是否有效时将两个输入到两个不同文本框中的值考虑在内。

我知道add method 并且我找到了一个例子...

jQuery.validator.addMethod("math", function(value, element, params) { 
 return this.optional(element) || value == params[0] + params[1]; 
}, jQuery.format("Please enter the correct value for {0} + {1}"));

...它引用了两个元素,但我不清楚如何编写一个使用诸如此类的方法的规则?

为了便于讨论,假设我想使用这个示例方法,并且我有一个看起来像这样的表单..

<form id="TOTALSFORM" name="TOTALSFORM">
    <label for="LHSOPERAND">Input 1</label>
    <br />
    <input type="text" name="LHSOPERAND" id="LHSOPERAND" class="required" />
    <br />
    <label for="RHSOPERAND">End</label>
    <br />
    <input type="text" name="RHSOPERAND" id="RHSOPERAND" class="required" />
    <label for="TOTAL">End</label>
    <br />
    <input type="text" name="TOTAL" id="TOTAL" class="required" />
</form>

我还有其他像这样应用的规则:

$("#OPTREASON").rules("add", {
    required: true,
    min: 0,
    messages: {
        required: "Required input",
        min: "Please select a Reason"
    }
});

如何执行类似的操作来应用显示的示例自定义方法,以便将“TOTAL”检查为“LHSOPERAND”和“RHSOPERAND”的总和。

【问题讨论】:

    标签: jquery jquery-validate


    【解决方案1】:

    尝试以下方法:

    创建规则

    jQuery.validator.addMethod("checkTotal",function(value) {
        total = parseFloat($('#LHSOPERAND').val()) + parseFloat($('#RHSOPERAND').val());
        return total == parseFloat($('#TOTAL').val());
    }, "Amounts do not add up!");
    
    jQuery.validator.classRuleSettings.checkTotal = { checkTotal: true };
    

    输入

    <input type="text" name="TOTAL" id="TOTAL" class="required checkTotal" />
    

    初始化验证

    $(document).ready(function() {
        $("#TOTALSFORM").validate();
    });
    

    在这里提琴:http://jsfiddle.net/wTMv3/

    【讨论】:

    • 正是我想要的。非常感谢。
    • 感谢您提供如此完整的答案。只是为了完成更多:jQuery.validator.classRuleSettings.className = { methodName: true };
    • 如果我想同时添加两个这样的方法怎么办?
    猜你喜欢
    • 2011-04-10
    • 2010-09-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多