关于Vant-ui校验,自己开发一个表单校验组件(一)

自己开发一个表单校验组件

最近项目用到vant-ui 框架,挺精简的,组件交互感觉也不错,但是最致命的没有类似其他 框架的 校验功能,于是萌生一个 开发 form 组件的想法。
最后代码:点击查看
github:点击查看

开发准备阶段

看了一下其他带有校验功能的 组件库,思考了以下对这个form 组件一些初步的构想:

  1. 无需在页面中写校验的代码,只需要配置校验规则就好;
  2. 支持控制是否需要输入实时校验;
  3. 有一个全局校验的规则;
  4. 支持必填、正则、用户自定义校验

规划form表单组件的api

Attributes 属性

参数说明类型可选值默认值
rules校验规则json
inputVail是否需要输入实时检验booltrue、falsefalse

rules 参数说明

key说明类型可选值默认值
required必填标识booltrue、falsefalse
regExp正则RegExp
handleVailFun自定义校验函数,需返回boolfunction

Method 事件

事件名说明参数返回值
allVail获取整体校验结果bool(校验是否通过)

Slot 插槽

name说明
items表单子元素

ps:实际使用过程中,需要校验 van-field 作为插槽放到 form组件中。(因为组件需要获取到这些元素进行校验)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值