проверка ввода с использованием ng-blur (изменение цвета фона, если ввод неправильный)

Question

проверка ввода с использованием ng-blur (изменение цвета фона, если ввод неправильный)

0

У меня есть номер этого типа ввода. Он принимает символы типа "-", "." И "null", кроме цифр.

В настоящее время он принимает эти значения ниже.

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

Он не должен принимать значения выше, поскольку они не являются числом. Я пытаюсь поставить на него проверку, так что, как только пользователь выйдет из этого поля ввода после ввода ".3343..343.33", он выделяет поле ввода с красным цветом фона. Чтобы он уведомил пользователя о том, что введенный ввод не принят.

Может ли кто-нибудь дать мне знать, как добиться этого, используя ng-blur. Я видел один, используя опции ng-blur и ng-model. Есть ли простой способ добиться такого рода проверки.

Patrick 26 июль 2016, в 19:55

Источник

Теги:

javascript

angularjs

html5

css3

validation

2 ответа

0

Угловой автоматически присваивает контекстуальные классы ng-valid & ng-invalid для формирования полей, которые проходят проверку/завершение проверки. Вы можете назначить стили этим селекторам, чтобы иметь визуальные подтверждения. Существует также ряд других классов.

Вы можете настроить проверку с помощью атрибута HTML pattern='<regular_expression'. Однако в этом случае, по-видимому, существует по меньшей мере 2 ограничения:

браузеру не нравится применять регулярные выражения к числовым полям (чтобы исправить это, я переключился на ng-pattern в примере, который полностью обрабатывается Angular)
модели числового поля не обновляются после ввода десятичной точки до ввода другого символа (поэтому ввод 25. и остановка не является недопустимой)

Любой из них может быть исправлен путем переключения на обычный type='text', но затем вы теряете специальные элементы управления номером пользовательского интерфейса, такие как счетчик и клавиатура с цифрами на мобильном устройстве.

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="/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>

tdhsmith 27 июль 2016, в 01:49

Ещё вопросы

tom moc · Accepted Answer · 2016-07-26T16-18-00.000Z

Попробуйте этот метод, его рабочий

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="/angular.js" data-require="[email protected]"></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>

@ rejs - я пытаюсь заставить его работать во входном типе = 'число'. это тип ввода текста, который вы использовали. У тебя есть номер?
@ Патрик, я обновил код с помощью ввода type = 'number' во фрагменте кода. работает нормально Если вы хотите использовать предыдущий код с директивой, используйте эту ссылку plnkr.co/edit/YV5fnE0TVOtxRLF2Bpfb?p=preview