前言

• 之前在这里实现了常见表单字段类型风格的统一，其中表单验证使用了基于html5的表单验证
• 本节将介绍angular自定义指令实现复杂的表单验证。如异步验证、多字段交叉验证

源码地址

https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/pages/demo/form-validation-demo/form-validation-demo.html

在线预览

https://yanxiaojun617.com/ionic2_tabs/

普通的表单验证

• 如下图，required和pattern都是html5提供的表单验证属性，使用pattern(正则表达式)验证可以满足大部分验证规则。更多详情可以看这里
  

公用常用正则表达式

• pattern很强大也比较复杂，可以把一些常用的正则表达式剥离出来，如手机号验证，邮箱，用户名等
• 如下图使用自定义指令validator-regular验证用户名和手机号
  
• 如下图根据参数key获取公共的正则表达式进行验证。源码
  
• 下图源码
  

异步验证

• 自定义指令异步验证，判断用户名是否存在。参考官网文档
  
• 如下图
  validator-username-exist：自定义的指令名称
  *ngIf="testName.pending"：异步验证过程中pending属性为true，可以显示loading效果
  testName.errors.exist：用户名已经存在，则errors.exist值不为null，用于显示验证失败提示
  
• 下图源码
  
• 下图源码
  

交叉验证

• 验证两次密码输入是否一致。 参考官网文档
  
• 如下图，多字段交叉验证需要把自定义指令添加到父级form元素上，错误信息也会附加在form元素上
  
• 下图源码
  

其他

• 注意自定义指令不要忘记要导入到需要用到的模块