Question

我试图为字段Total制作验证条件。项目总成本无效：项目总成本的最大金额为9,999,999,999,999.99。一旦超过此值，文本和文本的边框将为红色。非常感谢任何帮助。

<tr style="height:35px">
  <td> </td>
  <td align="center"><strong>TOTAL</strong></td>
  <td align="center">
    <input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" value="" type="text" data-bind="attr: {'title': totalRequestfromNEHToolTip}, value: tRequestfromNEH">
  </td>
  <td align="center">
    <input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" disabled="" type="text" data-bind="attr: {'title': totalRequestfromNEHToolTip}, value: tnonFedThirdPartyGifts">
  </td>
  </td>
  <td align="center">
    <input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" value="" type="text" data-bind=" attr: {'title': totalCostShareToolTip}, value: tcostShare">
  </td>
  <!-- <td align="center"><input class="numeral form-control text-font-md" disabled="disabled" style="width:auto; height:30px" value="" type="text"></td> -->

var TOTAL = ko.computed(function() {
  var total = 0;
  var hasUserInput = false;
  if (tRequestfromNEH() != '' && tRequestfromNEH() != undefined) {
    hasUserInput = true;
    total = total + Number(String(tRequestfromNEH()).replace(/\,/g, ''));
  }

  if (tnonFedThirdPartyGifts() != '' && tnonFedThirdPartyGifts() != undefined) {
    hasUserInput = true;
    total = total + Number(String(tnonFedThirdPartyGifts()).replace(/\,/g, ''));
  }

  if (tcostShare() != '' && tcostShare() != undefined) {
    hasUserInput = true;
    total = total + Number(String(tcostShare()).replace(/\,/g, ''));
  }

  if (total == 0) {
    if (!hasUserInput)
      return '';
    else
      return formatNumber('0');
  } else {
    if (loading == false) {
      sendCommand('SAVE');
    }
    return formatNumber(total);
  }
});

Answer 1

使用knockout css绑定。当总数超过10时，文本和背景变为红色。https://jsfiddle.net/0o89pmju/57/

HTML

WidthPixels  = 2048
HeightPixels = 1536
DensityDpi   = Xhigh
Density      = 2
Xdpi         = 265.404
Ydpi         = 264.056

JS

<form>
  <div class="form-group">
    <label for="number1">number 1</label>
    <input type="number" class="form-control" id="number1" data-bind="textInput: number1">
  </div>
  <div class="form-group">
    <label for="number1">number 2</label>
    <input type="number" class="form-control" id="number2" data-bind="textInput: number2">
  </div>
   <div class="form-group" data-bind="css: {'has-error': total() > 10 }">
    <label class="control-label">Total:</label>
      <p class="form-control-static" data-bind="text: total, css: {'bg-danger': total() > 10 }"></p>
  </div>

</form>

如果total无效，请将字段文本和边框设置为红色

1 个答案: