我有这样的场景，我有 4 个下拉框，您可以在其中为车库和车库内的棚屋选择 CM。
我想在这些情况下向用户提示消息/错误:
- 棚屋的宽度选择大于长度。
- 车棚的宽度和长度至少比车棚小60厘米
- 仅选择其中一个棚屋尺寸
表格看起来像这样
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
<br>
Length of shed:<br>
<select name="lengthShed">
<option value="0">I do not want a shed</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select name="widthShed">
<option value="0">I do not want a shed</option>
<option value="18=">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
最佳答案
将函数绑定(bind)到您的<select>元素的 onchange 属性。
let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].onchange = function(){
// Check for your conditions
// If your warning conditions are met, prompt user
}
}
也就是说，假设您希望在用户更改选择值之一时进行验证。
如果您想通过单击按钮进行验证，则可以将该函数绑定(bind)到按钮的单击事件。
let button = document.getElementById(buttonID);
button.onclick = function(){
// Check for your conditions
// If conditions are met, prompt user
}
要提示用户，您可以使用简单的 alert()您将消息传递给的地方。或者制作一个更复杂的函数来执行自定义操作。
至于你的条件，这听起来像是商业数学。可能需要将您的问题分成多个问题，因为有很多可能的遮阳篷。
将 ID 添加到您的选择中可能会更容易，这样您就可以通过 document.getElementById(idString) 获取它们。然后你可以通过 document.getElementById(idString).value 获取它们的值。要在数学求解中使用它，您需要解析 <select> 的字符串。将作为值返回，如下所示 parseInt(document.getelementById(idString).value) .
关于javascript - 如何使用 javascript 验证用户输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50379150/