自己开发一个表单校验组件
最近项目用到vant-ui 框架,挺精简的,组件交互感觉也不错,但是最致命的没有类似其他 框架的 校验功能,于是萌生一个 开发 form 组件的想法。
最后代码:点击查看
github:点击查看
开发准备阶段
看了一下其他带有校验功能的 组件库,思考了以下对这个form 组件一些初步的构想:
- 无需在页面中写校验的代码,只需要配置校验规则就好;
- 支持控制是否需要输入实时校验;
- 有一个全局校验的规则;
- 支持必填、正则、用户自定义校验
规划form表单组件的api
Attributes 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
rules | 校验规则 | json | – | – |
inputVail | 是否需要输入实时检验 | bool | true、false | false |
rules 参数说明
key | 说明 | 类型 | 可选值 | 默认值 |
---|
required | 必填标识 | bool | true、false | false |
regExp | 正则 | RegExp | – | – |
handleVailFun | 自定义校验函数,需返回bool | function | – | – |
Method 事件
事件名 | 说明 | 参数 | 返回值 |
---|
allVail | 获取整体校验结果 | 无 | bool(校验是否通过) |
Slot 插槽
ps:实际使用过程中,需要校验 van-field 作为插槽放到 form组件中。(因为组件需要获取到这些元素进行校验)