我正在嘗試使用 javascript 進行表單驗證，但 email 驗證不起作用

Question

我正在嘗試進行表單驗證。 當我運行代碼時，除了 email 驗證之外，一切都運行良好。 即使我沒有輸入有效的 email，它也會接受該表格。 這是一個屏幕截圖：

除了 email 之外，其他一切都像用戶名、密碼一樣正常工作，無論它是否經過驗證都有效。

 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

根據您的代碼片段

問題1：元素的id末尾有空格，導致document.getElementById()由於不匹配而無法找到元素並返回null。

刪除所有屬性中的空格。

問題 2：您沒有將任何參數傳遞給在function passwordMatch內部調用的showSuccess方法

修復這兩個，你對 go 很好。