表单验证 - 电子邮件验证在 AngularJs 中未按预期工作 [英] Form Validation - Email Validation not working as expected in AngularJs

查看：30 发布时间：2021/11/9 4:48:43 angularjs

本文介绍了表单验证 - 电子邮件验证在 AngularJs 中未按预期工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 Angular 进行表单验证.

这是我使用的 - plunker-edit 我从 Angularjs 文档中获取了这段代码 - 绑定到表单和控制状态使用类型作为 email 但是当我运行它并输入 abc@abc 它说它是有效的.我该如何解决这个问题?

<html lang="zh-cn"><头><meta charset="UTF-8"><title>示例 - example-example100-production</title><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script><script src="script.js"></script><body ng-app=""><div ng-controller="控制器"><form name="form" class="css-form" novalidate>电子邮件:<input type="email" ng-model="user.email" name="uEmail" required/><br/><div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">无效:<span ng-show="form.uEmail.$error.required">告诉我们您的电子邮件地址.</span><span ng-show="form.uEmail.$error.email">这不是有效的电子邮件.</span>

</表单>

</html>

P.S:我是 AngularJs 的初学者

以下输入也显示有效

aaa@aaa
aaa---aaa@gmail.com
aaa`aaa@aaa

预期的有效电子邮件

aabc@ddd.com
aaa.aaa@fddd.co.in
aaa@ddd.co.uk

解决方案

参考我的另一个回答:AngularJS v1.3.x 电子邮件验证问题

尝试在您的电子邮件输入中使用 ng-pattern.

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

它适合您的有效和无效情况.

查看示例:plunk

I am using Angular for form validation.

Here is what I use - plunker-edit I have taken this code from Angularjs documentation - Binding to form and control state Have used type as email but when I run this and enter abc@abc it says it is valid. How do I fix this ?

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example100-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="">
    <div ng-controller="Controller">
    <form name="form" class="css-form" novalidate>
      E-mail:
        <input type="email" ng-model="user.email" name="uEmail" required/><br />
      <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
        <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
        <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
      </div>
    </form>
  </div>
</body>
</html>

P.S : I am a beginner in AngularJs

Edit:

Also the following inputs wer also shown valid

aaa@aaa
aaa---aaa@gmail.com
aaa`aaa@aaa

Expected Valid Emails

aabc@ddd.com
aaa.aaa@fddd.co.in
aaa@ddd.co.uk

解决方案

Refer to my another answer: AngularJS v1.3.x Email Validation Issue

Try to use ng-pattern in your email input.

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

It fits your valid and invalid cases.

See an example: plunk

这篇关于表单验证 - 电子邮件验证在 AngularJs 中未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

表单验证 - 电子邮件验证在 AngularJs 中未按预期工作 [英] Form Validation - Email Validation not working as expected in AngularJs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

表单验证 - 电子邮件验证在 AngularJs 中未按预期工作 [英] Form Validation - Email Validation not working as expected in AngularJs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭