我正在进行一个个人项目,并试图使用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
,如果是,我可以返回错误消息,直到他们修复错误或清除输入?
正如在这个问题的答案中所说,
inputElement.checkValidity()
返回true或false- 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>