Улучшение читаемости нескольких операторов if с общим шаблоном - PullRequest
Новая
       8

Улучшение читаемости нескольких операторов if с общим шаблоном

0 голосов
/ 28 ноября 2018

Я делаю какой-то JavaScript-интерфейс и у меня много форм, и все они нуждаются в проверке.На данный момент я использую эту структуру: 

function validateForm() {
    let form = document.forms["form-add-consumer"];

    let id = form["input-id"].value;
    let lastName = form["input-last-name"].value;
    let firstName = form["input-first-name"].value;
    ...

    let missing = false;
    if (lastName.trim() === "") {
        document.getElementById("input-last-name-error").className = "error";
        missing = true;
    }
    if (firstName.trim() === "") {
        document.getElementById("input-first-name-error").className = "error";
        missing = true;
    }

    if(missing){
        return false
    } else {
        return buildRequest(id, firstName, lastName, ...);
    }
}

Как видите, для больших форм функция будет быстро расти.Код является немного избыточным для каждого поля:

  1. Объявление поля формы
  2. Проверка его значения в соответствии с логическим условием
  3. Если логическое значение не удалось, отобразите метку ошибки иустановить для неисправного логического значения значение true, чтобы не отправлять запрос

Как можно улучшить этот код, не слишком усложняя его (без библиотеки, если это возможно)?

1 Ответ

0 голосов
/ 28 ноября 2018

Возможно, вы могли бы создать объект, который будет содержать валидаторы для каждого поля, с селекторами для соответствующих полей, чтобы вы могли выполнить необходимую проверку более кратким образом, например: 

function validateForm() {
    let form = document.forms["form-add-consumer"];

    let id = form["input-id"].value;
    let lastName = form["input-last-name"].value;
    let firstName = form["input-first-name"].value;
    ...

    // Construct an object with selectors for the fields as keys, and 
    // per-field validation functions as values like so
    const fieldsToValidate = {
      '#input-id' : value => value.trim() !== '',
      '#input-last-name' : value => value.trim() !== '',
      '#input-first-name' : value => value.trim() !== '',
      ...,
      '#number-field' : value => parseInt(value) > 0, // Different logic for number field
      ...
    }

    const invalidFields = Object.entries(fieldsToValidate)
    .filter(entry => {

        // Extract field selector and validator for this field
        const fieldSelector = entry[0];
        const fieldValueValidator = entry[1];
        const field = form.querySelector(fieldSelector);

        if(!fieldValueValidator(field.value)) {
            // For invalid field, apply the error class
            field.className = 'error'
            return true;
        }

        return false;
    });

    // If invalid field length is greater than zero, this signifies
    // a form state that failed validation
    if(invalidFields.length > 0){
        return false
    } else {
        return buildRequest(id, firstName, lastName, ...);
    }
}
...