Question

我有一个包含三个输入字段的表单， fname ， lname 和 age 。我想在JavaScript中创建一个函数，该函数在提交时检查所有字段是否都具有值。为了仅验证一个输入字段，我一直在使用以下代码：

function hasValue() {
    var fnameVal = document.forms["personalInfo"]["fname"].value;
    var lnameVal = document.forms["personalInfo"]["lname"].value;
    var ageVal = document.forms["personalInfo"]["age"].value;
    if (!fnameVal || !lnameVal || !ageVal ) {
        alert("All fields needs a value!")
        return false;
    }
}

要验证多个输入，我一直在使用它：

<form name="personalInfo" onsubmit="return hasValue()">
    <input type="text" name="fname" placeholder="Jaun"><br>
    <input type="text" name="lname" placeholder="Deag"><br>
    <input type="number" name="age" placeholder="23"><br>
    <input type="submit" value="Register" name="registrer">
</form>

HTML：

<select class="form-control" id="oid">
    <option>--Select--</option>
    <?php
    while($row=mysqli_fetch_array($run))
    {
    ?>
        <option value="<?= $row['id'];?>">
            <?= $row['first_name'];?> #<?= $row['mobileno']; ?>
        </option>
    <?php   
    }
    ?>
</select>

<?php
echo $row['id'];
?>

是否有更好/更有效的方法使用JavaScript中的函数来验证这些输入？

Answer 1

这里的理想解决方案是在每个输入上设置required属性，并让浏览器为您处理验证。

如果您希望使用JS方法，请继续阅读。

如何使用这样的数组操作：

function isFormIncomplete(formName, fieldNames) {
    const form = document.forms[formName];
    return fieldNames.some(field => !form[field].value);
}

isFormIncomplete(['fname', 'lname', 'age']);

此函数以字段名（['fname', 'lname', 'age']）开头，并使用some()进行简化。如果谓词函数（field => !form[field].value）对于数组中的至少一个元素返回true，则此函数返回true。在这种情况下，如果没有值，则谓词返回true，因此，如果任何字段为空，则some()的结果为true。

Answer 2

这看起来很好。而且，在实际项目中，可读性和可维护性比您那里的js的效率更为重要。实际上，更少的行并不意味着更多/更少的效率。

我通常要做的是为要验证的每个输入具有不同的功能。然后，在每个输入的blur或change事件中调用此验证函数。然后，当然，应该在submit的{{1}}事件上调用另一个聚合的（带有每个验证功能）函数。

在您的情况下，由于每个字段具有相同的验证策略，因此可以使用另一个函数，该函数将从特定于输入的验证函数中调用。这样，您就不会重复任何代码，换句话说，您正在重用验证功能。同时，现在，将简单的验证策略添加到您拥有的任何输入（isNumber，betweenRange等）要容易得多。

Answer 3

将id赋予HTML中的每个元素，并以此为目标：

function hasValue() {
     var fnameVal = document.getElementById('fnameVal').value
     if (!fnameVal) {
         alert("The field needs a value!")
     }
}

或者，您也可以在输入标签中添加“必需”属性，尽管该属性仅适用于特定的浏览器（例如Chrome）

如何有效地验证表单中的多个输入字段

3 个答案: