uniapp开发微信小程序时,动态表单验证validateFunction的正确姿势

背景

大家一定在官网中看到了下图这一段内容,而且99%的同学应该都能正确使用
在这里插入图片描述
总结一下就是说,因为微信小程序的表单验证机制(实际上是它的元素加载机制导致以及微信小程序对元素中动态函数的限制问题),所以uniapp在实现的时候,让大家在onReady里面去主动的设置rules,以达到元素渲染以后能够加载rules的自定函数的能力。

但是,有50%+的同学,一定遇到了,当rules中存在动态表单字段的validateFunction时,这个validateFunction没有执行的问题。

因为官网没有在说清楚应该怎么做,大部分同学只能看到,需要在onReady里面给uni-forms设置一个rules,但是仅仅给uni-forms设置整体的rules,其中的动态字段的validateFunction是一定不会执行的

分析过程

主要是跟踪了一下源码,基本上略过吧。。。。

结论说一下,实际上还是因为前面说的,微信小程序元素加载机制导致以及微信小程序对元素中动态函数的限制问题。一个动态组件渲染出来以后,如果不主动给它设置rules,那么他就只能绑定rules中不含动态函数的部分,这也就是无论你怎么给uni-forms设置setRules,动态增加出来的uni-forms-item只能绑定静态rules。

处理方法

直接说答案吧,其实就是要想办法给动态增加出来的uni-forms-item也setRules


1、原始例子

假设有如下动态表单(就以官网的例子为例),在这个例子中,rules有两个静态规则,用于验证新增加的email不能为空、必须符合email形式。

HTML

<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData">
	<uni-forms-item label="邮箱" required name="email">
		<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入邮箱" />
	</uni-forms-item>
	<template v-for="(item,index) in dynamicFormData.domains">
		<uni-forms-item :label="item.label+' '+index" required
			:rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id"
			:name="['domains',index,'value']">
			<view class="form-item">
				<uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" />
				<button class="button" size="mini" type="default" 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sb熙哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值