JavaScript函数中如何添加if语句校验多个输入变量实现负数输入报错

1. 校验逻辑放置位置 #

校验逻辑应该直接写在submit1函数内部，并且放在获取输入值之后、执行报价计算之前的位置，这样只有输入通过校验才会执行后续的计算逻辑，避免无效运算。

2. JavaScript 校验逻辑实现 #

你原来的伪代码存在语法问题，JS中需要先将输入的字符串转成数值类型，同时还要额外处理用户输入非数字的异常场景，修改后的函数逻辑如下：

function submit1(){
    // 获取输入值并转成整数
    const roomNum = parseInt(document.getElementById("numRooms").value);
    const totalSize = parseInt(document.getElementById("roomSize").value);
    const resultDom = document.getElementById("result");

    // 校验逻辑：只要有一个值是非数字/小于等于0，就提示错误
    if(isNaN(roomNum) || roomNum <=0 || isNaN(totalSize) || totalSize <=0) {
        resultDom.style.color = "red";
        resultDom.innerText = "输入无效，请输入大于0的正整数";
        // 直接return终止后续计算逻辑
        return;
    }

    // 校验通过才执行计算
    const estimate = totalSize * 5;
    resultDom.style.color = "green";
    resultDom.innerHTML = "您的预估报价为：$" + estimate;
}

3. 更友好的用户提示方式 #

相比普通的<p>标签展示，有两种体验更好的方案可选：

• 轻量场景可以直接用JS内置的alert()弹出提示框，用户一眼就能看到错误，不过会打断操作流程
• 保留现有<p>标签的基础上，给错误提示加红色字体、成功结果加绿色字体的样式区分，就是上面代码里的写法，不打断操作，用户改完值可以直接重新提交，不用刷新页面
• 还可以把输入框的边框在输入错误时改成红色，进一步强化错误提示效果

完整可运行代码 #

<div class="container-fluid">
    <p>请输入受影响的房间数量和总平方英尺数：</p>
    <input type="text" name="numRooms" id="numRooms" placeholder="房间数量"> <br>
    <input type="text" name="roomSize" id="roomSize" placeholder="总平方英尺数"><br>
    <button type="button" onclick="submit1()">提交计算</button><br>
    <p id="result"></p>
</div>

<script>
function submit1(){
    const roomNum = parseInt(document.getElementById("numRooms").value);
    const totalSize = parseInt(document.getElementById("roomSize").value);
    const resultDom = document.getElementById("result");

    if(isNaN(roomNum) || roomNum <=0 || isNaN(totalSize) || totalSize <=0) {
        resultDom.style.color = "red";
        resultDom.innerText = "输入无效，请输入大于0的正整数";
        return;
    }

    const estimate = totalSize * 5;
    resultDom.style.color = "green";
    resultDom.innerHTML = "您的预估报价为：$" + estimate;
}
</script>

内容的提问来源于stack exchange，提问作者amber