Question

我有这种情况，我有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>

Answer 1

将函数绑定到您的var vals = ['val1','val2','val3']; vals.forEach((val, index) => { console.log(`Index: ${index} | Val: ${val}`); }); // Output // Index: 0 | Val: val1 // Index: 1 | Val: val2 // Index: 2 | Val: val3元素onchange属性。

<select>

也就是说，假设您希望在用户更改其中一个选择值时进行验证。

如果要通过单击按钮进行验证，则可以将该功能绑定到按钮的单击事件。

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

要提示用户，您可以使用传递邮件的简单let button = document.getElementById(buttonID); button.onclick = function(){ // Check for your conditions // If conditions are met, prompt user }。或者做一个更精细的功能来做一些自定义的事情。

至于你的情况，这听起来像商业数学。可能需要在这里将问题分成多个问题，因为有很多可能的问题。

您可以更轻松地向选择中添加ID，以便通过alert()获取ID。然后，您可以通过document.getElementById(idString)获取其值。要在数学求解中使用它，您需要解析document.getElementById(idString).value将作为值返回的字符串，如<select>。

如何使用javascript验证userinput

1 个答案: