email的HTML5表单验证

HTML5 form validation for email

本文关键字:验证 表单 HTML5 email      更新时间:2023-09-26

我被这个问题困住了,我以前没有注意到。

<label> Email Address </label>
<input type="email" id="emailAddress" required placeholder='Email Address' />
<button type="submit" class="button primary small">Submit</button>

在我的JS文件中,我正在使用checkValidity()检查其有效性

checkValidEmail: function(event){
  var emailAddress = $('#emailAddress');
  if(emailAddress[0].checkValidity()){
    console.log('Valid');
  } else{
    console.log('Not Valid');
  }
}

"keyup #emailAddress": "checkValidEmail" // KeyUp works as expected
Output:
  'a@b' // Valid

我不理解这种行为。据我所知,@.com是输入电子邮件的正则表达式。

请注意:我在多个网站上尝试了这个表单,它显示了相同的输入。在上面的例子中,我是在chrome浏览器上执行的。

感谢您的回复!

如果您想使用正则表达式验证,请阅读

http://www.regular-expressions.info/email.html

请注意以下是100%有效的电子邮件地址:-)经常使用它来测试不正确实现的电子邮件验证

xn--80a1acny@xn--80auew.xn--j1amh

另一个选项是检查电子邮件地址域名是否有效。这样做,您可以查询DNS服务器的MX记录(这指向负责接收传入邮件的SMTP服务器)。您将需要服务器端代码来完成此操作。

在HTML5中,你可以像这样验证电子邮件

<form>
    <input type="email" placeholder="Enter your email">
    <input type="submit" value="Submit">
</form>