gpt4 book ai didi

javascript - 查看 CSS 是否为 :invalid selector is currently active in JavaScript

转载 作者:行者123 更新时间:2023-11-28 02:57:33 24 4
gpt4 key购买 nike

我正在开展个人元素,并尝试使用 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_atrack_b 中输入无效数字时,他们会在输出中收到一条错误消息(返回消息 部分)。无效数字特别类似于 3+3++3.-45..5

为了确定输入是否无效,我使用了这个 css 代码:

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

不幸的是,我必须使用它,因为如果有人输入了无效数字(如上面的示例),它将始终返回 NaN。这意味着如果用户甚至没有输入任何内容,我们的值为 NaN,这意味着它会不断显示一条错误消息。这就是为什么我有上面的 invalid css 代码。

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

最佳答案

this question's answer 中所述,

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

关于javascript - 查看 CSS 是否为 :invalid selector is currently active in JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36304932/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com