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

类似于何时可以检测到具有

required

属性的输入元素是否正确验证，编写以下代码：

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

如何检查

type='email'

的输入是否有效

编辑：

我不是问如何通过将输入与regex进行比较来验证输入

---

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

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

它提供了一些属性来测试某些方面，如

typeMismatch

，这是一个布尔值，用于描述输入值是否是类型（url、电子邮件）的有效语法

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

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 {
  border:1px solid red;
}

:valid {
  border:1px solid green;
}

演示

var email=$（“#email”），
num=$（'anumber'）；
email.on（'input'，（）=>{
if（email.prop（'validity'）。类型不匹配）{
log（“无效的电子邮件语法”）；
}
});
num.on（'input'，（）=>{
if（num.prop（'validity'）。步骤不匹配）{
console.log（'Invalid number step'）；
}
});
：有效{
边框：1px纯绿色；
}
：无效{
边框：1px实心rgb（255,0,0）；
}





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

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

要检查一般有效性，您只需对照
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 {
  border:1px solid red;
}

:valid {
  border:1px solid green;
}

演示

var email=$（“#email”），
num=$（'anumber'）；
email.on（'input'，（）=>{
if（email.prop（'validity'）。类型不匹配）{
log（“无效的电子邮件语法”）；
}
});
num.on（'input'，（）=>{
if（num.prop（'validity'）。步骤不匹配）{
console.log（'Invalid number step'）；
}
});
：有效{
边框：1px纯绿色；
}
：无效{
边框：1px实心rgb（255,0,0）；
}





到目前为止，您尝试了什么？您想要的结果是什么？可能重复：我完全不知道如何捕获电子邮件格式验证的结果有效性的可能重复不是jQuery属性，而是DOM属性。因此，您需要从实际的DOM对象访问它，即
document.querySelector（'.input-email'）.validity.valid
或
$（'.input-email'）[0]。validity.valid
或
$（'.input-email'）.prop（'validity'））.valid
到目前为止，您尝试了什么？您想要的结果是什么？可能重复：我完全不知道如何捕获电子邮件格式验证的结果有效性的可能重复不是jQuery属性，而是DOM属性。因此，您需要从实际的DOM对象访问它，即
document.querySelector（'.input email'）.validity.valid
或
$（'.input email'）[0]。validity.valid
或
$（'.input email'）.prop（'validity'）。valid