uview框架u-form表单校验,rules校验对象中对象的值(解决 当form属性嵌套对象时未取到值的问题)

6 篇文章 1 订阅
2 篇文章 1 订阅
本文介绍了在使用UView框架的u-form组件进行表单校验时遇到的对象嵌套校验问题。通过修改u-form-item组件的源码,增加getFieldValue方法来获取嵌套对象的值,从而实现正确校验。该方法解决了当表单字段为对象属性且需要校验时无法获取值的问题。
摘要由CSDN通过智能技术生成

当我们使用 uview 框架 u-form组件 进行表单校验时,代码如下

<!-- html代码-->
<u-form :rules="rules" ref="uForm" :model="formData" :label-width="210" :errorType="errorType">
	<view class="title">库存处理</view>
	<view class="u-p-l-30 u-p-r-30 bg-white">
		<u-form-item label="成品名称" prop="productName">
			<u-input :disabled="true" v-model="formData.productName" input-align="right" placeholder="成品名称" />
		</u-form-item>
		<u-form-item label="调整数量" prop="epStockDetail.num" required>
			<u-input v-model="formData.epStockDetail.num" input-align="right" placeholder="请输入调整数量" />
		</u-form-item>
	</view>
</u-form>
<!-- script 代码-->
export default {
	data() {
		return {
		formData: {
			productName: '', // 商品名称
			epStockDetail: {
				num: '', // 调整数量
			}
		},
		// 文字提示
		errorType: ['message'],
		// 校验
		rules: {
			productName: [{
				required: true,
				message: '请输入商品名称',
				trigger: 'blur'
			}],
			'epStockDetail.num': [{
				required: true,
				message: '请输入调整数量',
				trigger: 'blur'
			}],
		}
		}
	}
}

此时,运行代码,还无法进行进行正确的校验,我们需要修改<u-form-item>组件中的部分源码
如下:

// 校验数据
			validation(trigger, callback = () => {}) {
				// 检验之间,先获取需要校验的值
				// this.fieldValue = this.parent.model[this.prop];
				// 修改源码
				this.fieldValue = this.getFieldValue();
				// blur和change是否有当前方式的校验规则
				let rules = this.getFilteredRule(trigger);
				...
				});
			},
			/**
			 * 修改源码 新增此处方法
			 * 检验之前,先获取需要校验的值
			 * 解决:当form属性嵌套对象时未取到值的问题
			 * fix: [#I2AYUY](https://gitee.com/xuqu/uView/issues/I2AYUY)
			 */
			getFieldValue() {
				const fields = this.prop.split('.');
				const value = fields.reduce((pre, cur) => {
					return pre && pre[cur];
				}, this.parent.model);
				return value;
			},

修改源码,增加校验前, 先获取需要校验的值,以便解决 对象数据中,因为对象嵌套,导致无法进行校验 的问题
摘自 github上 uview项目 问题解答

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

苦修的木鱼

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

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

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

打赏作者

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

抵扣说明:

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

余额充值