AngularJS Validation Framework

Является ли возможным и не особенно трудным создание структуры проверки, которая могла бы использоваться следующим образом:

var myValidations = 
[
 {   'A',
      'This is required',
       function(item) {return item != null;}
    },
    {
     'B',
      "Max 10 chars",
       function(item) {return item.length <=10 && item.length >0;}
    },
    {
     'C',
      'Must start with Z',
       function(item) {return item[0] == 'Z'}
    }];

    $scope.model.Message.AddValidation('A');
    $scope.model.Message.AddValidation('C');

    $scope.onSave = function()
    {
        if(!$scope.model.IsValid)
        {
            // $scope.model.errors
        }

    }

<input type="text" ng-model="model.Message"/>

Что может быть задействовано для реализации базовой реализации?

Возможно, существуют существующие платформы AngularJS Validation с похожими концепциями использования, на которые я еще не наткнулся?

Источник

3 ответа

Вот как вы могли бы сделать это, используя последнюю версию angular и создавая собственные директивы валидации, использующие каркас валидации AngularJS:

Шаг 1: добавить стиль

Это чтобы вещи выглядели красиво...

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style>
  ul {
    margin: 0;
    padding:0;
  }
</style>

Шаг 2: Добавить библиотеки AngularJS

Вам нужны основные библиотеки AngularJS и ngMessages:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js"></script>

Шаг 3: Определите ваши директивы валидации

Да, я знаю, что уже есть предопределенные директивы AngularJS для "требуемой" и "максимальной длины", но это ответ SO, и важно, чтобы вы знали, как определить его самостоятельно.

app.directive('rqrd', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      ngModel.$validators.rqrd = function(modelValue, viewValue) {
        var value = modelValue || viewValue;
        return value != null && value != undefined && value != '';
      }
    }
  }
});

app.directive('max', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      var maxValue = parseInt(attr.max);
      ngModel.$validators.max = function(modelValue, viewValue) {
        var value = modelValue || viewValue;
        return value.length > 0 && value.length <= maxValue;
      }
    }
  } 
});

app.directive('startsWith', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      ngModel.$validators.startsWith = function(modelValue, viewValue) {
        var value = modelValue || viewValue;
        return value && value.length > 0 && value.indexOf(attr.startsWith) == 0;
      }
    }
  } 
});

Шаг 4: Используйте ваши директивы валидации 

<form name="form">

  Favorite Color   <br />
  <input name="color" ng-model="color" rqrd max="10"  />  
  <ul ng-messages="form.color.$error">
     <li ng-message="rqrd" class="label label-danger">This is required</li>
     <li ng-message="max" class="label label-danger">Max 10 chars</li>
  </ul> 
  Name <br />
  <input name="name" ng-model="name" starts-with="Z"  /> 
    <ul ng-messages="form.name.$error">
     <li ng-message="rqrd" class="label label-danger">Please enter an Age</li>
     <li ng-message="startsWith" class="label label-danger">Must start with Z</li>
  </ul> 

</form>

Проверка правильности формы 

if ($scope.form.$valid) {
   ...
}


    var app = angular.module('app', ['ngMessages']);

    app.controller('ctrl', function($scope) {
       
    });

    app.directive('rqrd', function() {
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
          ngModel.$validators.rqrd = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            return value != null && value != undefined && value != '';
          }
        }
      }
    });

    app.directive('max', function() {
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
          var maxValue = parseInt(attr.max);
          ngModel.$validators.max = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            return value.length > 0 && value.length <= maxValue;
          }
        }
      } 
    });

    app.directive('startsWith', function() {
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
          ngModel.$validators.startsWith = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            return value && value.length > 0 && value.indexOf(attr.startsWith) == 0;
          }
        }
      } 
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <style>
      ul {
        margin: 0;
        padding:0;
      }
    </style>

    <h3>Example heading </h3>
    <div ng-app="app" ng-controller="ctrl">
    <form name="form">

      Favorite Color   <br />
      <input name="color" ng-model="color" rqrd max="10"  />  
      <ul ng-messages="form.color.$error">
         <li ng-message="rqrd" class="label label-danger">This is required</li>
         <li ng-message="max" class="label label-danger">Max 10 chars</li>
      </ul> 
      Name <br />
      <input name="name" ng-model="name" starts-with="Z"  /> 
        <ul ng-messages="form.name.$error">
         <li ng-message="rqrd" class="label label-danger">Please enter an Age</li>
         <li ng-message="startsWith" class="label label-danger">Must start with Z</li>
      </ul> 
    </form>
      
    </div>

Источник

Очень хорошая структура в github https://github.com/turinggroup/angular-validator

<div class="col-sm-10">


<input  type = "text"
 name = "blur"
 validate-on="blur"
  class = "form-control"
ng-model = "form.blur"
  ng-pattern="/regex/"
  invalid-message="'You must enter the word `regex`'"
  required-message="'Yo! This field is required..'"
  required></div>

Демо здесь

Еще один подробный пример здесь

Источник

В Angular уже есть встроенная среда валидации, которая включает в себя возможности добавления пользовательских валидаций. Это делается путем создания пользовательских директив, которые определяют функции проверки, а затем добавления этих директив в качестве атрибутов к вашему входу. IE из примера Angular, мы создаем этот кастом integer директива:

app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.integer = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    }
  };
});

Затем добавьте его в наш вход:

<input type="number" ng-model="size" name="size"
           min="0" max="10" integer />{{size}}<br />

И тогда мы можем получить доступ к его статусу проверки путем запроса form.size.$error.integer

Источник
Другие вопросы по тегам