javascript - 如何允许html表单仅在字段中的数字加起来达到一定总和时才提交

Question

我有一个将数据插入数据库的表单。

此表单中有很多输入字段，其中 4 个字段用于输入数字:

<form action="page.php" method="post">
<input type="text" name="Text1"> <input type="number" name="Number1">
<input type="text" name="Text2"> <input type="number" name="Number2">
<input type="text" name="Text3"> <input type="number" name="Number3">
<input type="text" name="Text4"> <input type="number" name="Number4">
<input type="submit" name="submit">
</form>

我的问题:仅当这 4 个字段中的输入加起来为 100 时，如何允许表单提交？并显示某种错误来告诉用户总数是否尚未达到 100。

谢谢。

Answer 1

将 onSubmit 处理程序添加到您的表单中:

<form action="page.php" method="post" onsubmit="return validate();"> 

然后创建validate()函数来检查您的情况。像这样的东西可能会起作用:

<script>
function validate() {
    var n1 = parseInt(document.getElementsByName('Number1')[0].value);
    var n2 = parseInt(document.getElementsByName('Number2')[0].value);
    var n3 = parseInt(document.getElementsByName('Number3')[0].value);
    var n4 = parseInt(document.getElementsByName('Number4')[0].value);
    if (n1+n2+n3+n4 == 100) {
        return true;
    } else {
        alert("Sum is not 100");
        return false;
    }
}
</script>

请注意，如果出现错误，该函数将返回 false - 这会阻止表单提交。