我在 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');
}
如有任何帮助,我们将不胜感激
使用内置表单验证而不是创建自己的表单验证。仅当所有必填(
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>