required通过添加属性等，我有一个带有输入字段和验证设置的表单。但对于某些领域，我需要做一些额外的验证。我将如何“利用”控制的验证FormController？
自定义验证可能类似于“如果填写了这 3 个字段，则此字段是必需的并且需要以特定方式格式化”。
有一个方法，FormController.$setValidity但它看起来不像公共 API，所以我宁愿不使用它。创建自定义指令并使用NgModelController看起来像是另一种选择，但基本上需要我为每个自定义验证规则创建一个指令，这是我不想要的。
实际上，将控制器中的字段标记为无效（同时保持FormController同步）可能是我在最简单的情况下完成工作所需要的，但我不知道该怎么做。
编辑：在下面添加了有关 ngMessages (>= 1.3.X) 的信息。
由于如果您使用 Google“Angular 表单验证”，这是最好的结果之一，目前，我想为从那里进来的任何人添加另一个答案。
FormController.$setValidity 中有一个方法，但它看起来不像公共 API，所以我宁愿不使用它。
这是“公开的”，不用担心。用它。这就是它的用途。如果不打算使用它，Angular 开发人员会在闭包中将其私有化。
要进行自定义验证，如果您不想像其他答案所建议的那样使用 Angular-UI，您可以简单地滚动您自己的验证指令。
app.directive('blacklist', function (){
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
var blacklist = attr.blacklist.split(',');
//For DOM -> model validation
ngModel.$parsers.unshift(function(value) {
var valid = blacklist.indexOf(value) === -1;
ngModel.$setValidity('blacklist', valid);
return valid ? value : undefined;
});
//For model -> DOM validation
ngModel.$formatters.unshift(function(value) {
ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
return value;
});
}
};
});
这是一些示例用法：
<form name="myForm" ng-submit="doSomething()">
<input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
<span ng-show="myForm.fruitName.$error.blacklist">
The phrase "{{data.fruitName}}" is blacklisted</span>
<span ng-show="myForm.fruitName.$error.required">required</span>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
注意：在 1.2.X 中，它可能更适合ng-if替换ng-show上面
这是一个强制性的plunker 链接
此外，我还写了一些关于这个主题的博客文章，其中包含更详细的内容：
您现在可以使用 ngMessages 模块而不是 ngShow 来显示错误消息。它实际上可以与任何东西一起使用，它不一定是错误消息，但这里是基础知识：
<script src="angular-messages.js"></script>ngMessages在您的模块声明中引用：
var app = angular.module('myApp', ['ngMessages']);
添加适当的标记：
<form name="personForm">
<input type="email" name="email" ng-model="person.email" required/>
<div ng-messages="personForm.email.$error">
<div ng-message="required">required</div>
<div ng-message="email">invalid email</div>
</div>
</form>
在上面的标记中，基本上为子指令ng-message="personForm.email.$error"指定了一个上下文。ng-message然后 在该上下文ng-message="required"上ng-message="email"指定要观察的属性。最重要的是，他们还指定了签入的顺序。它在列表中找到的第一个“真实”的获胜，它将显示该消息而不显示其他消息。
Angular-UI 的项目包括一个 ui-validate 指令，它可能会帮助你。它让您指定一个要调用的函数来进行验证。
查看演示页面：http ://angular-ui.github.com/ ，搜索到 Validate 标题。
从演示页面：
<input ng-model="email" ui-validate='{blacklist : notBlackListed}'>
<span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
然后在你的控制器中：
function ValidateCtrl($scope) {
$scope.blackList = ['bad@domain.com','verybad@domain.com'];
$scope.notBlackListed = function(value) {
return $scope.blackList.indexOf(value) === -1;
};
}
您可以将 ng-required 用于您的验证场景（“如果填写了这 3 个字段，则此字段是必需的”：
<div ng-app>
<input type="text" ng-model="field1" placeholder="Field1">
<input type="text" ng-model="field2" placeholder="Field2">
<input type="text" ng-model="field3" placeholder="Field3">
<input type="text" ng-model="dependentField" placeholder="Custom validation"
ng-required="field1 && field2 && field3">
</div>
您可以使用Angular-Validator。
示例：使用函数验证字段
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "myCustomValidationFunction(form.firstName)">
然后在你的控制器中你会有类似的东西
$scope.myCustomValidationFunction = function(firstName){
if ( firstName === "John") {
return true;
}
你也可以这样做：
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "'!(field1 && field2 && field3)'"
invalid-message = "'This field is required'">
（其中 field1 field2 和 field3 是范围变量。您可能还想检查字段是否不等于空字符串）
如果该字段未通过，validator则该字段将被标记为无效，用户将无法提交表单。
有关更多用例和示例，请参见：https ://github.com/turinggroup/angular-validator
免责声明：我是 Angular-Validator 的作者
这是在表单中进行自定义通配符表达式验证的一种很酷的方法（来自：Advanced form validation with AngularJS and filters）：
<form novalidate="">
<input type="text" id="name" name="name" ng-model="newPerson.name"
ensure-expression="(persons | filter:{name: newPerson.name}:true).length !== 1">
<!-- or in your case:-->
<input type="text" id="fruitName" name="fruitName" ng-model="data.fruitName"
ensure-expression="(blacklist | filter:{fruitName: data.fruitName}:true).length !== 1">
</form>
app.directive('ensureExpression', ['$http', '$parse', function($http, $parse) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, ngModelController) {
scope.$watch(attrs.ngModel, function(value) {
var booleanResult = $parse(attrs.ensureExpression)(scope);
ngModelController.$setValidity('expression', booleanResult);
});
}
};
}]);
jsFiddle demo（支持表达式命名和多个表达式）
它类似于ui-validate，但您不需要特定于范围的验证功能（这通常适用），当然您也不需要ui.utils这种方式。
我最近创建了一个指令，允许基于表达式的角度形式输入无效。可以使用任何有效的角度表达式，并且它支持使用对象表示法的自定义验证键。使用角度 v1.3.8 测试
.directive('invalidIf', [function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var argsObject = scope.$eval(attrs.invalidIf);
if (!angular.isObject(argsObject)) {
argsObject = { invalidIf: attrs.invalidIf };
}
for (var validationKey in argsObject) {
scope.$watch(argsObject[validationKey], function (newVal) {
ctrl.$setValidity(validationKey, !newVal);
});
}
}
};
}]);
你可以像这样使用它：
<input ng-model="foo" invalid-if="{fooIsGreaterThanBar: 'foo > bar',
fooEqualsSomeFuncResult: 'foo == someFuncResult()'}/>
或者只是传入一个表达式（它将被赋予“invalidIf”的默认validationKey）
<input ng-model="foo" invalid-if="foo > bar"/>
@synergetic 我认为@blesh 假设将函数验证如下
function validate(value) {
var valid = blacklist.indexOf(value) === -1;
ngModel.$setValidity('blacklist', valid);
return valid ? value : undefined;
}
ngModel.$formatters.unshift(validate);
ngModel.$parsers.unshift(validate);
更新：
具有相同功能的先前指令的改进和简化版本（一个而不是两个）：
.directive('myTestExpression', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
var expr = attrs.myTestExpression;
var watches = attrs.myTestExpressionWatch;
ctrl.$validators.mytestexpression = function (modelValue, viewValue) {
return expr == undefined || (angular.isString(expr) && expr.length < 1) || $parse(expr)(scope, { $model: modelValue, $view: viewValue }) === true;
};
if (angular.isString(watches)) {
angular.forEach(watches.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
ctrl.$validate();
});
});
}
}
};
}])
示例用法：
<input ng-model="price1"
my-test-expression="$model > 0"
my-test-expression-watch="price2,someOtherWatchedPrice" />
<input ng-model="price2"
my-test-expression="$model > 10"
my-test-expression-watch="price1"
required />
结果：相互依赖的测试表达式，其中验证器在其他指令模型和当前模型的更改时执行。
测试表达式具有局部$model变量，您应该使用它来将其与其他变量进行比较。
之前：
我试图通过添加额外的指令来改进@Plantface 代码。如果在多个 ngModel 变量中进行更改时需要执行我们的表达式，这个额外的指令非常有用。
.directive('ensureExpression', ['$parse', function($parse) {
return {
restrict: 'A',
require: 'ngModel',
controller: function () { },
scope: true,
link: function (scope, element, attrs, ngModelCtrl) {
scope.validate = function () {
var booleanResult = $parse(attrs.ensureExpression)(scope);
ngModelCtrl.$setValidity('expression', booleanResult);
};
scope.$watch(attrs.ngModel, function(value) {
scope.validate();
});
}
};
}])
.directive('ensureWatch', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ensureExpression',
link: function (scope, element, attrs, ctrl) {
angular.forEach(attrs.ensureWatch.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
scope.validate();
});
});
}
};
}])
示例如何使用它来制作交叉验证字段：
<input name="price1"
ng-model="price1"
ensure-expression="price1 > price2"
ensure-watch="price2" />
<input name="price2"
ng-model="price2"
ensure-expression="price2 > price3"
ensure-watch="price3" />
<input name="price3"
ng-model="price3"
ensure-expression="price3 > price1 && price3 > price2"
ensure-watch="price1,price2" />
ensure-expressionng-model当或任何ensure-watch变量更改时执行以验证模型。
使用处理异步验证的ngModelController $asyncValidatorsAPI，例如$http向后端发出请求。添加到对象的函数必须返回一个必须在有效时解析或在无效时拒绝的承诺。进行中的异步验证通过密钥存储在ngModelController.$pending. 有关更多信息，请参阅AngularJS 开发人员指南 - 表单（自定义验证）。
ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
var value = modelValue || viewValue;
// Lookup user by username
return $http.get('/api/users/' + value).
then(function resolved() {
//username exists, this means validation fails
return $q.reject('exists');
}, function rejected() {
//username does not exist, therefore this validation passes
return true;
});
};
有关详细信息，请参阅
$validatorsAPI接受的答案使用$parsers和$formatters管道添加自定义同步验证器。AngularJS 1.3+ 添加了一个$validatorsAPI，因此无需将验证器放入$parsers和$formatters管道中：
app.directive('blacklist', function (){
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
ngModel.$validators.blacklist = function(modelValue, viewValue) {
var blacklist = attr.blacklist.split(',');
var value = modelValue || viewValue;
var valid = blacklist.indexOf(value) === -1;
return valid;
});
}
};
});
在 AngularJS 中，定义自定义验证的最佳位置是 Cutsom 指令。AngularJS 提供了一个 ngMessages 模块。
ngMessages 是一个指令，旨在根据它所侦听的键/值对象的状态显示和隐藏消息。该指令本身使用 ngModel $error 对象（存储验证错误的键/值状态）补充错误消息报告。
对于自定义表单验证一个应该使用带有自定义指令的 ngMessages 模块。这里我有一个简单的验证，它将检查数字长度是否小于 6 在屏幕上显示错误
<form name="myform" novalidate>
<table>
<tr>
<td><input name='test' type='text' required ng-model='test' custom-validation></td>
<td ng-messages="myform.test.$error"><span ng-message="invalidshrt">Too Short</span></td>
</tr>
</table>
</form>
这是创建自定义验证指令的方法
angular.module('myApp',['ngMessages']);
angular.module('myApp',['ngMessages']).directive('customValidation',function(){
return{
restrict:'A',
require: 'ngModel',
link:function (scope, element, attr, ctrl) {// 4th argument contain model information
function validationError(value) // you can use any function and parameter name
{
if (value.length > 6) // if model length is greater then 6 it is valide state
{
ctrl.$setValidity('invalidshrt',true);
}
else
{
ctrl.$setValidity('invalidshrt',false) //if less then 6 is invalide
}
return value; //return to display error
}
ctrl.$parsers.push(validationError); //parsers change how view values will be saved in the model
}
};
});
$setValidity是用于将模型状态设置为有效/无效的内置函数
我扩展了@Ben Lesh 的答案，能够指定验证是否区分大小写（默认）
采用：
<input type="text" name="fruitName" ng-model="data.fruitName" blacklist="Coconuts,Bananas,Pears" caseSensitive="true" required/>
代码：
angular.module('crm.directives', []).
directive('blacklist', [
function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
'blacklist': '=',
},
link: function ($scope, $elem, $attrs, modelCtrl) {
var check = function (value) {
if (!$attrs.casesensitive) {
value = (value && value.toUpperCase) ? value.toUpperCase() : value;
$scope.blacklist = _.map($scope.blacklist, function (item) {
return (item.toUpperCase) ? item.toUpperCase() : item
})
}
return !_.isArray($scope.blacklist) || $scope.blacklist.indexOf(value) === -1;
}
//For DOM -> model validation
modelCtrl.$parsers.unshift(function (value) {
var valid = check(value);
modelCtrl.$setValidity('blacklist', valid);
return value;
});
//For model -> DOM validation
modelCtrl.$formatters.unshift(function (value) {
modelCtrl.$setValidity('blacklist', check(value));
return value;
});
}
};
}
]);
该线程中提供了一些很棒的示例和库，但它们并不完全符合我的要求。我的方法：angular-validity——一个基于 promise 的异步验证验证库，带有可选的 Bootstrap 样式。
OP 用例的角度有效性解决方案可能如下所示：
<input type="text" name="field4" ng-model="field4"
validity="eval"
validity-eval="!(field1 && field2 && field3 && !field4)"
validity-message-eval="This field is required">