vue针对ele的form组件校验

场景1：form表单下的table指定列校验非空

form表单包含了 el-table列表的对应列校验，那么将 e-table-column指定列下，增加 el-formo-item校验规则，如下：

<el-form-item label-width="0" :prop="'specGoodsPrices.' + scope.$index + '.storeCount'" :rules="[{required: true, message: '必填项不能为空'}]"><el-input type="number"  min="0" size="small" v-model="scope.row.storeCount" ></el-input>
</el-form-item>

1、el-form-item的

:prop校验属性的设置，specGoodsPrices是this.form.specGoodsPrices表格list数据，

scope.$index 区分表格所属第几行，标识此行此列是form表单的唯一校验项

storeCount:是table的列字段

场景2：自定义校验table指定列，并且触发校验相关联的其它table列

<el-form-item label-width="0" :prop="'specGoodsPrices.' + scope.$index + '.price'" :rules="[{validator: ((rule, value, callback,item,rowIndex) =>validateSkuMarketPrice(rule, value, callback,scope.row,scope.$index) ), trigger: 'blur' }]"  > <el-input ref="market-price-fItem" :min=0 size="small" title="需大于0且保留两位小数的金额格式" style="max-width:160px;" v-model="scope.row.price" ></el-input>
</el-form-item>

validateSkuMarketPrice(rule,value,callback,row,rowIndex){if(value == ""){callback(new Error('必填项不能为空'));}else{//负数校验let reg2 = /^-(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;if(reg2.test(value)){callback(new Error("金额需为非负数"));}let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;if(!reg.test(value)){callback(new Error("金额格式不正确"));}//校验门店进货价、零售价 做价格比较， 规则： 零售价>=门店进货价 if(row.shopPrice && !reg2.test(row.shopPrice) && row.price<row.shopPrice ){callback(new Error('不能低于门店价'));}else{                                  this.$refs["goodsForm"].validateField('specGoodsPrices.'+rowIndex+'.shopPrice');callback();}}
},

其中 this.$refs["goodsForm"].validateField('specGoodsPrices.'+rowIndex+'.shopPrice'); 就是触发el-table门店价格的校验，同时显示新的校验结果信息

说明：goodsForm是el-form的 ref定义，如下

<el-form ref="goodsForm" :model="form" label-width="150px" size="small">
</el-form>

vue针对ele的form组件校验相关推荐

VUE 中使用 iview Form组件 enter键防止页面刷新
<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent =&q ...
form组件、cookie、session机制
一.django form组件 1.渲染标签 2.校验数据 3.展示信息校验数据: 第一步需要一个form类 from django import formsclass MyForm(forms.F ...
Django之form组件!
一.手动实现注册功能注册功能1.渲染前端标签获取用户输入 >>> 渲染标签2.获取用户输入传递到后端校验 >>> 校验数据3.校验未通过展示错误信息 >& ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
django12:form 组件/渲染标签/数据校验/钩子函数/
基本用法 from django import forms# 自己写一个类 class RegForm(forms.Form):username= forms.CharField(min_length ...
Django之form组件is_valid校验机制
#先来归纳一下整个流程 #(1)首先is_valid()起手,看seld.errors中是否值,只要有值就是flase #(2)接着分析errors.里面判断_errors是都为空,如果为空返回sel ...
vue之ele组件中input表单限制输入字符
目录 vue之ele组件中input表单限制输入字符 input只能输入数字 input 只能输入中文 vue之ele组件中input表单限制输入字符 input只能输入数字 <!-- 描述 ...
antd vue form 手动校验_Ant Design 4.0 的一些杂事儿 - Form 篇
上一篇:Ant Design 4.0 的一些杂事儿 - Table 篇是的,趁着手热,于是又开了一篇新的文章,用来讲讲我们在开发 Ant Design 4.0 的 Form 时遇到的一些杂事儿.当然 ...
使用vue+iview Form组件按enter键阻止页面刷新
如果我们在Form组件中嵌套使用Input组件的时候,会有一个小问题,如果我们在一个Form组件中只使用了一个Input组件,当该Input组件获取焦点的时候,我们按enter键,整个页面会刷新解决 ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...

vue针对ele的form组件校验

vue针对ele的form组件校验相关推荐

最新文章

热门文章