关于el-input动态绑定正则验证的问题
2020-09-18 本文已影响0人
wuli_静哥哥
今天做项目时有个el-input是否必填是可配置项,最开始我是
<el-form-item label="粮食价格:" :rules="functionConfigs.INASSAY_EDIT_PRICE ==0?[]:[{required: true, message: '请输入粮食价格', trigger: 'blur' }]" prop="price' style="width: 33.9%;">
<el-input v-model="form.assayReq.price" class='Inputqianyang' :disabled="isEditPrice" >
<i slot="suffix" class="unit">元/kg</i>
</el-input>
</el-form-item>
这么写的,根据配置项的值判断是否有rules验证,后来输入值后一直有请输入价格提示,最后发现v-model=“form.assayReq.price”是嵌套两层,prop跟v-model绑定的值名字不匹配,所以默认一直没有填;

这个,下面正则名

这样写就好了。
所以在el-form填正则的时候prop的名字一定要跟v-model的名字一致,对于双层嵌套的也要保持一致,就酱!
如果是根据配置项需要不同正则验证的可动态配置rules,具体参考下图

