如何使用 JavaScript 检测 HTML 电子邮件输入验证？答案

【问题标题】：How to detect HTML email input validation with JavaScript?如何使用 JavaScript 检测 HTML 电子邮件输入验证？
【发布时间】：2017-10-03 21:33:30
【问题描述】：

类似于何时可以检测到具有required 属性的输入元素是否被正确验证，编写以下代码：

if($('input').attr('required')) {
   alert(1);
}

如何检查type='email' 的输入是否为有效条目？

编辑：

我不是在问如何通过将输入与正则表达式进行比较来验证输入。

当您将输入类型属性设置为“电子邮件”时，提交的字符串必须具有正确的格式（它需要包含“@”符号并具有正确的结尾），否则您将无法提交形式。我想要实现的是阻止表单提交的默认操作并检查该电子邮件输入验证的状态，类似于何时可以检查是否提供了所需的输入。

【问题讨论】：

到目前为止您尝试了什么，您想要的结果是什么？
可能重复：stackoverflow.com/questions/46155/…
我完全不知道如何捕获电子邮件格式验证的结果
How to validate email address in JavaScript?的可能重复
validity 不是 jQuery 属性，它是 DOM 属性。所以你需要从实际的DOM对象中访问它，即document.querySelector('.input-email').validity.valid或$('.input-email')[0].validity.valid，或$('.input-email').prop('validity').valid

标签： javascript html

【解决方案1】：

要检查本机浏览器输入验证，请使用元素对象上的ValidityState 对象。

它提供了一些属性来测试某些方面，例如typeMismatch，它是一个布尔值，用于描述输入的值是否是类型（url、电子邮件）的有效语法。

var input = document.getElementById('yourInput');
if(input.validity.typeMismatch){
   console.log('Input is not valid type');
}

要检查一般有效性，您只需检查 valid

var input = document.getElementById('yourInput');
if(!input.validity.valid){
   console.log('Input is not valid');
}

如果使用 jQuery 只是获取实际元素对象的访问权限，或者使用 jQuery 的 prop() 方法获取 ValidityState 对象

var input = jQuery('input');
//input[0].validity.valid 
//input.get(0).validity.valid etc
if( input.prop('validity').valid ){
  console.log('Valid input');
}

还请注意，还提供了几个伪 css 类。 :invalid 和 :valid 如果需要提供验证样式

:invalid {
  border:1px solid red;
}

:valid {
  border:1px solid green;
}

演示

var email = $('#email'),
    num   = $('#anumber');
 
email.on('input',()=>{
  if(email.prop('validity').typeMismatch){
    console.log('Invalid email syntax');
  }
});
num.on('input',()=>{
  if(num.prop('validity').stepMismatch){
    console.log('Invalid number step');
  }
});

:valid {
  border:1px solid green;
}
:invalid {
  border:1px solid rgb(255,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="email" type="email" placeholder="Try Email">
<br>
<input id="anumber" step=10 type="number" placeholder="Try a number">
<br>
<input id="arequired" type="text" placeholder="Try a required" required>

【讨论】：