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

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

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

form表单输入正则校验
form表单输入正则校验 <el-formslot="dialog-content"class="dialogContent":model="u ...
form表单上传文件_SpringBoot中如何使用SpringMVC上传文件？
今天我们要说的这个话题很简单,不要问为啥,因为SpringBoot,哈哈.现在SpringBoot可以说人人都会用了,它的好处是显而易见的,大大的简化了配置,一起来看看吧. 我们分以下3种情况来谈这个 ...
前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
uniapp uview 框架的form表单，输入校验手机号、校验微信号
效果代码实现 <u-form :model="form" ref="form"><u-form-item label-width=" ...
antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法
在用到antd的Form组件的时候,可能会用到自定义的规则,以我的项目为例:在输入名称的时候需要请求接口,校验的内容是后台返回的内容,所以这个时候需要用到自定义的校验规则屏幕快照 2019-06-1 ...
uniapp form表单validator函数校验
尝试了用uniapp的from以及uni-forms发现并不是特别好用,就在插件市场找了一个类似于element-ui的表单验证组件,用法基本上和element-ui一致,使用也比较方便因为目前是用 ...
深究AngularJS——校验（非form表单）
为什么是非form表单?因为基本上都是通$http服务异步发送与接收数据,没有form表单个一样可以.更何况,form表单的提交校验在哪里都可以搜索得到,我这个是通过自己总结出来滴. <!DOC ...
antdesign卡片_10分钟精通Ant Design Form表单
目录被人诟病的Form Form的原理 Vue版Form的进化史本文适合React.Vue开发者阅读,10分钟不够?那就再加10分钟. 被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就 ...
button layui 点击事件_解决layui中的form表单与button的点击事件冲突问题
解决layui中的form表单与button的点击事件冲突问题 layui的form表单位置和button标签的位置重合,会使得button的click事件得不到响应,如图: 蓝色底为form的位置, ...
前端_网页编程 Form表单与模板引擎（上）
目录一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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