Question

我有一个数据表，该数据表是在剃刀视图中使用C＃在ASP.NET MVC中呈现的。

让我用一个简短的例子来说明我要实现的目标。让我们以该表为例。

function setValueAttr(el) {
  el.setAttribute('value', el.value)
}

function aplicar() {
  var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
  var tableData = [];
  Array.from(myTab).forEach(input => {
    var tds = input.closest('tr').children;
    var obj = {};
    obj.A = tds[0].textContent;
    obj.B = tds[1].textContent;
    obj.C = tds[2].textContent;
    obj.D = tds[3].textContent;
    obj.E = input.value;
    tableData.push(obj);
  });
  console.log(tableData);
}

<table class="table table-bordered" width="100%" cellspacing="0" id="tableID">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center">val1</td>
      <td align="center">val2</td>
      <td align="center">val3</td>
      <td align="center">1500</td>
      <td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value="" min="0" max="1000"></td>
    </tr>
    <tr>
      <td align="center">val1</td>
      <td align="center">val2</td>
      <td align="center">val3</td>
      <td align="center">1500</td>
      <td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value="" min="0" max="1000"></td>
    </tr>
    <tr>
      <td align="center">val1</td>
      <td align="center">val2</td>
      <td align="center">val3</td>
      <td align="center">1500</td>
      <td align="center" class="myID"><input type="number" name="txtID" class="txtID" oninput="setValueAttr(this)" value="" min="0" max="1000"></td>
    </tr>
  </tbody>
</table>
<form>
  <button type="button" onclick="aplicar()">Aplicar</button>
</form>

这是将数据从列E的最后一个输入中包含数据的行中提取数据到数组中

但是即使我在所有输入上都设置了属性max="1000"，我也可以输入任意数量的数据，该如何解决呢？

在MVC视图中，而不是本例中的静态最大值，我有一个foreach表示从数据集中获取的数据表，将其声明为@my_value会输出不同的值在max=""属性中，但这不会阻止我像此示例中那样写任何值

Answer 1

您可以在脚本函数中添加一个简单的添加项以检查最大数量。我认为除非您使用观察员，否则您将不得不检入javasctipt

Unsupported type Type[typeBasePage?]

Answer 2

使用javascript设置属性值很可能会绕过输入元素的验证机制。为什么使用JavaScript设置value元素？通过在输入元素本身中键入一个值来填充value属性。

Answer 3

添加了此属性

var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""]):valid');

它已修复，非常感谢大家，特别是解决问题的@HereticMonkey

验证内部输入值是否超过最大值

3 个答案: