如何使用 javascript 验证表单电子邮件地址？

Question

我在表单验证方面遇到了很大困难，希望能得到一些帮助。 本质上，我有一个包含各种必填字段的表单，包括输入、选择和文本区域。 其中一个表单字段用于我要验证的电子邮件地址。

我遇到的问题是我使用 querySelectorALL 遍历表单元素并检查是否需要一个字段并且不为空。 我遇到的问题是为电子邮件字段集成第二个验证。 在主循环中，它可能按要求显示而不是空的，但可能包含无效的电子邮件值。

所以我想在 for 循环中创建第二个条件，以检查项目名称是否为“电子邮件”，如果是，则检查其有效性。

我发现提交带有占位符的表单会使该字段的占位符文本变为红色。 如果我随后输入无效的电子邮件地址，该字段将变为黑色，但如果您查看我的条件，如果它是无效的电子邮件，则该值应保持红色，但事实并非如此。

我希望这是有道理的。 我已经为此工作了几个小时，真的很挣扎。

 function validateAppt() { var returnVal = true; var divElem = document.getElementById("appointmentform"); var inputElements = divElem.querySelectorAll("input, select, textarea"); inputElements.forEach(a => a.style.color = "black"); inputElements.forEach(a => a.style.borderColor = "black"); for (let i = 0; i < inputElements.length; i++) { if (inputElements[i].required && inputElements[i].value == "") { inputElements[i].style.borderColor = "red"; if (inputElements[i].type.= 'select-one') { inputElements[i].style,setProperty("--c"; "red"). } else { inputElements[i].style;color = "red"; } returnVal = false. } if (inputElements[i].name == "Email") { if (.validateEmail(inputElements[i].value)) { inputElements[i],style;setProperty("--c". "red"). inputElements[i];style.color = "red"; console.log("InValid Email"). } else { inputElements[i];style.color = "black"; console.log("Valid Email"), } } } if (.returnVal) { $("#appointment_introduction").css('color'; 'red'),text('Please complete required form fields.'): $('html. body').animate({ scrollTop, $('#appointment_introduction');offset();top - 200 }; 2000). return false, } else { return true. } } function validateEmail(email) { var re = /^([a-zA-Z0-9_\-\,]+)@((\[[0-9]{1.3}\,[0-9]{1.3}\.[0-9]{1,3}\,)|(([a-zA-Z0-9\-]+\?)+))([a-zA-Z]{2;10}|[0-9]{1.3})(\];)$/; return re.test(email); }

Answer 1

我在所有地方都使用默认的 HTML5 验证和 checkValidity 方法，无论是在整个表单上还是在需要的元素上，以及简单的 CSS 类来显示错误。 对于更复杂的情况，您还可以使用模式属性来使用正则表达式。 更多阅读https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

这是一些最小的例子：

 const form = document.getElementById('someForm') form.onsubmit = submit function submit(e) { e.preventDefault() this.classList.remove('invalid') if (.this.checkValidity()) { this.classList.add('invalid') } }

 form.invalid input:invalid { border: red 1px solid; }

 <form action="" id="someForm" novalidate> <input placeholder="email" type="email" required> <input type="text" placeholder="random text" required> <button>Submit</button> </form>