0

编辑： 添加 JSfiddle 以更好地演示

所以我不确定这是否是好的编程，但我有一个包含多个单元格的表格，其中一些单元格依赖于其他单元格（>、< 等）。我还有一个表格，其中的值也依赖于其他单元格。

我正在使用 XSLT 从 XML 动态生成这些表/表单。因此，根据 XML，页面看起来会有所不同并具有不同的数据。问题是我应该设计 XML 以使其具有对它所依赖的单个元素的引用吗？这样当我输入一个值时，我将检查输入的值是否满足依赖项的条件。在这个JsFiddle中，单元格有一个 data-valueLimits 明确告诉它需要检查哪个单元格

<tbody><tr class="tableRow">
<td ><input type="Text" id="1102" style="text-align:center;" data-valuelimits="&   
lt;=:1103"/></td>
<td><input type="Text" id="1103" style="text-align:center;" data-valuelimits="&  
gt;=:1102"/></td>
</tr></tbody>
</table>

我觉得这有点骇人听闻，因为我明确告诉它需要检查哪个元素。

如果我可以单击任何元素并查看某个地方，我希望有更多动态的东西。

例如，如果我取消关注第 1 列第 1 行中的单元格，我会触发一个事件，该事件查找然后列标题中的信息表明该列小于第 2 列。所以我然后获取第 2 列第 1 行中的单元格以检查是否第 1 列第 1 行中的单元格中的值小于第 2 列第 1 行中的单元格。但问题是它们必须组合在一起，而元素可以在任何地方。在这个JsFiddle中，data-valueLimits 位于标题中，我必须以编程方式获取信息，确定基于该信息的哪一列以及单元格未聚焦在哪一行以获得要比较的值。这样我就不需要知道它是什么单元格，而是位置。

<thead><tr>
<th ><label data-valuelimits="&lt;=:MaxNum" name="MinNum">Min Number</label></th>
<th class="dataTableHeader"><label data-valuelimits="&gt;=:MinNum" name="MaxNum">Max   
Number</label></th>
</tr></thead>

有人知道将两种方式结合起来的方法吗？

4

1 回答 1

0

构建自定义校验和验证实际上非常简单。您可能可以在现有框架（例如jQuery Validate ）上进行构建，但我想让这一切保持简单。

您可以data-checksum在需要校验和的元素上使用属性，并使用事件委托来捕获具有此属性blur的所有input[type="text"]元素的每个事件。在我的示例中，校验和inputA + inputB意味着该值需要等于分别命名为inputA和的字段的总和inputB。

注意：模糊在某些浏览器中不会冒泡，因此您可能无法使用事件委托。将事件侦听器添加到所有元素可能会更安全。

例如

HTML

<input name="inputA" type="text">
<input name="inputB" type="text">
<input name="inputC" type="text" data-checksum="inputA + inputB">

JS

$(function () {

    var spacesRx = /\s/g,
        wordBoundaryRx = /\b/,
        operatorsRx = /[+\-*\\]/;

    $(document).on('blur', 'input[type=text][data-checksum]', function (e) {
        var $this = $(e.currentTarget),

            //default operator
            operator = '+',

            //naive parsing of the checksum expression
            parts = $this.data('checksum').replace(spacesRx, '').split(wordBoundaryRx),

            //calculate the result of the checksum expression
            result = parts.reduce(function (res, item) {
                if (operatorsRx.test(item)) {
                    operator = item;
                    return res;
                }

                //evil eval to shorten code example
                return eval('res' + operator + '=' + ($('input[type=text][name="' + item + '"]').val() || 0));

            }, 0);

        if (result !== parseInt($this.val(), 10)) {
            console.warn('error, expecting ' + result + ' for field ' + $this.prop('name'));
        }
    });
});

注意：还请注意，验证配置不必存储在标记中。

编辑：

是的，这就是我的想法，但我觉得这很骇人听闻，因为我在某种意义上是“硬编码”的东西，比如明确告诉它 inputA 和 inputB。但如果这是我猜的唯一方法。

好吧，如果没有任何算法可以用来根据正在验证的元素的唯一知识来确定规则，那么除了指定规则之外别无他法。除非你是查克·诺里斯……

于 2013-09-24T20:46:50.513 回答