Question

我正在使用jQuery的验证插件，并希望验证许多动态添加的文本字段，以便根据单独的总计字段检查其总和。

我以前编写过自己的验证方法，但只有简单的验证方法采用了基本的正则表达式结构，很容易从additional-methods.js文件中重现。

具体来说，jQuery网站提供了一个使用addMethod() function做类似事情的简单示例：

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}"));

params参数的实现或多或少地记录在案。我能够找到如何将内容传递到a seperate stackoverflow thread中的参数。但是，在该示例中传入params的数组是静态的。我需要传递给params的数组基于在'runtime'处添加的动态添加的行来增长和缩小...

我上传了一个完全剥离的版本onto jsfiddle供您查看。 请注意，代码中有一些注释嵌入了我有疑问的位置，而且，我删除了删除功能，因为它只会增加混乱，并没有帮助说明这一点。

那么如何使用jQuery验证库来确保动态添加的字段添加到特定的总数？提前谢谢！

Answer 1

这是我的验证器版本。

http://jsfiddle.net/linkabi9/shBxv/

你会注意到，我没有参数的静态数字，而是传递一个选择器。数组中的一个元素是存放字段的选择器。我给每个现有的和新的存款输入一个类“setamount1”，你可以使用你想要的任何类。您设置此验证器的字段将是“总金额”字段。

我还在存款字段中添加了一个实时“更改”事件。这将在每次更改时运行验证。我必须警告你，这样就可以在整个表格上进行验证，而不仅仅是押金和存款。总场。

现在，您可以在同一表单/页面中多次重复使用此验证程序类型！

我继续将验证码放在下面。另外，验证器初始化的一个例子。

jQuery.validator.addMethod("depositsSum", function(value, element, params)
{       
    var amnts = 0;
    $(params[0]).each(function() {
        amnts += parseFloat($(this).val());
    });

    return this.optional(element) || amnts == parseFloat(value);
}, jQuery.format("Individual deposits must add up to the total!"));

$("#depositForm").validate({
    rules: {
        fullAmount: {
            depositsSum: [".amountset1"]
        }
    }
});

Answer 2

因此，首先您需要一种方法来计算所有动态字段的总和。一种方法是使用类标记所有这些字段。假设我们将它们称为“金额”。然后，您可以使用此

计算它们的总和

var total = 0;
$('#depositForm input.amount').each(function() {
   total += Number($(this).val());
});

现在，您需要将此总值传递给验证方法。由于javascript有闭包，你可以执行以下操作

$("#depositForm").validate({
    rules: { 
       fullAmount: {
          depositsSum: function() {
             var total = 0;
             $('input.amount').each(function() {
                total += Number($(this).val());
             });
             return total;
          }
       }
    }
});

此功能每次都会执行，其结果将是您的参数值。所以验证功能最终将是

function(value, element, total) {
    return this.optional(element) || value == total;
}

对于问题的第二部分，运行动态字段的验证，有两种方法。要么具有验证标记类，要么使用rule("add", )和rule("remove", )方法来插入/删除动态字段。以下是类方法的示例：让所有经过验证的字段（动态和总计）都具有类“checkSum”。然后：

$.validator.addClassRules("checkSum", {
    depositsSum: function() {
        var total = 0;
        $('input.amount').each(function() {
            total += Number($(this).val());
        });
        return total;
    }
});
$("#depositForm").validate();

这是JSFiddle of it all。

当然你会注意到这不会像你想象的那样有效。对于您的应用程序，您正在寻找的验证类型是由字段更改触发的完整表单验证，而不是字段验证。玩一下它，看看我在说什么

Answer 3

尝试在输入的html代码中使用这样的内容......

<input id="check" name="check" type="text" class="required math">

一旦你动态创建输入标签，然后根据你的添加方法进行验证..试试吧..

Answer 4

这包括添加和删除具有实时更新价格的行。 [download]

<html>

    <head>

        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">google.load("jquery", "1");</script>
        <script type="text/javascript">

            $(document).ready(
                function() 
                {
                    $('.add-row').click(
                        function()
                        {
                            addRow();
                            return false;
                        }
                    );

                    addRow();
                }
            );


            function addRow()
            {
                var newRow = '<li class="deposit"><input class="price"> <a href="#" class="remove">Remove</a></li>';

                $('.deposits').append(newRow);
                $('.deposit:last .price').select();

                setListeners();
            }

            function removeRow(val)
            {
                $(val).parents('.deposit').remove();

                sumDeposits();
            }

            function setListeners()
            {
                $('.price').each(
                    function()
                    {
                        $(this).keyup(
                            function() 
                            {
                                sumDeposits();
                            }
                        );
                    }
                );

                $('.remove').each(
                    function()
                    {
                        $(this).click(
                            function() 
                            {
                                removeRow(this);
                            }
                        );
                    }
                );
            }


            function sumDeposits()
            {
                var total = 0;

                $('.price').each(
                    function()
                    {
                        total += Number( $(this).val() );
                    }
                );

                $('.total').html(total);
            }

        </script>

    </head>

    <body>

        <h3>Total is <span class="total">N/A</span></h3>

        <p><a href="#" class="add-row">Add</a></p>

        <ul class="deposits"></ul>

    </body>

</html>

针对动态字段的jquery验证

4 个答案: