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

6 篇文章 1 订阅
2 篇文章 1 订阅

当我们使用 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项目 问题解答

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

苦修的木鱼

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

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

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

打赏作者

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

抵扣说明:

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

余额充值