Javascript 表单验证阻碍数据插入 PHP

Question

我在 Javascript 中创建了表单验证及其工作原理，但数据无法插入到后端 PHP。他们只能在注释掉 e.preventDefault() 时插入数据，因此我的客户端验证不起作用，但有工作并且插入了数据。可能是什么问题？

这是javascript代码，我还尝试了ajax，它将表单数据记录为对象，因此它可以工作。但他们无法使用它。

signupForm.addEventListener('submit', (event) => {
let isValid = true;

    if (firstNameInput.value.trim() === '' || firstNameInput.value.trim().length < 3) {
        displayError(firstNameInput, 'Please enter a valid first name!');
        isValid = false;
    } else {
        hideError(firstNameInput);
    }

    if (lastNameInput.value.trim() === '' || lastNameInput.value.length < 3) {
        displayError(lastNameInput, 'Please enter a valid last name!');
        isValid = false;
    } else {
        hideError(lastNameInput);
    }

    if (!emailIsValid(emailInput.value)) {
        displayError(emailInput, 'Please enter a valid email!');
        isValid = false;
    } else {
        hideError(emailInput);
    }

    if (numberInput.value === '' || numberInput.value.length < 11){
        displayError(numberInput, 'Please enter a valid mobile number!');
        isValid = false;
    } else {
        hideError(numberInput);
    }

    if (passwordInput.value === '' || passwordInput.value.length < 8) {
        displayError(passwordInput, 'Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.');
        isValid = false;
    } else {
        hideError(passwordInput);
    }

    if (countrySelect.value === 'Country*') {
        displayError(countrySelect, 'Please select a country!');
        isValid = false;
    } else {
        hideError(countrySelect);
    }

    if (companyNameInput.value === '') {
        displayError(companyNameInput, 'Please enter your workplace!');
        isValid = false;
    } else {
        hideError(companyNameInput);
    }

if (!isValid) {
    event.preventDefault();
    console.log("Form is not submitted (validation failed)");
} else {
    signupForm.submit();
    console.log("Form is submitted (validation passed)");
}


console.log(isValid)});


function emailIsValid(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function displayError(element, message) {
    const errorParent = element.closest('.input-parent');
    const errorMsg = errorParent.querySelector('.error');

    errorMsg.style.display = 'block';
    errorMsg.textContent = message;
    element.classList.add('is-invalid');
}


function hideError(element) {
    const successParent = element.closest('.input-parent');
    const successMsg = successParent.querySelector('.success');
    const errorParent = element.closest('.input-parent');
    const errorMsg = errorParent.querySelector('.error');

    successMsg.textContent = '';
    successMsg.style.display = 'block';
    errorMsg.style.display = 'none';
    element.classList.remove('is-invalid');
}

如有任何帮助，我们将不胜感激

Answer 1

使用内置表单验证而不是创建自己的表单验证。仅当所有必填（

required

属性）表单字段均有效时，表单才会提交。有多种方法可以验证某些值。在这里，我使用了模式属性，该属性将正则表达式作为要验证的值。

document.forms.signup.addEventListener('invalid', e => {
  e.preventDefault();
  let label = e.target.closest('label');
  label.classList.add('invalid');
}, true);

document.forms.signup.addEventListener('input', e => {
  let label = e.target.closest('label');
  if (e.target.validity.valid) {
    label.classList.remove('invalid');
  }
});

.error {
  font-size: smaller;
  visibility: hidden;
}

.invalid~.error {
  visibility: visible;
}

<form name="signup" action="/signup" method="POST">
  <label>First name: <input type="text" name="firstName" required></label>
  <div class="error">Please enter a your first name</div>
  <label>Last name: <input type="text" name="lastName" required></label>
  <div class="error">Please enter a your last name</div>
  <label>Email: <input type="email" name="email" required></label>
  <div class="error">Please enter a valid email</div>
  <label>Mobile: <input type="text" name="number"
    pattern="[0-9]{6,8}" required></label>
  <div class="error">Please enter a valid mobile number (6-8 didets)</div>
  <label>Password: <input type="password" name="password"
    pattern="[a-zA-Z0-9]{8,20}" required></label>
  <div class="error">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</div>
  <label>Country: <select name="country" required>
<option value="">Select a country</option>
<option value="1">Country 1</option>
<option value="2">Country 2</option>
</select></label>
  <div class="error">Please select a country</div>
  <button>Submit</button>
</form>