1. 首页
  2. 问题
  3. 表单验证-电子邮件验证无法在AngularJs中正常工作
一尘不染

表单验证-电子邮件验证无法在AngularJs中正常工作

angularjs

我正在使用Angular进行表单验证。

这是我用的-plunker-
edit我从Angularjs文档中获取了此代码-
绑定到窗体和控件状态使用了type，email但是当我运行它并输入abc@abc它时说它是有效的。我该如何解决
？

<!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>

PS：我是AngularJs的初学者

编辑：

同样以下输入也显示有效

预期的有效电子邮件


阅读 149

收藏
2020-07-04

共1个答案

一尘不染

尝试在电子邮件输入中使用ng-pattern。

<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>

它适合您的有效和无效案例。

看一个例子：普拉克

2020-07-04