关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案

最新推荐文章于 2025-04-02 14:35:01 发布
原创 最新推荐文章于 2025-04-02 14:35:01 发布
· 4.2k 阅读 · 6 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #ui #前端

本文介绍了在uni-app中遇到的uni-forms表单验证问题，特别是对于多级结构对象数据的处理。当formsData包含多级对象时，常规的验证方法无法生效。解决方案是采用uni-app的动态表单校验，通过数组方式表示name，将多级key组合在数组中，以此实现数据校验。这种方法避免了在uni-forms的rules中为每一级key定义规则。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

- 前言

这几天在做uni-app表单验证时遇到了一个问题，按官方文档给出的方法，当需要数据校验时，只需要
1.为uni-forms中的"modelValue"数据设置“:rules”对应
2.“uni-forms-item”的name和“uni-easyinput”中“v-model”中的key和“rules”中的key相同
就可以对该项“uni-easyinput”做数据校验了。
在这里插入图片描述
在这里插入图片描述

这一步很多人看官方文档就能够写好，并没有其他问题。

- 问题

问题在于，formsData不可能只是一层对象，这里面很可能是对象包对象，也就是“多级结构对象数据”（如图所示），此时，按上面的校验方法，当“uni-easyinput”后面有很多级时，name就不知道如何写了，rules也没有可以参照的方法。
在这里插入图片描述

如果你再按下图这样写，那name是找不到rules中与

最低0.47元/天 解锁文章
uni-forms表单校验有很多坑，uniapp项目，我的表单是写在tab切换页中的，
Frank_colo的博客
01-15 742
我的表单是写在tab切换页中的，这和一般写在最外层的表单不一样，当你点提交按钮时，返回的是一个数组，你有3个tab,就有3个数组，你需要通过下标拿到你表单所在的tab对应的数组。
uni-app 提交完表单，自动重置表单
希默
06-06 1502
uni-app 并没有给表单组件提供类似resetForm的 API，只能通过这两种方法实现，如果有其他方法，欢迎其一探讨。
自定义表单验证
05-13
简单的js表单验证 <script type="text/javascript"> function validatename(){ var userN=document.myform.userName.value; if(userN.length==0){ document.getElementById("nerror").innerHTML="请输入用户名！"; return false; } else{ for(var i=0; i<userN.length;i++) { var un=userN.substring(i,i+1); if(!(un>="a" && un<="z") && !(un>="A" && un<="Z")){ document.getElementById("nerror").innerHTML="用户名中不能包含数字与特殊字符！"; return false; } } document.getElementById("nerror").innerHTML=""; return true; } } function validatePW(){ var userPW=document.myform.userPassWord.value; if(userPW.length==0){ document.getElementById("pwerror").innerHTML="请输入密码！"; return false; } else if(userPW.length<6){ document.getElementById("pwerror").innerHTML="密码长度不能小于6位并且不能包含特殊字符" } } function validate(){ if(validatename() && validatePW()) { return true; } return false; } </script>
uniapp表单数据为“多级结构”，如何做校验
熬夜搬码员的博客
04-13 1325
其实针对“多级结构数据”，可以使用“动态表单校验”。给单个uni-forms-item添加rule，给name绑定数组形式。开发项目的时候使用uniapp的表单 表单数据为多级结构，也就是对象里面嵌套对象，如何做校验？
uniapp的uni-forms组件校验问题
最新发布
weixin_44891982的博客
04-02 147
validate为null。
uni-app form表单校验
热门推荐
票票的博客
01-13 2万+
插件 主要对 name 字段进行必填验证，提交事件通过 form-type 绑定 <uni-forms ref="signUpForm" :value="signUpFormData" :rules="rules"> <uni-forms-item label="" name="username"> <uni-easyinput type="number" placeholder="请输入登录手机号码" v-model="signUpFormData.username"
uniapp form表单校验
Hanx_的博客
07-18 1633
光一个表单校验，就整了半天，以前用的都是element-ui的，现成的组件，这有换成uni-form的，记录一下怎么用的，还用到了uni-data-picker选择器（不过只能两级，得搞个方法封装一下能多级。公司的一个老项目，又要重新上架，uniapp一套代码，打包生成iOS端发布到App Store，安卓端发布到腾讯应用宝、OPPO、小米、华为、vivo，安卓各大应用市场上架要求不一样，可真麻烦啊。包括：必填校验，手机号校验，身份证号校验，邮箱校验。name要对应model里的值，要统一。
uniapp多层对象多个表单校验
weixin_56718657的博客
03-17 380
【代码】uniapp多层对象多个表单校验。
uniapp uni-forms实现表单校验
Serenity_Qin的博客
01-28 3189
1. 需要设置 name 属性为当前字段名 （与 rules 中的相对应）3. 自定义各个字段的校验规则（validateFunction）4. 表单校验（this.$refs.form.validate）2. 在 onReady 中设置规则。本文为自定义校验归责的实现方法。
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
关于vscode开发uni-app中依赖@uni-helper/uni-app-types的配置 “vueCompilerOptions“不允许属性 nativeTags问题解决
qq_45937792的博客
05-29 6850
vscode开发uniapp+vue3+ts使用@uni-helper/uni-app-types时tsconfig.json中的 "vueCompilerOptions"属性配置问题
form表单验证对表中数据的校验
weixin_42803027的博客
08-08 5966
form表单验证时对表中数据的校验 在做项目时，被要求当添加表时，要对非主键的编号进行校验，当为空时，提示空值；非空但与数据库重复时，提示已存在。 使用rules和message 在form.validate中，提交时，我们用到submitHandle,在对数据添加规则时，要使用rules，看代码： $(document).ready(function() { ...
uniapp表单uni-forms校验自定义校验规则，手机校验、身份证校验
m0_48259951的博客
06-13 2万+
validateFunction 自定义校验规则 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，这时候需要通过ref，在生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。.........
uniapp之表单校验
weixin_44634613的博客
03-31 1万+
validateFunction 方法返回四个参数 validateFunction:function(rule,value,data,callback){} ，当然返回参数名开发者可以自定义：rule : 当前校验字段在 rules 中所对应的校验规则value : 当前校验字段的值data : 所有校验字段的字段和值的对象。
表单动态自定义校验以及数据多层嵌套
m0_63084496的博客
04-22 659
动态表单效验，设计的数据嵌套多
uniapp中使用uni-forms实现表单管理，验证表单
m0_69665878的博客
11-25 4041
uni-forms 是一个用于表单管理的组件。它提供了一种简化和统一的方式来处理表单数据，包括表单验证、字段绑定和提交逻辑等。使用 uni-forms可以方便地创建各种类型的表单，支持数据双向绑定，可以与其他组件及API进行良好的集成。开发者可以提升表单处理的效率，并确保用户输入的数据符合预期要求。uni-forms 组件通常用来做表单校验和提交。每一个 uni-forms-item 是它的一个表单域组件，用来承载表单具体内容，uni-forms-item 中可以嵌套 uni-easyinput、uni-d
关于uniapp开发使用uni-ui组件表单校验一直不通过的原因及解决方案
qq_40128591的博客
07-05 2798
今天使用uniapp开发东西的时候，发现我的表单校验一直通不过，后面才发现少东西了。我在uni-forms上少放了modelValue，但在官方文档上没有提示。所以要做验证必须加这个属性。因为直接像下面这样写也是可以双向绑定的，谁能想到，
小程序表单校验uni-forms正确使用方式及避坑指南
iamlujingtao的博客
05-13 2万+
解决小程序上使用uni-forms表单验证的问题，实现即时校验、自定义校验规则、异步校验，满足绝大部分表单校验！
uniapp动态表单校验 深层对象表单校验 表单不会自动校验 校验第二次失效
weixin_50448781的博客
04-28 2870
代码中我用的是for in 去循环数组的 因为我之前写的动态表单是个对象 前面的索引是从1开始 页面用v-for循环也是从索引 1 开始循环的 介意的话可以全使用foreach 其他 但是用for in 去循环数组也没啥问题 我只是懒得改了；主要的bug就是uniapp这些表单不会自动校验 或者说是不会校验第二次就很恶心，所以我在输入框绑定的两个input和blur事件来处理 算是歪门邪道 但也是解决bug的关键方法；
uni-forms
03-20
### uni-forms 组件的使用方法 `uni-forms` 是 `uni-app` 提供的一个增强型表单组件，支持双向绑定和复杂的校验功能。以下是关于其基本使用方法以及一些常见场景下的注意事项。 #### 基本使用 通过 `uni-forms` 的属性配置可以轻松实现表单的数据绑定与验证。核心属性包括： - **model**: 表单数据对象，用于存储表单字段值。 - **rules**: 验证规则，定义每个字段的校验逻辑[^2]。 下面是一个简单的例子展示如何初始化并使用 `uni-forms` 进行表单验证： ```vue <template> <view> <uni-forms :model="formData" :rules="formRules"> <!-- 输入框 --> <uni-forms-item name="username"> <uni-easyinput v-model="formData.username" placeholder="请输入用户名"></uni-easyinput> </uni-forms-item> <!-- 密码输入框 --> <uni-forms-item name="password"> <uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码"></uni-easyinput> </uni-forms-item> <!-- 提交按钮 --> <button @click="submitForm">提交</button> </uni-forms> </view> </template> <script> export default { data() { return { formData: { username: '', password: '' }, formRules: { username: { required: true, message: '用户名不能为空', trigger: ['blur'] }, password: { required: true, minLength: 6, message: '密码长度至少为6位', trigger: ['change'] } } }; }, methods: { submitForm() { this.$refs.uniForms.validate().then(res => { console.log('表单验证成功:', res); }).catch(err => { console.error('表单验证失败:', err); }); } } }; </script> ``` 上述代码展示了如何创建一个带有两个字段（用户名和密码）的简单表单，并为其设置了基础的校验规则[^1]。 #### 自定义校验函数 对于更复杂的需求，可以通过 `validateFunction` 定义自定义校验逻辑。需要注意的是，虽然文档建议优先使用内置的方式，但在某些特殊情况下可能需要结合两者来满足需求。 示例代码如下： ```javascript methods: { customValidate(data) { const errors = {}; if (data.age && typeof data.age !== 'number') { errors.age = '年龄必须是数字'; } return errors; }, async submitForm() { try { await this.$refs.uniForms.validate(this.customValidate.bind(this)); console.log('所有校验均通过'); } catch (err) { console.error('存在未通过的校验项:', err); } } } ``` 此部分实现了针对特定字段（如年龄）进行额外类型的检查[^3]。 #### 处理多级嵌套数据结构 当遇到较为复杂的模型时，比如包含数组或多层嵌套的对象，则需特别注意名称映射关系。确保每一层级路径都正确匹配到实际数据源上。 假设有一个这样的 JSON 数据结构 `{ user: { profile: { email: "" } } }`, 对应的 HTML 应该写成这样: ```html <uni-forms-item name="user.profile.email"> <uni-easyinput v-model="formData.user.profile.email" /> </uni-forms-item> ``` 同时也要调整相应的 rules 设置:`'user.profile.email': {...}`. --- ###
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值