我需要验证此表单

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，则表单未提交。您的代码段已包含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;
}