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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐