JS 表单验证。检查字段是否存在，如果存在则执行函数，如果它返回 true，则提交表单

Question

我有一个函数可以通过 formDOM 元素。它通过数据属性检查该字段是否存在。例如：data-validate-email 如果是这种情况，则需要使用相应的函数进行验证，例如 emailIsValid() 。

这些函数都返回带有true 或false 的布尔值。如果其中一个函数返回 false，我如何管理/跟踪，以便我可以阻止表单提交。全局变量不起作用，因为它被下一个函数覆盖。

onSubmit(form, event)
{
    event.preventDefault();

    const fields = form.querySelectorAll( `[${textValidation}]`);
    const passwordField = form.querySelector(`[${passwordValidation}]`);
    const repeatPasswordField = form.querySelector(`[${passwordRepeatValidation}]`);
    const email = form.querySelector(`[${emailValidation}]`);

    if(fields)
    {
        this.TextIsValid(fields);
    }

    if(email)
    {
        this.emailIsValid(email);
    }

    if(passwordField)
    {
        this.passwordStrengthIsValid(passwordField);
    }

    if(repeatPasswordField)
    {
        this.passwordMatches(passwordField, repeatPasswordField);
    }
}

Answer 1

使用您当前的解决方案，这样的事情会起作用：

onSubmit(form, event)
{
    event.preventDefault();

    const fields = form.querySelectorAll( `[${textValidation}]`);
    const passwordField = form.querySelector(`[${passwordValidation}]`);
    const repeatPasswordField = form.querySelector(`[${passwordRepeatValidation}]`);
    const email = form.querySelector(`[${emailValidation}]`);
    const isValid = true;

    if(fields && !this.TextIsValid(fields))
    {
        isValid = false;
    }

    if(email && !this.emailIsValid(email);)
    {
        isValid = false;
    }
    // And so on...
}

这样，如果其中一个验证通过，您的“全局”isValid 变量将不会被覆盖为 true。只有在验证未通过时才能将其分配为 false。

Answer 2

您可以使用Array 和filter 来解决这个问题。

onSubmit(form, event);
{
  event.preventDefault();
  let validation = [];

  const fields = form.querySelectorAll(`[${textValidation}]`);
  const passwordField = form.querySelector(`[${passwordValidation}]`);
  const repeatPasswordField = form.querySelector(
    `[${passwordRepeatValidation}]`
  );
  const email = form.querySelector(`[${emailValidation}]`);

  if (fields) {
    validation.push(this.TextIsValid(fields));
  }

  if (email) {
    validation.push(this.emailIsValid(email));
  }

  if (passwordField) {
    validation.push(this.passwordStrengthIsValid(passwordField));
  }

  if (repeatPasswordField) {
    validation.push(this.passwordMatches(passwordField, repeatPasswordField));
  }

  // Filter the array with false value and then check the array length. 
  let validationStatus  = validation.filter(item => !item);
  if(validationStatus.length === 0) {
    //submit your form
  }
}

Answer 3

您可以将全局变量 finalStatus 与逻辑运算符 && 结合使用

onSubmit(form, event)
{
    event.preventDefault();

    let isValid = true;

    const fields = form.querySelectorAll( `[${textValidation}]`);
    const passwordField = form.querySelector(`[${passwordValidation}]`);
    const repeatPasswordField = form.querySelector(`[${passwordRepeatValidation}]`);
    const email = form.querySelector(`[${emailValidation}]`);

    if(fields)
    {
        isValid = isValid && this.TextIsValid(fields);
    }

    if(email)
    {
        isValid= isValid && this.emailIsValid(email);
    }

    if(passwordField)
    {
        isValid= isValid && this.passwordStrengthIsValid(passwordField);
    }

    if(repeatPasswordField)
    {
        isValid= isValid && this.passwordMatches(passwordField, repeatPasswordField);
    }

    console.log(isValid)
}

您甚至可以通过检查if 中finalStatus 的状态来缩短流程，以避免在状态已经为false 时进入

if(isValid && email)