Как эффективно проверить несколько полей ввода в форме

Question

У меня есть форма с тремя полями ввода: 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?

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, если значение отсутствует, поэтому результат some() равен true, если какое-либо поле пусто.

Answer 2

Это выглядит совершенно нормально. Более того, в живых проектах удобочитаемость и ремонтопригодность важнее, чем эффективность ваших js. И на самом деле меньшее количество строк не означает большую / меньшую эффективность.

Что я обычно делаю, так это чтобы у каждого входа, который я проверял, была разная функция Затем я вызываю эту функцию проверки в blur или change событиях каждого входа. Затем, конечно, другая агрегированная (с каждой функцией проверки) функция должна вызываться при submit событии form.

В вашем случае, поскольку каждое поле имеет одну и ту же стратегию проверки, вы можете использовать другую функцию, которая вызывается из входной функции проверки. Таким образом, вы не повторяете никакого кода, другими словами, вы повторно используете свою функцию проверки. В то же время теперь гораздо проще добавить еще одну стратегию проверки к любому имеющемуся входу (isNumber ,weenRange и т. Д.).

Answer 3

Присвойте идентификаторы каждому элементу в вашем HTML и нацелите его так:

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

Или вы можете просто добавить атрибут «required» во входной тег, хотя это работает только с определенными браузерами, такими какChrome