如何使用 javascript 验证用户输入

Question

我有这样的场景，我有 4 个下拉框，您可以在其中选择 CM 作为车棚和车棚内的棚子。

我想在这些情况下用 messages/errors 提示用户：

棚屋选择宽大于长
棚子的宽度和长度至少比车库小 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>

Answer 1

将函数绑定到 <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
    }
}

也就是说，假设您希望在用户更改 select 的值之一时进行验证。

如果要通过单击按钮进行验证，可以改为将函数绑定到按钮的单击事件。

let button = document.getElementById(buttonID);
button.onclick = function(){
    // Check for your conditions
    // If conditions are met, prompt user
}

要提示用户，您可以使用一个简单的 alert() 来传递消息。或者做一个更复杂的函数来做一些自定义的事情。

至于你的条件，这听起来像是商业数学。可能需要将您的问题分成多个问题，因为有很多可能的问题。

为您的 select 添加 ID 可能更容易，这样您就可以通过 document.getElementById(idString) 获取它们。然后你可以通过document.getElementById(idString).value得到他们的值。要在数学求解中使用它，您需要解析 <select> 将 return 作为值的字符串，例如 parseInt(document.getelementById(idString).value).

如何使用 javascript 验证用户输入

how to validate userinput with javascript

javascript

html

input

prompt