Question

我正在处理个人项目，并尝试使用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，这意味着它会不断显示错误消息。这就是我上面有invalid css代码的原因。

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

Answer 1

您可以使用输入＆＃39; checkValidity() 方法。它是所有现代浏览器和IE10 +的supported。

来自MDN：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如this question's answer所述，

inputElement.checkValidity()返回true或false
inputElement.validity返回validity-state对象。 inputElement.validity.valid返回true / false

查看CSS：无效选择器当前是否在JavaScript中处于活动状态

2 个答案: