POST请求之前的表单验证

问题描述 投票:1回答:2

因此,我有2个函数,一个是异步函数,基本上是一个HTTP Post Request,另一个是表单验证。我希望仅在表单验证功能返回true时才触发POST请求功能。表单验证如下所示:

regForm.addEventListener('submit', function(event){
  if (checkInputs()) {
    // trigger post request function
  }
})
function checkInputs() {
  const usernameValue = form.username.value.trim();
  const passwordValue = form.password.value.trim();
  const emailValue = form.email.value.trim();

  if (usernameValue === '') {
    // trigger another function that handles errors
   setError(form.username, 'Can\'t be blank');
  } else {
   // triggers function that handles success(color change, etc.)
   setSuccess(form.username);
  }

  if (passwordValue=== '') {
    // trigger another function that handles errors
   setError(form.password, 'Can\'t be blank');
  } else {
   // triggers function that handles success(color change, etc.)
   setSuccess(form.password);
  }
}

但是这似乎不起作用,它不会触发POST请求功能。

javascript forms validation
2个回答
0
投票

它会触发,因为您没有从checkInputs函数返回任何内容。

您需要返回布尔值/ true或false /。

类似:

function checkInputs() {
  const usernameValue = form.username.value.trim();
  const passwordValue = form.password.value.trim();
  const emailValue = form.email.value.trim();

  if (usernameValue === '') {
    // trigger another function that handles errors
    setError(form.username, 'Can\'t be blank');
    return false;
  } else {
    // triggers function that handles success(color change, etc.)
    setSuccess(form.username);
  }

  if (passwordValue=== '') {
    // trigger another function that handles errors
    setError(form.password, 'Can\'t be blank');
    return false;
  } else {
    // triggers function that handles success(color change, etc.)
    setSuccess(form.password);
  }

  return true;
}

0
投票

在内部函数checkInputs()中,创建一个变量let check = true,在每个if语句中为该变量分配false:

if (usernameValue === '') {
  setError()
  check = false;
}

return check;在函数末尾。

© www.soinside.com 2019 - 2024. All rights reserved.