AngularJS权威指南-表单验证

《AngularJS 权威教程》读书笔记,第七章——过滤器。

不知道为啥把表单验证放在这一章,表单验证跟过滤器有毛关系啊!

简介

AngularJS 能够将 HTML5 表单验证功能同它自己的验证指令结合起来使用。
要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记。
要使用表单验证,表单每项上都得有 name 属性。

内置校验指令

  1. 必填项:required
  2. 最小长度:ng-minlength=”5”
  3. 最大长度:ng-maxlength=”20”
  4. 模式匹配:ng-pattern=”[a-zA-Z]”
  5. 电子邮件:type=”email”
  6. 数字:type=”number”
  7. URL:type=”url”

内置表单字段属性

  1. 未修改的表单:formName.inputFieldName.$pristine
  2. 修改过的表单:formName.inputFieldName.$dirty
  3. 合法的表单:formName.inputFieldName.$valid
  4. 不合法的表单:formName.inputFieldName.$invalid
  5. 错误:formName.inputfieldName.$error

内置表单校验CSS样式

与上面的内置表单字段属性对应,分别是:ng-pristine, ng-dirty, ng-valid, ng-invalid, ng-error

自定义表单验证

通过 $parsers 和 $formatters 可以实现自定义表单验证,这两个分别怎么用,我也没看懂。。。下面的例子对自定义表单验证倒是很实用