Tengo un código que valida si todos los campos del formulario se rellenan con datos, pero mis entradas de formulario se muestran dinámicamente en función de la condición this.id_company. Como puede ver si this.is_company es igual a TRUE, la validación también debe verificar si el usuario ha insertado this.taxNumber y this.copmany

isComplete: function () {
    if (this.is_company) {
        return this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber
            && this.city && this.id_country && this.iAggre && this.taxNumber && this.company
    }
    return this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber
        && this.city && this.id_country && this.iAggre;
}

Estoy buscando la mejor manera de simplificar mi código Javascript. ¿Pueden ustedes, por favor, dar ejemplos? Gracias

0
Valor_ 24 feb. 2018 a las 14:04

6 respuestas

La mejor respuesta

Para facilitar, simplemente use un o:

return (
   this.firstName && 
   this.lastName && 
   this.email && 
   this.password && 
   this.address && 
   this.postNumber && 
   this.city && 
   this.id_country && 
   this.iAggre && 
   (!this._isCompany || this.taxNumber && this.company)
);

Debe leerse como y no es una empresa o tiene un número de impuesto y una propiedad de la empresa .

5
Jonas Wilms 24 feb. 2018 a las 11:10

La mejor apuesta es reducir cada función a su forma más simple. @ jonas-w iba en la dirección correcta calculando valores. El nombre del método documenta lo que significa el resultado y hace que el condicional sea más fácil de entender.

Siempre puede crear isCompanyComplete() y isPersonComplete() métodos privados si no desea exponerlos.

Extender los operadores lógicos (&&) sobre líneas separadas hace que la declaración sea mucho más legible.

Dividir la declaración ternaria en líneas separadas también deja en claro qué partes se aplican a lógicamente verdadero o falso.

Evite invertir la lógica en condiciones (!this.is_company).

class Form {

  isPersonComplete() {
    return !!(
      this.firstName 
      && this.lastName 
      && this.email 
      && this.password 
      && this.address 
      && this.postNumber
      && this.city 
      && this.id_country 
      && this.iAgree 
    );
  }

  isCompanyComplete() {
    return !!(
      this.isPersonComplete()
      && !!this.taxNumber 
      && !!this.company
    );
  }

  isComplete() {
    return this.is_company 
      ? this.isCompanyComplete() 
      : this.isPersonComplete();
  }
  
}

const form = new Form()
console.log(
  'Person: ' + form.isPersonComplete(), 
  'Company: ' + form.isCompanyComplete(), 
  'Completed: ' + form.isComplete()
  );


form.firstName = 'John';
form.lastName = 'Smith';
form.email = 'john@smith.co';
form.password = 'somesecret';
form.address = '123 main street, anywhere';
form.postNumber = '12345';
form.city = 'Metropolis';
form.id_country = 1;
form.iAgree = true;
console.log(
  'Person: ' + form.isPersonComplete(), 
  'Company: ' + form.isCompanyComplete(), 
  'Completed: ' + form.isComplete()
  );

form.is_company = true;
form.taxNumber = 12345;
form.company = 'John Smith & Co';
console.log(
  'Person: ' + form.isPersonComplete(), 
  'Company: ' + form.isCompanyComplete(), 
  'Completed: ' + form.isComplete()
  );
1
Dave Meehan 24 feb. 2018 a las 23:08

¿Esto funciona para ti?

isComplete: function () { 
    let result = this.firstName && this.lastName && this.email && this.password && this.address && this.postNumber && this.city && this.id_country && this.iAggre;
    if (this.is_company) result += this.taxNumber && this.company;
    return result; 
}
-3
SindreKjr 24 feb. 2018 a las 11:12

Que esta pregunta está "principalmente basada en la opinión", etc., ya está establecida, entonces qué demonios, aquí hay otra sugerencia:

function form() {
  this.vld = {
    fields: ["firstName", "lastName", "email", "password", "address", "postNumber", "city", "id_country", "iAggre"],
    check: arr => !arr.some(el => !this[el]),
    isComplete: () => this.vld.check(this.vld.fields) && (!this.is_company || this.vld.check(["taxNumber", "company"]))
  }
}

var stuff = new form();

stuff.firstName = "Alice";
stuff.lastName = "Bob";
stuff.email = "alice@bob.com";
stuff.password = "12abc123";
stuff.address = "123 Main St";
stuff.postNumber = "12345";
stuff.city = "Springfield";
stuff.id_country = 1;
console.log(false, stuff.vld.isComplete());

stuff.iAggre = true;
console.log(true, stuff.vld.isComplete());

stuff.is_company = true;
stuff.taxNumber = "123456789";
console.log(false, stuff.vld.isComplete());

stuff.company = "Moe's";
console.log(true, stuff.vld.isComplete());

Potencialmente, este método puede optimizarse tomando los nombres de los campos de entrada del formulario en sí, lo que evitaría reiniciar todos los campos explícitamente.

1
Chris G 24 feb. 2018 a las 11:41

Una versión más agradable y fácil de leer sería:

isComplete: function () {
    var baseCondition = this.firstName && this.lastName && this.email 
        && this.password && this.address && this.postNumber
        && this.city && this.id_country && this.iAggre

    var companyCondition = baseCondition && this.taxNumber && this.company;

    return this.is_company ? companyCondition : baseCondition;
}
4
Bentaye 24 feb. 2018 a las 11:25

Puede agrupar sus campos en una matriz y presionar condicionalmente los campos company y taxNumber:

var validate = function(isCompany) {
  var validateFields = [
    this.firstName,
    this.lastName,
    this.email,
    this.password,
    this.address,
    this.postNumber,
    this.city,
    this.id_country,
    this.iAggre
  ];

  if (isCompany) {
    validateFields.push(this.company, this.taxNumber);
  }

  return validateFields.find(f => !f) === undefined;
}

var isComplete = function() {
  return validate(this.is_company);
}
1
Daniel Conde Marin 24 feb. 2018 a las 11:21