前言
- 之前在这里实现了常见表单字段类型风格的统一，其中表单验证使用了基于html5的表单验证
- 本节将介绍angular自定义指令实现复杂的表单验证。如异步验证、多字段交叉验证
源码地址
在线预览
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，用于显示验证失败提示
-
下图源码
-
下图源码
交叉验证
其他
- 注意自定义指令不要忘记要导入到需要用到的模块
