查看CSS:invalid选择器当前是否在JavaScript中处于活动状态

See if CSS :invalid selector is currently active in JavaScript

本文关键字：JavaScript 活动状态 是否 CSS invalid 选择器 查看      更新时间：2023-09-26

我正在进行一个个人项目，并试图使用HTML5和JavaScript对表单进行一些错误验证。

我的HTML代码：

<body>
    <header>
        <h1>BPMeasure</h1>
    </header>
    <form onsubmit="return false" oninput="o.value = main();">
        Track A: <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" value="0"><br/>
        Track B: <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" value="0"><br/>
        <br />
        Output: <output name="o" for="a b"></output>
    </form>
</body>

我的JavaScript代码：

function calculate(track_a, track_b) {
    if(track_a > track_b) {
        return ((track_a - track_b) / track_a) * 100;
    } else if(track_a < track_b) {
        return ((track_a - track_b) / track_b) * 100;
    } else {
        return 0.0;
    }
}
function main() {
    var track_a = input_a.valueAsNumber;
    var track_b = input_b.valueAsNumber;
    var message = isTrackValid(track_a, track_b);
    if(message !== "") {
        return message;
    } else {
        return calculate(track_a, track_b);
    }
}

现在，isValid()是一个占位符。我希望这样，当有人在track_a或track_b中输入无效数字时，他们会在输出中收到错误消息（return message部分）。一个无效的数字特别是3+、3++、3.-4、5..5等。

为了弄清楚输入是否无效，我使用了以下css代码：

form input[type=number]:invalid {
    background-color: #ff8878;
}

不幸的是，我不得不使用这个，因为如果有人输入了一个无效的数字（就像上面的例子一样），它总是会返回NaN。这意味着，如果用户甚至没有键入任何内容，我们就有值NaN，这意味着它会不断显示错误消息。这就是为什么我有上面的invalidcss代码。

我的问题是，JavaScript中是否有一种方法可以检测input当前是否具有属性invalid，如果是，我可以返回错误消息，直到他们修复错误或清除输入？

正如在这个问题的答案中所说，

  1. inputElement.checkValidity()返回true或false
  2. CCD_ 15返回有效性状态对象。inputElement.validity.valid返回真/假

您可以使用inputs的checkValidaty（）方法。所有现代浏览器和IE10+都支持它。

来自MDN:

如果元素是约束验证的候选元素，则返回false，并且它不满足其约束。在这种情况下，它也会着火元素处的无效事件。如果元素不是，则返回true约束验证的候选者，或者如果它满足约束。

function isValid(input_a, input_b) {
  if(!input_a.checkValidity() || !input_b.checkValidity()) {
    return 'error';
  }
  return '';
} //isValid
function calculate(track_a, track_b) {
  if (track_a > track_b) {
    return ((track_a - track_b) / track_a) * 100;
  } else if (track_a < track_b) {
    return ((track_a - track_b) / track_b) * 100;
  } else {
    return 0.0;
  }
}
function main() {
  var track_a = input_a.valueAsNumber;
  var track_b = input_b.valueAsNumber;
  var message = isValid(input_a, input_b);
  if (message !== "") {
    return message;
  } else {
    return calculate(track_a, track_b);
  }
}
form input[type=number]:invalid {
  background-color: #ff8878;
}
<form onsubmit="return false" oninput="o.value = main();">
  Track A:
  <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" value="0">
  <br/>Track B:
  <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" value="0">
  <br/>
  <br />Output:
  <output name="o" for="a b"></output>
</form>

相关文章：