【问题标题】:jquery validate: sum of multiple input valuesjquery validate:多个输入值的总和
【发布时间】:2010-11-19 12:46:57
【问题描述】:

我需要帮助来创建自定义方法来验证多个文本输入值的总和。

在表单中,我有可变数量的文本输入,提交时我需要验证同一组中输入值的总和是否正好为 100。

示例(第二组不应验证):

<input type='text' name='g1_number1' class='group1' value='20' />
<input type='text' name='g1_number2' class='group1' value='40' />
<input type='text' name='g1_number3' class='group1' value='40' />

<input type='text' name='g2_number1' class='group2' value='20' />
<input type='text' name='g2_number2' class='group2' value='40' />
<input type='text' name='g2_number3' class='group2' value='10' />

【问题讨论】:

    标签: jquery jquery-validate


    【解决方案1】:

    我是这样工作的:

    自定义验证规则:

    $.validator.addMethod(
        "sum",
        function (value, element, params) {
            var sumOfVals = 0;
            var parent = $(element).parent(".parentDiv");
            $(parent).find("input").each(function () {
                sumOfVals = sumOfVals + parseInt($(this).val(), 10);
            });
            if (sumOfVals == params) return true;
            return false;
        },
        jQuery.format("Sum must be {0}")
    );
    

    并像这样使用:

    $(".group1").rules('add', {sum: 100});
    $(".group2").rules('add', {sum: 100});
    

    【讨论】:

    • 嗨@Vertigo,我的工作与此类似,但是当我添加 $(".group1").rules('add', {sum: 100});
    • 最后,如果验证 sumOfVals == 参数,如果它是真的,你会错过动作的括号
    【解决方案2】:
    var sumOfValues=0;
    $(".group1").each(function(){
       sumOfValues+=$(this).val();
    });
    if(sumOfValues==100){
    
    }else{
    
    }
    

    或插件形式

    $.fn.validateValuesSum=function(value){
       var sumOfValues=0;
       this.each(function(){
         sumOfValues+=$(this).val();
       });
       if(sumOfValues==value){
          return true;
       }
       return false;
    }
    

    【讨论】:

    • val() 返回一个字符串,并且可能不会完全按照您的预期进行。使用parseFloat($(this).val())Number($(this).val()) 获取数值(或NaN,您可以检查无效值)。
    • 有没有办法在 jquery-validation 插件中实现它?
    猜你喜欢
    • 2011-09-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-12
    相关资源
    最近更新 更多