程序员经验分享-hwhale

如何使用 ng-pattern 验证 angularJs 中的电子邮件 ID

2024-05-04

我正在尝试使用 ng-pattern 指令验证 angularJs 中的电子邮件 id 字段。

但我是 AngularJs 的新手。我需要在用户输入错误的电子邮件 ID 后立即显示错误消息。

我下面的代码正在尝试解决。帮助我使用 ng-pattern 来获得正确的结果。

<script type="text/javascript" src="/Login/script/ang.js"></script>
<script type="text/javascript">
    function Ctrl($scope) {
        $scope.text = 'enter email';
        $scope.word = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
    }
</script>
    </head>
<body>
    <form name="myform" ng-controller="Ctrl">
        <input type="text" ng-pattern="word" name="email">
        <span class="error" ng-show="myform.email.$error.pattern">
            invalid email!
        </span>
        <input type="submit" value="submit">
    </form>
</body>

如果您想验证电子邮件，请使用 type="email" 而不是 type="text" 的输​​入。 AngularJS 具有开箱即用的电子邮件验证功能，因此无需为此使用 ng-pattern。

这是原始文档中的示例：

<script>
function Ctrl($scope) {
  $scope.text = '[email protected] /cdn-cgi/l/email-protection';
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" required>
  <br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.email">
    Not valid email!</span>
  <br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>

有关更多详细信息，请阅读此文档：https://docs.angularjs.org/api/ng/input/input%5Bemail%5D https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

实例：http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

如果您对内置电子邮件验证器不满意并且想要使用自定义 RegExp 模式验证，则可以应用 ng-pattern 指令并根据文档 https://docs.angularjs.org/api/ng/directive/ngPattern错误消息可以这样显示：

如果 ngModel.$viewValue ，则验证器设置模式错误键 与正则表达式不匹配

<script>
function Ctrl($scope) {
  $scope.text = '[email protected] /cdn-cgi/l/email-protection';
  $scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
  <br/><br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!
  </span><br/>
  <span class="error" ng-show="myForm.input.$error.pattern">
    Not valid email!
  </span>
  <br><br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>

笨蛋：https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

regex

angularJS

email

angularjsdirective

ngpattern

如何使用 ng-pattern 验证 angularJs 中的电子邮件 ID 的相关文章

  • angularjs ui-router：获取给定状态的子状态列表

    您知道 ui router 中获取给定状态的子状态列表的方法吗 我正在使用 ui router 实现一个复杂的 SPA 可能有 4 级深度导航 我想实现从路由器表自动生成的第二级导航选项卡界面 为此 我需要获取给定状态 可能是抽象状态 的直

  • 正则表达式可以与 C++ 中的字符数组一起使用吗

    我正在开发一个无法使用字符串库文件的程序 而是使用字符数组 我能够使用正则表达式 并且想知道是否有办法使用正则表达式和字符数组 甚至正则表达式和单个字符 我问的原因是当我尝试在匹配中使用我的 char 数组时 xUtility 会抛出一堆来

  • 使用 Grep 查找两个短语之间的文本块（包括短语）

    是否可以使用 grep 来高亮所有以以下内容开头的文本 mutablePath CGPathCreateMutable 并以以下内容结尾 CGPathAddPath skinMutablePath NULL mutablePath 这两个短

  • Perl regex：如何知道匹配数

    我循环遍历一系列正则表达式并将其与文件中的行进行匹配 如下所示 for my regex regexs ref LINE for rawfile regex do do something here next LINE 有没有办法让我知道我

  • 如何在 e2e AngularJS 测试中进行文件上传？

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en

  • AngularJS 观察对象数组中的对象属性

    我有这个data在我的控制器中 scope data home baseValue 1 name home contact baseValue 2 name contract a lot more options 一些像这样的html se

  • 两个分隔符之间的字符

    尝试将正则表达式放在一起 返回 和 之间的字符串 其中 是字符串的结尾 input abc def ghi 期望的正则表达式结果 def ghi 我已经尝试了很多这样的组合 1 任何帮助表示赞赏 注意 上面的正则表达式返回 abc def

  • 如何在 AngularJS 中刷新/使 $resource 缓存失效

    我有一个简单的 User resource 它使用默认的 http 缓存实现 如下所示 factory User function resource return resource endpoint user current project

  • 使用 Angular 将焦点捕获在 html 容器中

    我正在构建一个可访问的网站并尝试管理焦点 我需要打开一个模式 然后将焦点放在模式中的第一个元素上 然后捕获焦点 直到模式关闭 取消 或 接受 HTML a href Open Modal a div h3 Terms of Service

  • PHP 邮件结果错误：“标头丢失”

    我已经使用 php 邮件表单有一段时间了 现在它无法在新网站上运行 出现以下错误结果 PHP 警告 mail function mail sendmail from 未在 php ini 中设置 或第 16 行 E home mypagef

  • Protractor：是否可以测试我的应用程序中没有404？

    我是量角器的新手 我想编写一个测试来查看是否存在带有 url 的锚点给出 404 错误 我见过这个如何用量角器测试html链接 https stackoverflow com questions 29212375 how to test h

  • 验证 Salesforce ID

    有没有办法验证 Salesforce ID 也许使用 RegEx 它们通常是 15 个字符或 18 个字符 但它们是否遵循我们可以用来检查它是否是有效 ID 的模式 验证 salesforce ID 有两个级别 使用正则表达式检查格式 a

  • Angularjs $http 似乎不理解响应中的“Set-Cookie”

    我有一个带有 Passport 模块的 Nodejs Express REST api 用于身份验证 登录方法 GET 在标头中返回一个 cookie 当我从 Chrome 调用它时 它工作正常 我的 cookie 已在我的浏览器中设置 但

  • 用于验证网络路径的正则表达式 PHP、jQuery、JavaScript、Ruby

    尝试找出用于验证网络路径的正则表达式 即 comp xyz or comp or comp x y z storage或者所有部分都更长的东西 但希望能够传达其要点 我目前拥有的是一个简单的输入字段 用户可以通过它传递信息 事情是我不希望他

  • grep 的贪婪行为

    我认为在正则表达式中 贪婪 适用于量词而不是整个匹配 然而 我观察到 grep E color auto a ab lt printf aab returns aab而不是aab 这同样适用于 sed 另一方面 在 pcregrep 和其他

  • Scala 正则表达式替换为匿名函数

    在 Ruby 中 我可以通过以下方式替换字符串中的字符 a one1two2three a gsub d e e to i 1 gt one2two3three 从第二行开始评估块的结果将替换模式中匹配的内容 我们可以在 Scala 中做类

  • 正则表达式在 R 中同时多次包含字母/特殊字符时删除单词

    我想删除那些单词中字母 特殊字符的数量同时出现两次以上的单词 例如 输入就像 Google in theee lland of whhhat c c and e 输出应该是 Google in lland of c c and x lt G

  • Zend RegEx Validator 的自定义有意义的错误消息

    我正在验证表单中的文本字段 如下所示 name new Zend Form Element Text name name gt setLabel First Name gt setRequired true gt addFilter new

  • 如何使用正则表达式验证 1-99 范围？

    我需要验证一些用户输入 以确保输入的数字在 1 99 范围内 含 这些必须是整数 Integer 值 允许前面加 0 但可选 有效值 1 01 10 99 09 无效值 0 007 100 10 5 010 到目前为止 我已经制定了以下正则

  • 离子初始加载时间

    我正在使用 Ionic 构建一个简单的应用程序 但我的应用程序在冷启动时的初始加载时间方面存在性能问题 这是我所做的 collection repeat 代替带有 track by 的 ng repeat 原生滚动 overflow scr

随机推荐