Question

修改添加了JSfiddle以更好地演示

所以我不确定这是不是很好的编程，但我有一个包含多个单元格的表格，其中一些依赖于其他单元格（＆gt;，＆lt;等等）我还有一个表格，其中值依赖于对其他人也。

我正在使用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>

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

如果我可以点击任何元素并且只是在一个地方看一下，我希望有一些更动态的东西。

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

<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>

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

Answer 1

实际上，构建自定义校验和验证非常简单。你可以建立在jQuery Validate之类的现有框架上，但是我想保持这一切。

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

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

E.g。

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

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

编辑：

是的，这就是我的想法，但我觉得这是非常hackish，因为我在某种意义上“硬编码”的事情，如明确告诉它输入A和输入B.但如果这是我猜的唯一方式。

如果没有任何算法可以用来根据对哪个元素进行验证的唯一知识来确定规则，那么除了指定规则之外别无他法。 除非你是查克诺里斯......

分配直接值的良好编程习惯

1 个答案: