Question

我很难进行表单验证，希望能获得一些帮助。基本上，我有一个带有各种必填字段的表单，其中包括输入，选择和文本区域。表单字段之一是我要验证的电子邮件地址。

我遇到的问题是，我使用querySelectorALL遍历表单元素，并检查是否同时需要字段和不为空。我遇到的问题是对电子邮件字段进行第二次验证。在主循环中，它可能显示为必填项，并且不为空，但可能包含无效的电子邮件值。

因此，我想在for循环中创建第二个条件，以检查项目名称是否为“ Email”，如果是，请检查其有效性。

我发现，使用占位符提交表单会使该字段的占位符文本变为红色。如果我随后输入了无效的电子邮件地址，则该字段将变为黑色，但是如果您查看我的条件电子邮件，则该字段应为红色，但该字段应为红色。

我希望这是有道理的。我已经在这里呆了几个小时了，真的很挣扎。

call

Answer 1

我到处都使用带有checkValidity方法的默认HTML5验证，无论是在整个表单上还是在需要的元素上，都使用简单的CSS类来显示错误。对于更复杂的内容，您还可以使用pattern属性来使用regexp。进一步了解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>

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

1 个答案: