2

创建一个可以以下列方式使用的验证框架是否可行且不是特别困难：

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 验证框架？

4

3 回答 3

4

这是使用最新版本的 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>

于 2015-09-17T20:55:12.247 回答
1

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>

演示在这里

另一个非常详细的例子在这里

于 2016-03-26T03:06:23.957 回答
1

Angular 已经内置了一个验证框架，其中包括添加自定义验证的功能。这是通过创建定义验证函数的自定义指令，然后将这些指令作为属性添加到您的输入来完成的。来自 Angular 示例的 IE，我们创建了这个自定义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

于 2015-09-17T19:57:53.983 回答