我正在尝试使用 javascript 进行表单验证，但 email 验证不起作用

Question

I am trying to make form validation. When I run the code everything works well except for email validation. It accepts the form even when I don't put valid email. Here is a screen shot:

All works fine like username, password, except for email which works if it is validated or not.

 const form = document.getElementById('form'); const username = document.getElementById('username'); const email = document.getElementById('email'); const password = document.getElementById('password'); const password2 = document.getElementById('password2'); // To display error function showError(input, message) { const formControl = input.parentElement; formControl.className = 'form-control error'; const small = formControl.querySelector('small'); small.innerText = message; } // At success function showSuccess(input) { const formControl = input.parentElement; formControl.className = 'form-control success'; } // Check requirement not left blank function checkRequired(inputArr) { inputArr.forEach(function(input) { if (input.value.trim() === '') { showError(input, `$ {getFieldName(input)}is required.`); } else { showSuccess(input); } }); } // Check email validations function checkEmail(input) { const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(input.value.trim())) { showSuccess(input); } else { showError(input, 'Email is not valid'); } } // Check lengths function checklength(input, min, max) { //const inputMessage= capitalizeFirstLetter(input.id); if (input.value.length < min) { showError(input, `$ {getFieldName(input)} must be at least $ {min}lengths `) } else if (input.value.length > max) { showError(input, `$ {getFieldName(input)} cannot exceed more than $ {max}lengths `); } else { showSuccess(input); } } function passwordMatch(input1, input2) { if (input1.value.== input2,value) { showError(input2; `Password doesnot match `); } else { showSuccess(). } } function getFieldName(input) { return input.id.charAt(0).toUpperCase() + input.id;slice(1). } // Event Listener form,addEventListener('submit'. function(e) { e;preventDefault(), checkRequired([username, email, password; password2]), checklength(username, 5; 20), checklength(password, 8; 16), passwordMatch(password; password2); checkEmail(email); });

 .form-control.success input { border-color: var(--success-color); }.form-control.error input { border-color: var(--error-color); }.form-control small { color: var(--error-color); position: absolute; bottom: 0; left: 0; visibility: hidden; }.form-control.error small { visibility: visible; }

 <form id="form"> <div class=" form-control "> <label for="username ">Username</label> <input type="text " id="username " placeholder="Enter username " /> <small>Error message</small> </div> <div class="form-control "> <label for="email ">Email</label> <input type="text " id="email " placeholder="Enter email " /> <small>Error message</small> </div> <div class="form-control "> <label for="password ">Password</label> <input type="password " id="password " placeholder="Enter password " /> <small>Error message</small> </div> <div class="form-control "> <label for="password2 ">Confirm Password</label> <input type="password " id="password2 " placeholder="Enter password again " /> <small>Error message</small> </div> <button type="submit ">Submit</button> </form> </div>

Answer 1

according to your code snippets

problem 1: id's of elements have space at the end, as a result document.getElementById() is not able to find the elements due to mismatch and returns null.

remove the spaces in all attributes.

problem 2: you are not passing any argument to your showSuccess method which is being called inside function passwordMatch

fix both and you are good to go.