uniapp插件uview下表单无法动态校验的问题解决
更新时间：2022年12月27日 09:15:07 作者：csdn_zuirenxiao
最近项目中用到了uview 在做表单时用到了校验,发现校验不友好的结果,下面这篇文章主要给大家介绍了关于uniapp插件uview下表单无法动态校验的问题解决,需要的朋友可以参考下
脚本之家 / 编程助手：解决程序员“几乎”所有问题！
脚本之家官方知识库 → 点击立即使用
声明：关于uniapp插件uview表单动态校验的一个解决方案
1.uview小程序必须用
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
this.$refs.form1.setRules(this.rules)
2.动态使用，v-for需要放在u-form下的view下面
3.绑定的校验规则rules和表单model下面放置一个同名数组，确保u-form能找到
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | form: { dynamicAry: [],},myrules: { dynamicAry: []},guigerules: { name: [{ required: true, message: '此为必填字段', // blur和change事件触发检验 trigger: ['blur', 'change'], }, { min: 2, max: 12, message: '长度在2-12个字符之间' }, ], price: [{ required: true, message: '此为必填字段', // blur和change事件触发检验 trigger: ['blur', 'change'], }, { validator: (rule, value, callback) => { return uni.$u.test.amount(value); }, message: '金额格式不对' } ], weight: { type: 'number', required: true, message: '必须是数值', trigger: ['change'] }, kucun: { type: 'number', required: true, message: '必须是数值', trigger: ['change'] }}, |
4.u-form-item中的表单必须改为 :prop="`dynamicAry.${index}.name`"
5.贴一下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <u--form labelPosition="left" :model="form" :rules="myrules" ref="form2"> <view class="block" v-for=" (item,index) in form.dynamicAry" :key="index"> <view class="block__title"> <text style="flex: 1;">规格信息<text v-if="index>0">{{index}}</text></text> <view style="width: 60px;" v-if="index>0"> <u-button type="error" icon="trash" text="删除"></u-button> </view> </view> <view class="block__content"> <u-form-item required label="规格名称" labelWidth="80" :prop="`dynamicAry.${index}.name`" borderBottom> <u--input v-model="item.name" border="none" placeholder="请填写规格名称,如200g"></u--input> </u-form-item> <u-form-item required label="报价" labelWidth="80" :prop="`dynamicAry.${index}.price`" borderBottom> <u--input type="digit" :v-model="item.price" border="none" placeholder="请输入商品报价"> </u--input> </u-form-item> <u-form-item required label="重量" labelWidth="80" :prop="`dynamicAry.${index}.weight`" borderBottom> <u--input type="number" :v-model="item.weight" disabledColor="#ffffff" placeholder="请输入商品重量" border="none"></u--input> <text @click="showGuigeWeightUnit(index)">{{item.weightUnit}}</text> <u-icon slot="right" name="arrow-right"></u-icon> </u-form-item> <u-form-item required label="库存" labelWidth="80" :prop="`dynamicAry.${index}.kucun`" borderBottom> <u--input type="number" :v-model="item.kucun" border="none" placeholder="请输入商品库存"> </u--input> </u-form-item> </view> </view> </u--form> |
6.在校验规则中加入触发器 trigger: ['blur', 'change']，比如change，值变动后会触发校验
7.重要的一点，修改uview下的u-form，因为改为数组后，const rule = this.formRules[child.prop];无法找到rule，如 child.prop=‘dynamicAry.0.name’，rule返回的是undefined，uniapp提供一个uni.$u.getProperty可以找到
修改后的validateField函数：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | // 对部分表单字段进行校验async validateField(value, callback, event = null) { // $nextTick是必须的，否则model的变更，可能会延后于此方法的执行 this.$nextTick(() => { // 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息 const errorsRes = []; // 如果为字符串，转为数组 value = [].concat(value); // 历遍children所有子form-item this.children.map((child) => { // 用于存放form-item的错误信息 const childErrors = []; if (value.includes(child.prop)) { // 获取对应的属性，通过类似'a.b.c'的形式 const propertyVal = uni.$u.getProperty( this.model, child.prop ); // 属性链数组 const propertyChain = child.prop.split("."); const propertyName = propertyChain[propertyChain.length - 1]; //修改：将const改为let let rule = this.formRules[child.prop]; //修改：链式是无法通过上面的方式获取的，改为下面的方式 if(!rule){ rule=uni.$u.getProperty( this.formRules, child.prop ); } // 如果不存在对应的规则，直接返回，否则校验器会报错 if (!rule) return; // rule规则可为数组形式，也可为对象形式，此处拼接成为数组 const rules = [].concat(rule); // 对rules数组进行校验 for (let i = 0; i < rules.length; i++) { const ruleItem = rules[i]; // 将u-form-item的触发器转为数组形式 const trigger = [].concat(ruleItem?.trigger); // 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作 if (event && !trigger.includes(event)) continue; // 实例化校验对象，传入构造规则 const validator = new Schema({ [propertyName]: ruleItem, }); validator.validate({ [propertyName]: propertyVal, }, (errors, fields) => { if (uni.$u.test.array(errors)) { errorsRes.push(...errors); childErrors.push(...errors); } child.message = childErrors[0]?.message ?? null; } ); } } }); // 执行回调函数 typeof callback === "function" && callback(errorsRes); });},// 校验全部数据 |
7.动态添加
1 2 3 4 5 6 7 8 9 10 11 12 13 | addGuige() { this.form.dynamicAry.push({ name: '', price: '', weight: '', weightUnit: '克', kucun: '', }); this.myrules.dynamicAry.push(this.guigerules); // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 //微信小程序：动态设置才能生效，每次添加都需要，动态绑定无效 this.$refs.form2.setRules(this.myrules)}, |
至此，解决完成，折腾了2个小时！！！
这是一个比较简单的解决方案！
补充知识：uView 循环表单校验
uView 默认只能对 model 属性的对象进行校验，对一些包含 列表 的表单来说，无法利用现有的功能实现校验，这里推荐一种简单的方式实现 列表 校验。
实现思路：由于 uniapp 修改源码比较简单，可以直接修改源码添加扩展功能。在 u-form-item 源码中额外添加 prop:target，表示将要校验属性所属的目标对象。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // u-form-item 源码文件中// 在 props 属性中添加target: { type: Object,},// 找到 validation 方法this.fieldValue = this.target[this.prop];// 修改成如下if (this.target) { this.fieldValue = this.target[this.prop];} else { this.fieldValue = this.parent.model[this.prop];} |
使用方式，这样即可对列表每一项的 name 属性进行校验
总结
到此这篇关于uniapp插件uview下表单无法动态校验的问题解决的文章就介绍到这了,更多相关uniapp uview表单无法动态校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
微信公众号搜索 “ 脚本之家 ” ，选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！
相关文章
本文主要介绍了常用的javascript设计模式:单体模式;工厂模式;单例模式;观察者模式（发布订阅模式）;策略模式等。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了JavaScript实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了electron实现qq快捷登录的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
如何写一个通用的JavaScript效果库！(2/2)...2007-04-04
大多数的javascript操作都需要获取先获取页面上的某个元素，引用其为当前脚本中的一个对象，然后加以操作或获取节点树形。2011-03-03
这篇文章主要为大家详细介绍了d3.js实现图形缩放平移效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了javascript实现日期时间动态显示示例代码，页面动态显示时间变化的方法有很多，本文为大家介绍下使用javascript的具体实现，感兴趣的朋友可以参考一下2015-09-09
这篇文章主要介绍了Bootstarp在pycharm中的安装及简单的使用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
javascript+css 网页每次加载不同样式的实现方法
用户每次访问时随机载入样式，让微博在视觉上保持新鲜感。虽然思路与实现都比较简单，但还是想记录下来，与大家分享。2009-12-12
这篇文章主要介绍了javascript拖拽效果延伸的学习，关于拖拽延伸出来的一些效果，感兴趣的朋友可以参考一下2016-04-04
最新评论