Question

我尝试使用javascript来验证HTML表单中的多个字段。我可以让它为单个输入工作，但我似乎无法让它来验证多个输入。这是我的JS工作正常 -

<script>
function validateForm() {
    var n = document.forms["myForm"]["Name"].value;
    if (n == "") {
        alert("Name must be filled out");
        return false;
    }
}
</script>

这是HTML

<form name="myForm" action="php/contact.php" onsubmit="return validateForm()" method="post">

then - 

<label>Name:</label>
<input type="text" name="Name" id="Name"><br><br></div>

但我似乎无法让它也验证这个字段 -

<label>Address:</label> 
<input type="text" name="Address" id="Address"><br><br>

Answer 1

JS

<script>
function validateForm() {
    var name = document.forms["myForm"]["Name"].value;
    if (name == "") {
        alert("Name must be filled out");
        return false;
    }

    var address = document.forms["myForm"]["Address"].value;
    if (address == "") {
        alert("Address must be filled out");
        return false;
    }
}
</script>

HTML

<form name="myForm" action="php/contact.php" onsubmit="return validateForm()" method="post">

    <label>Name:</label>
    <input type="text" name="Name" id="Name"><br><br></div>

    <label>Address:</label> 
   <input type="text" name="Address" id="Address"><br><br>

</form>

因为您正在返回false，所以它只会提醒用户第一个不正确的字段值。它为每个if语句执行此操作。他们必须纠正这个领域并再试一次。

Answer 2

只需复制现有的if语句，但将"Name"更改为"Address"。

无法同时执行多个字段

如果您要显示一条列出所有错误的错误消息，那么您需要从每个字段的验证中删除alert()和return语句，因为这显然是函数一旦到达任何return语句，就会停止处理。相反，建立一个错误列表，可能是这样的：

function validateForm() {
    var messages = [];

    if (document.forms["myForm"]["Name"].value == "") {
        messages.push("Name must be filled out");
    }
    if (document.forms["myForm"]["Address"].value == "") {
        messages.push("Address must be filled out");
    }

    if (messages.length > 0) {
        alert(messages.join("\n"));
        return false;
    }
    return true;
}

如果你对每个字段进行相同的验证，即检查它们是否为空，那么你可以使用一个循环，可能是这样的：

function validateForm() {
    var missingFields = [];

    var fields = document.forms["myForm"].querySelectorAll("input");
    for (var i = 0; i < fields.length; i++) {
        if (fields[i].value == "") {
            missingFields.push(fields[i].name);
        }
    }

    if (missingFields.length > 0) {
        alert("You must enter something in the following fields:\n" + missingFields.join("\n"));
        return false;
    }
    return true;
}

Answer 3

如果捕获submit事件然后遍历表单中的所有文本输入，则每次更新HTML时都可以避免更改此JS代码：

＆＃13;

var inputs = document.forms["myForm"].querySelectorAll('input[type=text]')

document.forms["myForm"].addEventListener('submit', function validate(event) {
    for (var i = 0; i < inputs.length; i++) {
        if (!inputs[i].value) {
            alert(inputs[i].name + ' is required!')
            event.preventDefault()
            return
        }
    }
})

＆＃13;

<form name="myForm" action="php/contact.php" method="post">
    <label for="Name">Name:</label>
    <input type="text" name="Name" id="Name" required/><br><br>
    <label for="Address">Address:</label> 
    <input type="text" name="Address" id="Address" required><br><br>
    <input type="submit" value="Submit"/>
</form>

＆＃13;

Answer 4

解决了！

这很有效 -

<script>
function validateForm() 

   {
    var n = document.forms["myForm"]["Name"].value;
    if (n == "") {
        alert("Name must be filled out");
        return false;
    }
    var a = document.forms["myForm"]["Address"].value;
    if (a == "") {
        alert("Address must be filled out");
        return false;
    }
     var c = document.forms["myForm"]["City"].value;
    if (c == "") {
        alert("City must be filled out");
        return false;
    }


}
</script>

使用javascript验证多个HTML表单字段

4 个答案: