背景
大家一定在官网中看到了下图这一段内容,而且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"