我有一个带有输入字段和验证设置的表单,通过添加 required
属性等 . 但对于某些领域,我需要做一些额外的验证 . 我如何"tap in"进行 FormController
控制的验证?
自定义验证可能类似于“如果填写了这3个字段,则此字段是必需的,需要以特定方式进行格式化” .
FormController.$setValidity
中有一个方法,但看起来不像公共API,所以我宁愿不使用它 . 创建自定义指令并使用 NgModelController
看起来像另一个选项,但基本上要求我为每个自定义验证规则创建一个指令,这是我不想要的 .
实际上,将控制器中的字段标记为无效(同时保持 FormController
同步)可能是我在最简单的场景中完成工作所需要的,但我不知道该怎么做 .
12 回答
Edit: added information about ngMessages (>= 1.3.X) below.
标准表格验证消息(1.0.X及以上)
由于这是Google“Angular Form Validation”的最佳结果之一,目前,我想为来自那里的任何人添加另一个答案 .
这是“公开的”,不用担心 . 用它 . 这就是它的用途 . 如果不打算使用它,Angular开发人员会将其私有化 .
要进行自定义验证,如果您不想将Angular-UI用作建议的其他答案,则只需滚动自己的验证指令即可 .
以下是一些示例用法:
Note: in 1.2.X it's probably preferrable to substitute ng-if for ng-show above
这是强制性的plunker link
另外,我已经写了一些关于这个主题的博客文章更详细一些:
Angular Form Validation
Custom Validation Directives
编辑:在1.3.X中使用ngMessages
您现在可以使用ngMessages模块而不是ngShow来显示错误消息 . 它实际上可以处理任何事情,它不一定是一个错误信息,但这里是基础知识:
包括
<script src="angular-messages.js"></script>
参考模块声明中的
ngMessages
:在上面的标记中,
ng-message="personForm.email.$error"
基本上指定了ng-message
子指令的上下文 . 然后ng-message="required"
和ng-message="email"
指定要监视的上下文的属性 . Most importantly, they also specify an order to check them in . 它在列表中找到的第一个是"truthy"获胜,它将显示该消息而不显示其他消息 .并plunker for the ngMessages example
Angular-UI的项目包含一个ui-validate指令,它可能会帮助你解决这个问题 . 它让你指定一个函数来调用来进行验证 .
查看演示页面:http://angular-ui.github.com/,向下搜索Validate Headers .
从演示页面:
然后在你的控制器中:
您可以在验证方案中使用ng-required(“如果填写了这3个字段,则需要此字段”:
你可以使用Angular-Validator .
Example: using a function to validate a field
然后在你的控制器中你会有类似的东西
You can also do something like this:
(其中field1 field2和field3是范围变量 . 您可能还想检查字段是否不等于空字符串)
如果该字段未通过
validator
,则该字段将被标记为无效,用户将无法提交该表单 .有关更多用例和示例,请参阅:https://github.com/turinggroup/angular-validator
免责声明:我是Angular-Validator的作者
这是在表单中进行自定义通配符表达式验证的一种很酷的方法(来自:Advanced form validation with AngularJS and filters):
jsFiddle demo(支持表达式命名和多个表达式)
它类似于
ui-validate
,但你不需要这样做ui.utils .我最近创建了一个指令,允许基于表达式的角形式输入失效 . 可以使用任何有效的角度表达式,它使用对象表示法支持自定义验证密钥 . 用角度v1.3.8测试
你可以像这样使用它:
或者只是传入一个表达式(它将被赋予默认的validationKey“invalidIf”)
@synergetic我认为@blesh假设将函数验证如下所示
Update:
改进和简化的先前指令版本(一个而不是两个)具有相同的功能:
用法示例:
结果:相互依赖的测试表达式,其中验证器在其他的更改时执行指令模型和当前模型 .
测试表达式具有本地
$model
变量,您应该使用该变量将其与其他变量进行比较 .Previously:
我试图通过添加额外的指令来改进@Plantface代码 . 如果在多个ngModel变量中进行更改时需要执行表达式,则此额外指令非常有用 .
示例如何使用它来创建交叉验证字段:
执行
ensure-expression
以在ng-model
或任何ensure-watch
变量更改时验证模型 .在AngularJS中,定义自定义验证的最佳位置是Cutsom指令 . AngularJS提供ngMessages模块 .
对于自定义表单验证应该使用带有自定义指令的ngMessages模块 . 这里我有一个简单的验证,它将检查数字长度是否小于6在屏幕上显示错误
以下是如何创建自定义验证指令
$setValidity
是内置函数,用于将模型状态设置为有效/无效我扩展了@Ben Lesh的答案,能够指定验证是否区分大小写(默认)
使用:
码:
调用服务器的自定义验证
使用处理异步验证的ngModelController $asyncValidators API,例如向后端发出
$http
请求 . 添加到对象的函数必须返回一个必须在有效时解析或在无效时被拒绝的promise . 正在进行的异步验证按ngModelController.$pending
中的密钥存储 . 有关更多信息,请参阅AngularJS Developer Guide - Forms (Custom Validation) .有关更多信息,请参阅
ngModelController $asyncValidators API
AngularJS Developer Guide - Forms (Custom Validation) .
使用$ validators API
接受的答案使用
$parsers
和$formatters
管道添加自定义同步验证程序 . AngularJS 1.3添加了$validators
API,因此无需在$parsers
和$formatters
管道中放置验证器:有关更多信息,请参阅AngularJS ngModelController API Reference - $validators .
这个帖子中提供了一些很好的例子和库,但是它们并没有我想要的东西 . 我的方法:angular-validity - 一个基于promise的验证库,用于异步验证,带有可选的Bootstrap样式 .
OP用例的角度有效性解决方案可能如下所示:
这是一个Fiddle,如果你想把它旋转一下 . lib可在GitHub上找到,有详细的文档和大量的现场演示 .