uniapp动态循环表单校验失败:初始值校验
问题现象 💥
在实现动态增减的单价输入表单时(基于uv-form组件),遇到以下诡异现象:
<uv-input>
的v-model绑定初始值为数字类型时,required规则失效 ❌- 数字类型与字符串类型校验表现不一致 🔢
技术栈背景 🛠️
- 框架:Vue3 + uni-app
- UI库:uv-ui
- 校验方案:计算属性动态生成规则
示意图 🔍
解决方案 🚀
1.优先使用字符串类型做表单绑定
2.添加自定义校验规则(validator)解决初始值问题
<template><view class="form-box"><uv-form ref="refForm" :model="formvalue" labelWidth="100px" :rules="rules"><view class="form-list-item" v-for="(item, index) in formvalue.detailList" :key="index"><uv-form-item borderBottom label="单价" :prop="`detailList.${index}.amount`" required><uv-input inputAlign="right" type="digit" v-model="item.amount" placeholder="请输入单价" border="none"><template v-slot:suffix> 元 </template></uv-input></uv-form-item>&