更新记录
1.4.0(2022-06-30)
- 【重要】组件逻辑重构,部分用法用旧版本不兼容,请注意兼容问题
- 【重要】组件使用 Provide/Inject 方式注入依赖,提供了自定义表单组件调用 uni-forms 校验表单的能力
- 新增 model 属性,等同于原 value/modelValue 属性,旧属性即将废弃
- 新增 validateTrigger 属性的 blur 值,仅 uni-easyinput 生效
- 新增 onFieldChange 方法,可以对子表单进行校验,可替代binddata方法
- 新增 子表单的 setRules 方法,配合自定义校验函数使用
- 新增 uni-forms-item 的 setRules 方法,配置动态表单使用可动态更新校验规则
- 优化 动态表单校验方式,废弃拼接name的方式
1.3.3(2022-06-22)
- 修复 表单校验顺序无序问题
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | × | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 小红书小程序 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
Forms 表单
组件名:uni-forms 代码块:
uForms
、uni-forms-item
关联组件:uni-forms-item
、uni-easyinput
、uni-data-checkbox
、uni-group
。
uni-app的内置组件已经有了 <form>
组件,用于提交表单内容。
然而几乎每个表单都需要做表单验证,为了方便做表单验证,减少重复开发,uni ui
又基于 <form>
组件封装了 <uni-forms>
组件,内置了表单验证功能。
<uni-forms>
提供了 rules
属性来描述校验规则、<uni-forms-item>
子组件来包裹具体的表单项,以及给原生或三方组件提供了 binddata()
来设置表单值。
每个要校验的表单项,不管input还是checkbox,都必须放在<uni-forms-item>
组件中,且一个<uni-forms-item>
组件只能放置一个表单项。
<uni-forms-item>
组件内部预留了显示error message的区域,默认是在表单项的底部。
另外,<uni-forms>
组件下面的各个表单项,可以通过<uni-group>
包裹为不同的分组。同一<uni-group>
下的不同表单项目将聚拢在一起,同其他group保持垂直间距。<uni-group>
仅影响视觉效果。