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

【问题标题】：How to efficiently validate multiple input fields in a form如何有效地验证表单中的多个输入字段
【发布时间】：2018-11-17 12:52:42
【问题描述】：

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

function hasValue() {
    var value = document.forms["personalInfo"]["fname"].value;
    if (!value) {
        alert("The field needs a value!")
        return false;
    }
}

为了验证我一直在使用的多个输入：

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;
    }
}

HTML：

<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>

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

【问题讨论】：

您可以使用jquery验证，您可以参考jqueryvalidation.org链接了解更多详情。

标签： javascript forms input

【解决方案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。

【讨论】：

你可以直接使用some，使用Array.prototype.map没有意义。您可以只传递表单的名称作为参数，以避免进一步修改验证器。
我不喜欢这个解决方案的原因是，当您依赖基于浏览器的验证时，您无法控制添加额外样式或任何其他内容以防失效。
@TolgaEvcimen 你绝对可以——HTML5 为输入元素提供了:valid 和:invalid 伪选择器，您可以使用它们将CSS 应用于您的心脏内容。有关详细信息，请参阅我的答案中的 required 链接。

【解决方案2】：

看起来完全没问题。此外，在实时项目中，可读性和可维护性比您拥有的 js 的效率更重要。实际上更少的行并不意味着更多/更少的效率。

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

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

【讨论】：

【解决方案3】：

为 HTML 中的每个元素指定 id，并像这样定位它：

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

或者你可以在输入标签中添加一个“必需”属性，尽管这只适用于特定的浏览器，如 Chrome

【讨论】：