我需要验证这个表格

Question

我想验证此表单。其中第一个字段获得的分数不应超过 1100 或小于 1，第二个字段的总分应为 1100 .. 第三个和第四个字段将与前两个字段相同，但 ID 不同，最后一个字段的分数应不大于 200 或小于 1.. 除非输入完全正确，否则表单不应继续

function myFunction() {
var x, text, y, z;

// Get the value of the input field with id="numb"
x = document.getElementById("mfsc").value;
y = document.getElementById("matric").value;
z = document.getElementById("per").value;

// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 0 || x > 1100) {
    alert("marks should be less then 1100");
} 
if (isNaN(y) || y < 0 || y > 1100) {
    alert("Matric Marks should be less then 1100");
} 
if (isNaN(z) || z < 0 || z > 200) {
    alert("NET Marks should not be more then 200");
} 

}

<form action="merit-nust.php" method="Post" name="Form1" onsubmit="return validateForm()">
                  <div class="style1"> Enter Your marks in FSc</div>
                  <div align="left">
                    <input type="text" required style="width: 160px; float: left; margin-right: 1%;" size="20" placeholder="Obtained Marks in FSc Part-I" id="mfsc" class="TextBox form-control">
                    <input type="text" required class="TextBox form-control" placeholder="Total Marks in FSc Part-I"  name="totalfsc" size="20" style="width: 160px; float: left; margin-right: 1%;">
                  </div>
                  <div align="left">
                    <input type="text" required style="width: 160px; float: left; margin-right: 1%;" size="20" placeholder="Obtained Marks in Matic" id="matric" name="matric" class="TextBox form-control">
                    <input type="text" required class="TextBox form-control" placeholder="Total Marks in Matric" name="totalmatric" size="20" style="width: 160px">
                  </div>
                  <div class="style1">NET Marks (out of 200)</div>
                  <label for="1">
                    <input type="text" required style="width: 160px" size="20" id="per" class="TextBox form-control">
                    <br>
                  </label>
                  <center>
                    <input type="submit" onClick="myFunction()" name="submit" value="Find Colleges" id="INPUT_27">
                  </center>
                </form>

Answer 1

首先，我不确定我是否理解您的问题。 HTML 看起来不错，您的函数 也是如此。 您提供的链接展示了该场景，警报被正确抛出。
我是否正确，您现在希望函数不提交表单如果它无效？

如果onsubmit 返回false，则不会提交表单。您的 sn-p 已包含 onsubmit="return validateForm()"。如果表单无效，您只需要 return false 的函数。 这是一个相关的问题：want-html-form-submit-to-do-nothing。

让我们保持简单，我们引入一个boolean isValid，正确设置它然后返回它。如果表单未提交，我们也会显示警报。

function validateForm() {
    var x, text, y, z;
    var isValid = true;

    // Get the value of the input field with id="numb"
    x = document.getElementById("mfsc").value;
    y = document.getElementById("matric").value;
    z = document.getElementById("per").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 0 || x > 1100) {
        alert("marks should be less then 1100");
        isValid = false;
    } 
    if (isNaN(y) || y < 0 || y > 1100) {
        alert("Matric Marks should be less then 1100");
        isValid = false;
    } 
    if (isNaN(z) || z < 0 || z > 200) {
        alert("NET Marks should not be more then 200");
        isValid = false;
    }

    if (!isValid) {
        alert("Form gets not submitted, it is not valid!");
    }

    return isValid;
}