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