Question

我有这个输入类型编号。它接受的字符类似于＆＃39; - ＆＃39;，＆＃39;。＆＃39;，并且除了数字之外还为null。

目前，它也接受以下这些值。

1) '.3343..343.33' 
2) '-0.45---.5'

它不应接受上述值，因为它们不是数字。我正在尝试对其进行验证，以便一旦用户在输入＆＃39; .3343..343.33＆＃39;后退出该输入字段，它会突出显示背景颜色为红色的输入字段。这样它就会通知用户输入的输入不被接受。

有人可以让我知道如何使用ng-blur实现这一目标。我也看到了一个使用ng-blur和ng-model-options的人。有没有一种简单的方法来实现这种验证。

Answer 1

试试这个方法，它的工作

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.value = true;
  
  $scope.blurT = function(){
   // $scope.value = true;
   var calc = Number($scope.inputValue) - Number($scope.inputValue);
  if(calc == 0){
     $scope.value = true;
    console.log(calc);
  } else { 
    $scope.value = false;
   
  }
    
  }
  $scope.checkClass = function(){
  var value = ($scope.value===true ? 'success':'error');
   return value;
    
  }
  
});

/* Put your css in here */

.error {
  border:1px solid #f00;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl">
  <input type="number" ng-class="{'error': value == false}"  ng-model="inputValue" ng-blur="blurT()">
   {{value}} 
  </body> 

</html>

Answer 2

Angular自动分配上下文类ng-valid＆amp; ng-invalid以形成通过/未通过验证的字段。您可以为这些选择器指定样式以获得可视验证信号。还有很多其他课程。

您可以使用HTML pattern='<regular_expression'属性设置验证。然而，在这种情况下，似乎至少有2个限制：

浏览器不喜欢将正则表达式应用于数字字段（为了解决此问题，我在示例中切换到ng-pattern，这完全由Angular处理）
输入小数点后数字字段模型不会更新，直到输入另一个字符为止（因此键入25.并停止无效）

通过切换到常规type='text'字段可以解决其中任何一个问题，但是您会丢失特殊的UI编号控件，例如移动设备上的微调器和数字键盘。

var app = angular.module('demo', [])
  .controller('main', function ($scope) {$scope.myNumber = 5;});

input.ng-invalid {
    box-shadow: 0 0 10px red;
    background: pink;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="main">
<form>
  Enter a number:
  <input type="number" ng-pattern="/^\d*$/" ng-model="myNumber"> = {{myNumber}}
</form>
</div>

使用ng-blur进行输入验证（如果输入错误则更改背景颜色）

2 个答案: