如何使用HTML5,JS或Angular工作在Ionic中验证电子邮件？

Question

我注意到这是一个痛苦的屁股.类型="电子邮件"的HTML5验证器似乎不适用于Ionic(View).我尝试了一切可能的方法,但它没有用.

我在用:

• 离子(查看)

• 角

• HTML5

这是我现在的HTML:

<input class="testinput" type="email" name="email"
       ng-model="userRegistration.email" type="text"
       pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]*\.([a-z]{2,4})$/" 
       required>

也尝试了这个type="text",但也没有工作.我可以在使用电子邮件时验证表单:"blablabla"我不使用@符号,当然这是错误的.

我也这么试过,就是:[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$和ng-pattern,但我没有得到一个错误,我可以只用随机文本注册,而不会被验证停止.

所以我的问题是:我该如何解决这个问题？解决这个问题的最佳方法是什么？

我检查过:

• 如何使用ng-pattern验证angularJs中的电子邮件ID
• 为什么HTML5表单验证允许没有点的电子邮件？

Answer 1

我自己修好了.所有其他可能的解决方案都不适合我.但是这个有效:

<input type="email" name="email" ng-model="someModelIamUsing"
       pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})">

也许其他人也可以从中受益,这就是我在这里添加它的原因.

Answer 2

这就是我正在使用它,到目前为止它的工作正常.

var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(userEmailAddressFromInput)) {
  // Invalid Email
}

这将使用正则表达式模式和测试方法检查电子邮件变量.
有关测试方法的更多信息,请参阅此内容.