我想我有一个错误的AngularJS电子邮件模式或者什么?

时间:2015-08-03 05:57:54

标签: javascript angularjs

这是我的video

我在@标记前面放了一些空格但是提交按钮没有消失,为什么?这仍然是一个错误的错误值,我希望提交按钮消失。

我的代码就像这样

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="ctrljs">
    <form name='myForm' ng-controller='formctrl'>
        <input type='email' name='email' ng-model='email' required ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/">
        <span ng-show='myForm.email.$error.email'> <font color='red'>invalid email</font></span>
        <input type='submit' value='submit' ng-hide="!myForm.$valid"></input>
    </form>
    <script>
        var app = angular.module('ctrljs', []);
        app.controller('formctrl', function($scope, $http){
          $scope.digits = {};
        });
    </script>
</body>
</html>
请帮助我,谢谢。

1 个答案:

答案 0 :(得分:3)

电子邮件有效,因为angular会为您修剪该空白。请参阅下面的示例。如果在示例之前键入空格。你会看到它变得有效。

&#13;
&#13;
var app = angular.module('ctrljs', []);
app.controller('formctrl', function($scope, $http) {
  $scope.email = "   example@example.com";
});
&#13;
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>

<body ng-app="ctrljs">
  <form name='myForm' ng-controller='formctrl'>
    <pre>{{email}}</pre>
    <input type='email' name='email' ng-model='email' required ng-pattern="/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/">
    <span ng-show='myForm.email.$error.email'> <font color='red'>invalid email</font></span>
    <input type='submit' value='submit' ng-hide="!myForm.$valid">
  </form>
</body>
&#13;
&#13;
&#13;

不幸的是ng-trim type="email"没有type=email看到这里的文档:

https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

如果你想防止自动修剪发生,你必须修补。

同样从文档中,@Override public void onBindViewHolder(GridViewHolder gridViewHolder, int i) { PorterDuffColorFilter greyFilter = new PorterDuffColorFilter(0xffc6c9ce, PorterDuff.Mode.SRC_ATOP); PorterDuffColorFilter greyFilterImg = new PorterDuffColorFilter(0xFF6E6E6E, PorterDuff.Mode.SRC_ATOP); for (Map.Entry<String, String> mapEntry : items.get(i).entrySet()) { String key = mapEntry.getKey(); String value = mapEntry.getValue(); gridViewHolder.keyTxtView.setText(key); gridViewHolder.valueTxtView.setText(value); if (value == null || value.equals("")) { gridViewHolder.my_imgview.getDrawable().mutate().setColorFilter(greyFilterImg); gridViewHolder.getContainerView().getBackground().setColorFilter(greyFilter); } } } 输入已使用此文件中的正则表达式进行内置验证: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js

除非您需要更严格或更宽松的验证,否则您不需要自己提供。